I'm toying around with an Angular 2 / Bootstrap 4 / Webpack project, just to see how the new stuff is lining up, and I'm trying to get debugging to work in IntelliJ IDEA 15 in Chrome with the JetBrains Chrome extension.
The problem seems to be that setting a breakpoint in a .ts file doesn't set the needed breakpoint in the corresponding .js file.
Am I doing something wrong (I've never worked with TypeScript debugging before), or is this a bug in IDEA?
The trick was adding a reference to the Webpack internal URL to the debug config. The path to use for that Webpack URL will come from the scripts tab of the debugger when the application is running. You can also see it in Chrome's scripts tag just as easily, but I've included the view from IntelliJ IDEA here:
You can see that the
. path in
webpack:// corresponds to my project folder (as witnessed by the
src path in it). That's what told me that I needed to use the
. path for Webpack in the debug config. If your project lines up differently, you'll have to adjust accordingly.
As to why it is
webpack:///. (with three slashes) instead of
webpack://., that I can't answer. I saw that used in a JetBrains post and that's what led me to that solution of adding an additional forward slash.
localhost URL and port, as well as your build path (
__build__ in my case, maybe
dist in yours).
Now that I have the debug configuration setup like the above, it works just fine.