How to debug a Angular 2 application with Chrome and VS Code

ByFabian Gosebrink on October-Angular? 0 Comments

In this blogpost I want to show what you do to debug a Angular 2 application with Chrome and VS Code.

First of all, need to install the extension in VS Code.

You can find it here

Https://github.com/Microsoft/vscode-chrome-debug

Or search in the Extensions tab for the plugin directly:

After installing you probably has to enable the plugin and restart VS Code but the end you'll see your folder struct Ure like normal. Then head-to-the-debug tab and press the button for creating your new configuration and select the "Chrome" environ ment.

After doing this, the extension created a new folder (if you don't have it already) called ". Vscode" and a "Launch.json" I n It initially looking like this:

1 {2"Version": "0.2.0",3"Configurations": [4         {5"Name": "Launch Chrome against localhost, with Sourcemaps",6"Type": "Chrome",7"Request": "Launch",8"url": "http://localhost:8080",9"Sourcemaps":true,Ten"WebRoot": "${workspaceroot}" One         }, A         { -"Name": "Attach to Chrome, with Sourcemaps", -"Type": "Chrome", the"Request": "Attach", -"Port": 9222, -"Sourcemaps":true, -"WebRoot": "${workspaceroot}" +         } -     ] +}

Our folder Strucutre tells us the files is served from the root.

So the "" WebRoot ":" ${workspaceroot} ""-setting are good to go for us. We'll open a new Chrome instance but it needs an existing running server. Something like "lite-server" you can easily type ' lite-server ' at the root of your webapplication or place I T in your NPM command chain in the "npm start" command. That's what I did. But before we go we need to sdjust the URLs where the server is running on and the URL where the Chrome instance is Starti Ng.

So replace the port in the config file with the port from your lite-server. In my cae thats "3000". This is what your config look like then:

1 {2"Version": "0.2.0",3"Configurations": [4         {5"Name": "Launch Chrome against localhost, with Sourcemaps",6"Type": "Chrome",7"Request": "Launch",8"url": "http://localhost:3000",9"Sourcemaps":true,Ten"WebRoot": "${workspaceroot}" One         }, A         { -"Name": "Attach to Chrome, with Sourcemaps", -"Type": "Chrome", the"Request": "Attach", -"Port": 9222, -"Sourcemaps":true, -"WebRoot": "${workspaceroot}" +         } -     ] +}

Then start the Lite server and just hit "play"

Chrome starts and you can debug your page in VS Code. Of course you can also confugre Chrome to attach directly. See here for examples:

Https://github.com/Microsoft/vscode-chrome-debug/wiki/Examples

Hope This helps anybody

Br

Fabian

How to debug a Angular 2 application with Chrome and VS Code