Angular CLI can help us bootstrap a new Angular app with a ready to useTypeScript and Webpack configuration. In this post we’ll see how to debug such apps in WebStorm.
If you have never used JavaScript debugger in WebStorm before, we recommend watching this video first to learn how to get started. The same way you can debug Angular apps in IntelliJ IDEA, PhpStorm, PyCharm and RubyMine.
We have an app generating with Angular CLI. We are using version 1.0.0-beta.26 – the latest available at the time of creating this post, the end of January 2017. Please note that Angular CLI is still in beta – new versions are released often and they might introduce some breaking changes.
- Run
npm startto get the app running in the development mode.
You can do this either in the terminal or by double-clicking the task in the npm tool window in WebStorm. - Wait till the app is compiled and the Webpack dev server is ready. Open http://localhost:4200/ to view it in browser.
Note that when the dev server is running, the app will automatically reload if you change any of the source files.
- Create a new JavaScript debug configuration in WebStorm (menu Run – Edit configurations… – Add – JavaScript Debug) to debug the client-side TypeScript code of your app. Paste http://localhost:4200/ into the URL field.
In WebStorm 2017.1 (now available under the Early Access Preview)
No additional configuration is needed: save the configuration and you’re ready to go.
In WebStorm 2016 (.1, .2 and .3)
Configure the mapping between the files in the file system and the paths specified in the source maps on the dev server. This is required to help WebStorm correctly resolve the source maps.
The mapping should be between the src folder and webpack:///./src
Add this value to the table with the project structure in the debug configuration like this:
To get this mapping, we investigated the content of http://localhost:4200/main.bundle.map file. This is a source map file for the bundle that contains the compiled application source code. Search for main.ts, the main app’s file; its path is webpack:///./src/main.ts.
- Save the configuration, place breakpoints in your code and start a new debug session by clicking the Debug button next to the list of configurations on the top right corner of the IDE. The browser will open on http://localhost:4200/.
- Once a breakpoint is hit, go to the debugger tool window in the IDE. You can explore the call stack and variables, step through the code, set watcher, evaluate variables and other things you normally do when debugging.
There’s a known limitation:
- The breakpoints put in the code executed on page load might not be hit when you open an app under debug session for the first time. The reason is that the IDE needs to get the source maps from the browsers to be able to stop on a breakpoint you’ve placed in an original source, and that only happens after the page has been fully loaded at least once. As a workaround, reload the page in the browser.
Your WebStorm Team
I can say that that debugging works A LOT better in 2017.1 with cli.
However there still 2 show stoppers to be fixed before so I can say WebStorm is awesome:
1. var not available with arrow functions: https://youtrack.jetbrains.com/issue/WEB-25133
2. debug crashes and leaks memory: https://youtrack.jetbrains.com/issue/WEB-25132
please attend to these issues as I have reported them numerous times,
Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/Angular-kitchen-sink
Regards,
Sean
Thanks for reporting the issues, we’re investigation and hopefully will be able to fix them soon.
Thanks, I will standby for any help needed.
regards
I work in Node.js, serverless-webpack, Typescript. I have no clue on how to get debugger to work in this environment. Is there help for this?
Do you know any open-source app with a similar setup we can try?
In theory, it should all “just work” if you have source maps (devtool: “source-map” in your Webpack config).
I work in Webstorm 2017 and angular2 with cli and follow every step in your article. When I click the debug button, the chrome show my index page but the breakpoints don’t work at all. What’s more, there is a message in webstorm saying that “WebSocket connection to ‘ws://localhost:4200/sockjs-node/819/wi40mzst/websocket’ failed: Connection closed before receiving a handshake response”.
Any suggestion to fix it? Thanks a lot!
Can you please open a support request and attach idea.log there?
The problem that I have is the inspector kills the debug connection. Which is fine since you are using Jetbrains to debug, but what if you need the responsive viewport features and the touch events. No way to emulate iphone in chrome that I know of without first opening the developer tools. Is there a workaround?
No, sorry, no workaround is available. WebStorm debugger uses the same debugging APIs DevTools use, thus, they can’t work simultaneously. The only possible option, I guess, is to have an app open in 2 different instances of Chrome and use WebStorm debugger in one them and DevTools in another.
Latest 2017.2
I’m guessing it broke when webpack changed the paths from “.” to absolute values
Webpack has changed their paths so debugging no longer works out of the box.
This is the correct mapping needed:
http://localhost:4200/webpack:/
found it by reading this post: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ and looked at the “scripts” location in the debug window.
What WebStorm version do you use? Starting from version 2017.1 WebStorm doesn’t need any mappings to debug Angular CLI apps.
The fix will be available in the next EAP build: https://youtrack.jetbrains.com/issue/WEB-27381
I’m using Webstorm 2017.1.4 and I upgrade my application with angularCli 1.1.3: the debug in webstorm doesn’t works no more (instead the debug in Chrome still works). I try to create an new clean application with angularCli 1.1.3 and the debug in Webstorm still not works.
I have the same problem. Using IntelliJ Ultimate 2017.1.4 and angular-cli 1.2.0
The problem started with the upgrade to angular-cli 1.1.2 (1.1.1 still works fine), with no breakpoints working anymore. Any ideas how to get it up and running again?
This is likely the problem caused by recent angular-cli changes: currently webpack generates absolute Windows paths in sourcemap that break the debugging (https://youtrack.jetbrains.com/issue/WEB-27381).
As a workaround, please, try the following:
– in terminal, run
ng ejectin project root directory– open the generated webpack.config.js, in line 385 change moduleFilenameTemplate value to
info =>webpack:///${info.resourcePath}:new SourceMapDevToolPlugin({"filename": "[file].map[query]",
"moduleFilenameTemplate": info =>
webpack:///${info.resourcePath},"fallbackModuleFilenameTemplate": "[resource-path]?[hash]",
"sourceRoot": "webpack:///"
}),
– run
npm startto start the application, then use your JavaScript debug configuration for debuggingYou can eject like lena_spb said or just add at the Run/Debug configurations the following path:
http://localhost:4200/webpack:/(Your full path)
Thank you Ron, this one worked for me!
In my example it’s http://localhost:4200/webpack:/C:/Users/%5Busername%5D/dev/%5Bproject-source%5D
For me it just works fine (using IntelliJ 2017.1.5 and Angular 4 with custom webpack 2 setup which is still a leftover from our angular 2 setup).
However, I can see the objects passed to or declared in any function I debug but I cannot see the values of any member variable. IntelliJ says that all of them are undefined, even after they’ve got assigned a static value during the debug operation.
I configured webpack to use
devtool: 'source-map'and already tried to map the remote url to the full path, but nothing changed.Can anyone help me please?
I found a solution. I changed the devtool to
devtool: eval-source-mapwhich seems to work now.Thanks for this nice tool!
Great that it works fine now! Interesting that eval-source-map option performed better than source-map, though that they are basically the same. We’ll have a closer look.
Is Live Editting possible with angular CLI/webpack and webstorm? If so how?
Angular CLI projects have auto-reload on changes enabled by default. You don’t need to use Live edit for that.