Webstorm opens 2nd editor tab when debugging with Chrome Follow
When debugging a React App with WebStorm and Chrome, WebStorm opens a second editor tab when stopping on a breakpoint and stepping through the code.
- OS: Windows 10
- Project directory: c:\path\to\webapp
- Run/debug configuration URL: http://localhost:3000
- original WebStorm editor tab: node_modules/ol-mapbox-style/src/stylefunction.js (tooltip c:\path\to\webapp\node_modules\ol-mapbox-style\src\stylefunction.js)
- Chrome DevTools source tab: stylefunction.js (tooltip: http://localhost:3000/static/js/C:/path/to/webapp/node_modules/ol-mapbox-style/src/stylefunction.js)
- WebStorm source tab being shown while debugging: file:\\\c:\path\to\webapp\node_modules\ol-mapbox-style\src\stylefunction.js
The contents of the original editor tab and that used during debugging are identical - they also seem to refer to the same file according to the tooltip (although file:\\\ with backslashes instead of slashes is weird). But the breakpoint is only visible in the original tab and the current line in the other one. I can't set a breakpoint in the file:-tab. So for setting additional breakpoints I have to switch to the original tab, scroll to the correct line and set it there.
Based on the path in the Chrome tab I set c:\path\to\webapp to correspond to http://localhost:3000/static/js/C:/path/to/webapp in the run/debug configuration. No change.
Is there a way to debug in the original source tab?
P.S. We are packing the code with react-scripts 5.0.1 and thus webpack 5. While with webpack 4 the source maps with relative paths were incorrectly mapped/not found, now it works perfectly. The only problem is that viewing/setting breakpoints and debugging have to be done in two editor tabs of the seemingly same file.
Please sign in to leave a comment.
Haven't faced such issues when debugging apps bundled with react-scripts; could you share a sample project it can be repeated with?