Debug angular in webstorm7/2/2023 ![]() When the app is compiled and the Webpack dev server is ready, the Run tool window shows that the app is running in the browser at Note that when the dev server is running, the app will automatically reload if you change any of the source files. In either case, WebStorm launches the predefined Angular CLI Server run/debug configuration. Select the Run Angular CLI Server run/debug configuration from the list on the toolbar and click the Run button next to the list. Open your package.json file, click the Run Script gutter icon next to the start script, and select Run Angular CLI Server from the list. Open the built-in Terminal and type npm run start.ĭouble-click the start task in the npm tool window. To set a line breakpoint, click the gutter next to the executable line of code where you want the application to suspend. WebStorm recognizes line breakpoints, exception breakpoints, and conditional breakpoints. You do not need to define any run/debug configurations yourself, as WebStorm has already created two default ones for you:Īngular CLI Server to launch your app in the development mode. Learn more from Creating a new Angular application. When you click Create, WebStorm downloads and runs Angular CLI, which generates an app with an Angular-specific structure, and downloads all the required dependencies. Select File | New Project from the main menu, then, in the New Project dialog, select Angular CLI as the project type, and specify the application name (blogAngular) and parent folder for it (WS). With WebStorm, you don’t have to download Angular CLI in advance – during project generation the IDE downloads and runs it using npx. The same principles apply to our other IDEs, including IntelliJ IDEA, PhpStorm, and P圜harm. ![]() If you have never used the JavaScript debugger in WebStorm before, we recommend watching this video first to learn how to get started. ![]() Run the application in the development mode.In this post, you’ll learn how to start debugging an Angular CLI application that is running on the localhost. ![]() I had this process working before when using the evaluation of WebStorm but after I bought a license and reinstalled WebStorm it no longer works.Note: This post was updated in June, 2021.Īngular CLI can help us bootstrap a new Angular app with a ready-to-use TypeScript and Webpack configuration. The instruction also mention that WebStorm creates a default Angular Application configuration but I don't see one being created. ![]() I have also tried just clicking the "bug" icon, and though the project compiles via webpack and runs it never stops at the breakpoints I set in WebStorm.ĭebugging within Chrome using the dev tools works just fine and the breakpoints I set there work fine, however I really would like to be able to do the debugging inside of WebStorm. This pops up a dialog warning that the project is not allowed to run in parallel (of which I cancel out). The instructions at JetBrains support website say to launch the app via the green triangular "play" button and then once the app is running then click the "bug" icon next to the play button. I am using the default Angular CLI configuration pointing to localhost:4200. I setup my run/debug configuration as shown in the screen capture below. I followed the instructions on JetBrains support website as well as numerous YouTube videos but it looks like the debugger never runs or hits my breakpoint. I am attempting to debug an Angular application that is based on Angular 5.2. ![]()
0 Comments
Leave a Reply. |