Run your debug configuration by clicking on the little green bug icon above your editing view.
You are now ready to debug your code step by step with breakpoint and other cool features provided by your IDE.
Wait for it to finish the installation of your new Angular project.įor testing purpose, I am editing the generated AppComponent to add a constructor in order to update the title attribute value and put a breakpoint on this new line : On the left side, choose Angular CLI then on the right side, select an installation folder, your node executable and your installation folder. It is a very handy tool to manage different node versions on your system : nvm. In Webstorm, click on File then New Project.Īs you can see in the path of my node and ng executables, I am using the node version manager project. We will now init a new Angular project using the CLI and Webstorm. Once it is done, you should see the extension icon next to your browser navigation bar.
Note that I am running Webstorm 2017.2.5 Prepare the environment and the projectįirst you need to install the chrome JetBrains IDE Support extension It is based on the official documentation on Jetbrains website : Debugging TypeScript and a short blog post from Jetbrains Debugging Angular apps created with Angular CLI in WebStorm This short blog post describes the steps I took to set it up (in order to remember it later and just in case it helps somebody else). Today, I had a very rebellious bug to track so I tried again and guess what, it went smoothly. Debug your Angular app in Webstorm 03 November 2017 IntroductionĪ few weeks ago, I tried to setup the Webstorm debugger in my Angular project and I failed miserably.