Debugging Angular apps created with Angular CLI in WebStorm
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.
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. You can see the app running in the browser ot http://localhost:4200/.
Note that when the dev server is running, the app will automatically reload if you change any of the source files.
- 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.
In this IDE versions, you need to configure the mapping between the files in the file system and the paths specified in the source maps on the dev server in your debug configuration. This is required to help WebStorm correctly resolve the source maps.The mapping should be between the
webpack:///./srcAdd this value to the table with the project structure in the debug configuration.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
If you have any problems with debugging your application, please contact our tech support. Please share information about your IDE version and breakpoint locations and, if possible, your project.
Your WebStorm Team