[EN] How to debug angular app in VS Code and Chrome

I have started to develop frontend side of my pet project and yesterday I worked on login service and I had to debug it. I use Visual Studio Code to write app in angular2 and typescript and I thought why not to use VS Code for debugging? Ok, but not so fast. Few steps are required to achieve it.

In VS code open cmd palette with key combination Ctrl+Shift+P and type:

Then type Debugger for Chrome in extensions manager and install it.

1

After installation restart VS code.

Next go to Debugger or press Ctrl+Shift+D and click on the gear icon to create launch.json file.

2

By default it looks like this:

but to be able to debug angular app you need to modify it. My launch.json file looks like this:

Url is default url where angular app is located,  port: 9222 is the port used by Chrome browser.

In this config file there are two configs, one of these is for launching chrome with attached debugger and the second one is for attaching existing chrome instance. Let’s try to launch new chrome window. Click on green start icon.

3

Now you can just put a breakpoint in VS Code, wherever you want and you can debug your angular app 😉

2 comments

Comments are closed.