In this post, I am going to show you how to get started with debugging angular apps in VSCode. We shall target Firefox, Chrome and Microsoft Edge. VSCode Debugger provide important features that can improve your development experience.
These features include: break point, code stepping and stack traces. With VSCode debugger, you can get all errors, console messages and debug information from different browser at the same console. It also provides a consistent debug experience as compared to using individual tools found in each browser. Let’s get started:
Google Chrome Debugger
Next, we need to configure the debugger for our angular app. To do this, open the debugger (
CTL + SHIFT + D) and click on the gear icons to create the launch.json file – this is where our configuration are stored. A new launch.json (under .vscode folder in the root of your VSCode Workspace) file is created with the following defaults:
"name": "Launch Chrome against localhost",
Change the URL to point to the address of your Angular app Server. The default URL is localhost on port 4200 (
http://localhost:4200), but some developers change that especially when you are developing multiple application. Also, change the name of your configuration to something you can easily remember. Next, serve your application as you normally would:
ng serve or ng serve --aot
And finally launch your debugger using either F5 or by pressing on the play icon, at the top of the debugger side panel. A new chrome window will be launched which will open your angular app. To view console messages and activity, open the debug console, by using
CTL + SHIFT + Y or by Going to View, then Click on the Debug Console.
Debuggers for Firefox and Microsoft Edge
Next up is Firefox and Microsoft Edge. The process is much like the process of setting up Chrome above. First, install Debugger for Firefox and Debugger for Edge.
Next, open debugger on VSCode (
CTL + SHIFT + D) and press on the gear icon. If you are working on the same angular app as before, clicking on the gear icon, will open launch.json, with configuration to debug on chrome. So, in this case instead of replacing the Chrome Configurations , we need to add new configurations for debugging on both Firefox and Microsoft Edge. To do this, there is an Add Configurations button at the bottom right of the window.
Click on the button, and an autocomplete dropdown window will show up, where you can type in the configurations you wish to add. So, to add Firefox, type Firefox and select
Firefox: Launch (server) and to add Edge, type Edge, and then select Edge: Launch. You should have two new configurations in your
"name": "Launch localhost",
"name": "Launch Edge (Frontend App)",
Make the necessary changes to the configurations, especially the URL to point to your server. Don’t forget to add a port to the URL of the Firefox configuration. Once you are done with the configuration, make sure you are running your Angular server. Then open the debugger (
CTL + SHIFT + D) and on the drop down in between play and gear icon, select which browser you would like to debug with and click on the play button. A browser window of the browser you chose should launch and your app should open.
To view console activity on VSCode, open the debug console, by using
CTL + SHIFT + Y or by Going to View on the menu bar, then Click on the Debug Console. Now you can add breaking point on your angular code, and it will pause when it gets to the break point. You can also step through your code while observing how various variable change through the process using breaking points among other advantages.
Sign in off
I hope I have covered every aspect to help you getting started with debugging angular apps on vscode. Thank you for getting this far, if you found this useful, please don’t forget to share with your friends and colleagues. Here is another post on Visual Studio Code and Angular that might be helpful.