I'm troubleshooting a problem in my React.js app and I'd like to view the actual javascript being executed in the browser after it's been transpiled by Babel and bundled by Webpack. What's a good way to do this?
The app uses create-react-app so it has the default CRA configuration for Babel, webpack, etc. Source maps are working (good!) but what if I want to peek behind the source maps to find the real code being executed?
I know that I can find /static/js/bundle.js in Chrome Dev Tools' network pane, and then use Cmd+F to find a piece of code in that huge file. I also know that Chrome Dev Tools has an option to turn off source maps, but changing a persistent setting (even if I can do this without restarting debugging, which I'm not sure I can) doesn't seem any easier than the Cmd+F approach above, especially because I'll then have to remember to change it back (and restart debugging again?).
Instead, I'm just looking for a way to flip back and forth between actual generated (transpiled and bundled) code and my (source-mapped) code without interrupting my debugging workflow.
Is this do-able in Chrome?
1 Answers
Answers 1
First of all, open chrome inspector, select source Tab, after that, in source files tree located in the left side, next, select "webpack://"folder and select "." you have access to your code. Now you can debug component
I've used ES6 to write my code and bundled it with Webpack, and debugged it with this method.
0 comments:
Post a Comment