Debugging React/Webpack SPA apps (only working on certain pages)
I am using Webstorm 2017.3 and am trying to debug a React app (not a create react app). I am also using Webpack and have the sourcmaps set to 'source-map'. When I run the debug, it works (breakpoints pause execution) for specific pages but for at least one other page, it does not work, e.g. breakpoints do not pause execution or do anything. What would cause this?
Github repo: https://github.com/dericgw/gwello
Debug setup:
Here is a case where it is working:
Here is an example of it not working:
No matter where I set a breakpoint in that one file, I cannot get the debug session to stop on that file.
Please sign in to leave a comment.
Your app doesn't start for me - no errors reported, but application is not loaded. Note that I'm on Windows, so had to change "dev" script to
setting the environment vars right in run configuration:
as far as I can see from screenshots, source file seems to be resolved from sourcemaps (there is a checkmark in breakpoint). Did you try refreshing the browser page? Breakpoints in code executed on page loading are not hit until the browser is refreshed
Our team does not work on windows, so I am not sure why it did not load for you (however, it does work for us). The breakpoint that was not working was attached to a user event and not page load, although I did try page load as well but neither is working. And yes, I did attempt to refresh the browser to no avail.
Ok - works for me on OSX. And breakpoints in src/ui/pages/login/view.jsx work as expected - as soon as I start changing credentials, breakpoint at
this.ensetState({ [event.target.name]: event.target.value });is hit...
Note that my version seems to be different from the one on your screenshot - file name is view.jsx rather then index.jsx, and line numbers do not match
Yeah, I made some changes to the project. I have no idea what changed, but it seems to be working now.
One question, when I start a debug session, it opens another browser tab. Is there a way to make it debug the current tab? That way I do not lose any state.
Normally, if you have a page with URL matching the one in your debug configuration already opened in Chrome, debugger will be attached to this tab. But if the URL is different, tab won't be re-used
Thanks for all of your help! I really appreciate it.