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?