Switch branches/tags
Nothing to show
Find file History
Permalink
..
Failed to load latest commit information.
README.md Update required Angular CLI version Jul 23, 2018

README.md

Chrome Debugging with Angular CLI

by Anthony Sneed (@tonysneed)

This recipe shows how to use the Debugger for Chrome extension with VS Code to debug an application generated by the Angular CLI.

Getting Started

  • Make sure to have Google Chrome installed in its default location.

  • Make sure to have version 3.1.4 or greater of the Debugger for Chrome extension installed in VS Code.

  • Use NPM to install Angular CLI version 6.0 or greater globally.

    Please note: Dubugging may not function with other versions of Angular CLI.

    npm install -g @angular/cli@">=6.0"
    
  • Use Angular CLI to create a new Angular application.

    ng new my-dream-app
    
  • Change to the newly created application directory and open VS Code.

    cd my-dream-app
    code .
    

Configure launch.json File

  • Click on the Debugging icon in the Activity Bar to bring up the Debug view. Then click on the gear icon to configure a launch.json file, selecting Chrome for the environment:

    add-chrome-debug

  • Replace content of the generated launch.json with the following two configurations:

    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "ng serve",
          "type": "chrome",
          "request": "launch",
          "url": "http://localhost:4200/#",
          "webRoot": "${workspaceFolder}"
        },
        {
          "name": "ng test",
          "type": "chrome",
          "request": "launch",
          "url": "http://localhost:9876/debug.html",
          "webRoot": "${workspaceFolder}"
        },
        {
          "name": "ng e2e",
          "type": "node",
          "request": "launch",
          "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
          "protocol": "inspector",
          "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
        }
      ]
    }

    Start Debugging

  • Set a breakpoint in app.component.ts on the line that sets the title property of AppComponent.

  • Open a terminal at the root folder and serve the app using Angular CLI:

    Please note: Running npm start instead of ng serve ensures the app is served with the version of @angular/cli specified in package.json.

    npm start
    
  • Go to the Debug view, select the 'ng serve' configuration, then press F5 or click the green play button.

  • The app will be shown in a browser, but in order to hit the breakpoint you'll need to refresh the browser.

angular-breakpoint

Debug Unit Tests

  • Set a breakpoint in app.component.spec.ts on a line in one of the unit tests.

  • Open a terminal at the root folder and run the tests using Angular CLI:

    Please note: Running npm run test instead of ng test ensures tests are run with the version of @angular/cli specified in package.json.

    npm run test
    
  • After the test run, go to the Debug view, select the 'ng test' configuration, then press F5 or click the green button.

  • When a browser opens with the test list, click the link for the test in which you placed the breakpoint. You should then hit the breakpoint:

angular-test-breakpoint

Debug End-to-end Tests

You can also debug your end-to-end tests running in Protractor with VS Code.

  1. Start your local web server via ng serve.

  2. Set a breakpoint in app.e2e-spec.ts on a line in one of the end-to-end tests.

  3. After the test run, go to the Debug view, select the 'ng e2e' configuration, then press F5 or click the green button.

Notice: You might need to update the "protocol" property to legacy if you are using an older version of Node (older than Node 8)