Breakpoints don't appear to be working in JS / TS / Webpack project (but "debugger;" statement does)

Hi,

I've just started work on quite a big pre-existing project using Typescript and Webpack for the front end and Java for the backend, and I've been trying out IDEA to see if it offers better support than Eclipse.

IDEA certainly promises to work, and is tantalisingly close, except for the issue described bellow:

I have created a project, told it about my TypeScript source files etc, and configured a JS debug configuration which maps "webpack:///." to the root of the project.  I actually run sbt to bring up the backend and launch the webpack-dev-server, but anyway, webpack starts and I launch the debug session in IDEA.

IDEA opens a page in Chrome and connects the debugger to it as expected, and outputs to the console.

However, if I create a breakpoint and refresh the page, it doesn't work, i.e., Chrome doesn't stop at that line.

I would have thought I had set it up wrong, except for that fact that I can insert "debugger;" statements and it works as expected:  when the code reaches the statement it stops and jumps to the correct line in IDEA's debugger, and the editor is annotated, I can inspect variables and step into methods which are defined in other files and everything.  Also "console.log()" messages report the right file / line, which I can click in the IDEA JS console and it take me to the right source file in the project

So, I feel like source-maps must be working, and the debugger is connected.  I'm just curious as to why it seems that IDEA cannot tell Chrome about it's breakpoints in this project.

I have also tried the angular2-seed project and that works 100% as expected: I can set breakpoints and Chrome stops where it's supposed to.  So it's funny that it doesn't work in my project.

Any suggestions?

8 comments
Comment actions Permalink

Well... it's hard to track down the issue without the project - can you provide it? I can only say that sourcemaps aren't working for some reason (incorrect format, mappings, etc.). In most cases all you actually need to get webpack debugging working is modifying the webpack config to enable sourcemaps (devtool: 'source-map'). Also, how do you compile typescript? What Ts module loaders are used?

0
Comment actions Permalink

We are using awesome-typescript-loader.  

It's strange because source maps do appear to be at least partially working:  as I say, console.log() statements are annotated with the correct source file name and line, and when I click though IDEA opens the correct TypeScript file and places the cursor at the correct place.  And the 'debugger;' statement works, and once I hit that statement I can step into functions in other TypeScript files in my project, and evaluate statements as I would expect.  So somehow, Chrome and IDEA are matching up the browsers execution stack and are correctly matching the line in the transpiled JS that the browser is executing with the matching line in the source TypeScript file.

If I change devtool: to something which isn't 'source-map' or 'inline-source-map', I no longer get file name and line number reported in the console.

Unfortunately I can't provide the project file for you.  However, I will try stripping everything back and building it back up again, seeing if I can find a minimal breaking project which demonstrates the problem.

The only other thing I can think of is that webpack is serving the JS from port 3000 while the HTML pages are being served from 10214, could this be something that is breaking it?

0
Comment actions Permalink

Hello. I've just migrated a project from JSPM/SystemJS to webpack I've got a similar issue when I try to debug karma unit tests. 

I can force the execution to stop by setting the debugger statement. After that web storm will hit any subsequent breakpoint I set. But it ignores any breakpoints I set before staring karma.

You can try webpack branch of https://github.com/wikibus/heracles.

0
Comment actions Permalink

Unfortunately the debugger detaches immediately on starting when using your project (bug is tracked as https://youtrack.jetbrains.com/issue/WEB-28008)

As a workaround, you can try the following:

- create a new JavaScript Debug run configuration with http://localhost:9876/debug.html URL, webpack:///tests set as URL mapping for tests folder

- start karma using Karma run configuration

- once server is up and running, debug the configuration above

- when the Chrome page with debugger attached is loaded, refresh the browser page to get breakpoints hit: when using sourcemaps, breakpoints in code that is executed on page loading don't immediately work unless the page is hosted on built-in webserver, see https://youtrack.jetbrains.com/issue/WEB-19372.

2
Comment actions Permalink

Elena, thank you for taking the time to investigate deeply.

So, with WEB-28008 I wouldn't be able to debug at all? On my system, with WS 2017.2.2 build 172.3757.55 I can actually debug after the debugger; statement breaks execution.

Anyway, thanks for an alternative workaround. I'm sure me or someone else will find it useful!

0
Comment actions Permalink

>So, with WEB-28008 I wouldn't be able to debug at all? 

Sorry, don't understand you question. You can debug using either debugger; or JavaScript Debug run configuration. You can't debug using karma run configuration + breakpoints because of WEB-28008

0
Comment actions Permalink

I mean that I am actually able to run using the karma configuration included in the project but it doesn't attach breakpoint I set before starting.

If I add the debugger; statement it breaks and any breakpoint that I set when already in debug mode are then hit.

Are these symptoms of the WEB-28008 issue?

0

Please sign in to leave a comment.