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

Source: Internet
Author: User
Tags vcard

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.