Webstorm opens second tab with code when debugging
I'm using Chrome browser and I have installed the Jetbrains plugin so that Javascript can be debugged. When I start a debug session a second tab is displayed that contains my code, rather than using the original tab. Looking at the code in the second tab it seems that the web server is injecting the following code at the start of the file:
// Translations for en_GB
i18n_register({"plural": function(n) { return n == 1 ? 0 : 1; }, "catalog": {}});
I think this alteration of the code by the web server is why the second tab is being opened. Breakpoints that I have set in the original code file appear to be triggered within the second file, as execution stops on those lines. However, the red dot that indicates that a breakpoint has been set is missing.
Is there any way in which the debugger can be configured to keep the debug session within the original code file and to not open the second tab?
Please sign in to leave a comment.
The built-in webserver doesn't add any code to your scripts...
By second tab, do you mean a browser or editor tab? In the latter case, it must be a tab with the code in VM (i.e. the code that is actually being executed rather than the source code). Looks as if the project source code can't be mapped to the one in runtime. Do you post-process your code in any way (transpile/beautify/copy to different location) prior to running it? what web server is it served on? Please share a screencast that shows your run configuration and steps
Elena, thanks for your reply. In answer to your questions:
Q. By second tab, do you mean a browser or editor tab?
A. I mean a an extra editor tab, not an extra browser tab.
Q. What web server is it served on?
A. I'm developing an app for Splunk, so it is a web server that is built into Splunk.
Q. Do you post-process your code in any way (transpile/beautify/copy to different location) prior to running it?
A. I don't myself, but it appears that the Splunk web server inserts those extra lines. It doesn't copy the files to another location. Using the Chrome DevTools it appears that the file that is delivered to the client is identical to the one in the second WebStorm tab. The code in the tab is unminified. In fact the only difference with the original file is the two extra lines at the beginning.
I've created a screencast of the debug session that I have uploaded here: https://1drv.ms/v/s!AhZL8rUFbj79j7NDBVnGrts8iANLXA?e=eBWvwc
For some reason the screencast could not capture the Run/Debug Configurations modal dialog box, so I have posted a screenshot.
Can you see the original code (without extra lines) in Dev Tools? Try searching for the corresponding file in the Sources tree of Developer Tools. If the original file is not there, this likely means that Splunk doesn't produce source maps to map the source files to the ones on server...
BTW, what URL does the file in Dev Tools have? You can try specifying this URL (excluding file name) as Remote URL for file parent dir in your run configuration... BTW, the mappings in your screenshot look a bit strange - the URL specified for file differs from the one for folder, note the extra `static` in path
I've searched through all of the nodes and files under the Sources tree, but I can't see the original code file.
In DevTools the URL of the file is http://localhost:8000/en-GB/static/app/TestApp1/cpuDashboardImplementation.js (see screenshots)
I've corrected the debig config on the folder, but I still get the same result.
From what you've said it sounds to me like this may be an issue with Splunk's web server, which needs to produce the source maps.
>From what you've said it sounds to me like this may be an issue with Splunk's web server, which needs to produce the source maps
yes, I think so...