I am using
chrome.devtools.inspectedWindow.getResources(allFiles => {})
It works, but I get the webpack compiled code and not the original React files. In the chrome source panel, it shows the original files using source maps. Can access the original files from chrome devtools? Please help with any pointers.
Can you try react-dev-tools extension
Selecting the react component and clicking the <> on top-right will take you to its React component source code.
More info at https://reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html
Related
I'm using react pdf to render my component as PDF & allow user to download that PDF on button the PDF was working well after applying pollyfills changes but for my lead (who is using MAC) the PDF was not rendering and giving the
Error: react_devtools_backend.js:4026 TypeError: zlibWEBPACK_IMPORTED_MODULE_3.createDeflate is not a function
On deployment it's even works well on his system but locally he can't render it, does anyone have idea what issue that would which causing this things?
I tried to clone the repo in another folder & installed all the dependencies again but nothing works yet
Here's the screenshot of console error: https://cdn.discordapp.com/attachments/990645691531534370/1012846396296138833/Screen_Shot_2022-08-26_at_3.09.51_PM.png
I found the similar issue opened as well source: https://github.com/diegomura/react-pdf/issues/1935
But it's closed without any proper explanation
I've created a basic Create React App with TypeScript template
npx create-react-app cra-test --template typescript
I added just a simple MyButton component and passed a on click handler to it.
When I'm profiling it with Chrome DevTools links to the source in the profiler are incorrect and not working as if there where no source maps.
When I run console.trace in my onClick handler stack trace looks good.
How can I get correct links to source files in the profiler tab working?
Thanks!
In order to get this working you need to change webpack's setting
devtool: 'eval-source-map'
You can set it using config-overrides.js (react-app-rewired).
Probably there are some other source map types that will work but that one gives you the most detailed information.
More on source map types here
https://webpack.js.org/configuration/devtool/
You can read about devtool setting here.
https://webpack.js.org/guides/development/#using-source-maps
I have a reactJS SSR app deployed into server, I am trying to use one of the page /listpage as a widget into some other website
The list page is appearing nicely in other website however some of the click actions were not working, when I debugged it I found that the issue was with serving reactjs static js chunk files which were created by react run build. The issue was with relative path /static/js/xxxx
to fix this issue, one solution is to have a full path reference, to enable that I added homepage:"" in package.json
this worked and when I checked network tab in chrome browser i could see all static js files are referred using full path.
however a strange issue occurred , the whole list widget appears and suddenly disappears , when I inspect the elements I could see nothing inside thats where all react components suppose to be rendered.
for full code of SSR project kindly refer with explanation.
however the full code is in github
I'm writing a Chrome extension using React, and more specifically, using Create React App. If I inspect the popup that the extension generates, look at Sources, and click on any of the js files, Chrome says "Source Map detected". If I click on "More", it says that "Associated files should be added to the file tree. You can debug these resolved source files as regular JavaScript files.". But I don't see the source files anywhere in the source tree. What do I need to do to be able to view them?
I've tried to add the source maps to the web_accessible_resources property of manifest.json (as per Do source maps work for Chrome extensions?), but that didn't work. Also tried the changes recommended in the top answer of chrome 72 changes sourcemap behaviour - making some changes to webpack.config.js and manifest.json - but that didn't work either.
Are you working with workspaces?
https://developers.google.com/web/tools/chrome-devtools/workspaces/
BTW, create react app don't generate all the sourceMaps by default.
Could you check the file
node_modules/react-scripts/config/webpack.config.js
Search there for the sourceMap and sourceMaps, and see if that is ok for you.
You can copy that file like "_original", and then set
sourceMaps: true,
in all ocurrences. After that, completely stop the app, and then start it again.
Is that working now?
To verify which sourceMap is working or not, add the sources to workspaces and check for the green dot:
https://developers.google.com/web/tools/chrome-devtools/workspaces/
I'm new to Webpack and React. I'm building an app using react, and today tried to create a build for the first time (i'm using create-react-app).
When trying to debug using Chrome dev tools, I can see all my Components using the map file generated by webpack/babel, however I get an error when placing a breakpoint inside a basic map method, and trying to access the value of the current item, or the mobx store items.
It's obviously working fine in development mode.
I guess i'm missing something with the configuration?
Thanks,
Currently fixed it by setting mangle=false in the uglify plugin. This causes uglify to not change variable names, so the map file has no problem to map to the real variables.