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

Let’s get started with chrome, since it’s the most popular browser out there. Majority of your users will likely be using it. Therefore, you must ensure everything is working as smoothly as possible on the browser. On top of that, there are other browsers that use the JavaScript Chrome V8 engine. First, install the Debugger for Chrome extension on VSCode. Once that’s complete, open the angular app you wish to debug.

Configurations

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:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

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 launch.json:

[
  {
    "type": "firefox",
    "request": "launch",
    "reAttach": true,
    "name": "Launch localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
  },
  {
    "type": "edge",
    "request": "launch",
    "name": "Launch Edge (Frontend App)",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
  }
]

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.

VSCode Console

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.