Webstorm opens 2nd editor tab when debugging with Chrome

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.


1 comment
Comment actions Permalink

Haven't faced such issues when debugging apps bundled with react-scripts; could you share a sample project it can be repeated with?


Please sign in to leave a comment.