Skip to content

Commit

Permalink
final polish
Browse files Browse the repository at this point in the history
  • Loading branch information
weinand committed Jun 15, 2017
1 parent c7b09bf commit 48779b0
Showing 1 changed file with 11 additions and 16 deletions.
27 changes: 11 additions & 16 deletions Angular-CLI/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,16 @@ by [Anthony Sneed (@tonysneed)](https://github.com/tonysneed)
This recipe shows how to use the [Debugger for Chrome](https://github.com/Microsoft/vscode-chrome-debug) extension with VS Code to debug
an application generated by the [Angular CLI](https://cli.angular.io/).

> **Please note**: This recipe requires Angular CLI version **1.1.1** or greater, together with the Debugger for Chrome extension for VS Code version **3.1.4** or greater.
## Getting Started

- Use [NPM](https://www.npmjs.com) to install Angular CLI globally.
- Make sure to have [Google Chrome](https://www.google.com/chrome) installed in its default location.

```
npm install -g @angular/cli
```
- Make sure to have version **3.1.4** or greater of the [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) extension installed in VS Code.

- Install the [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) extension for VS Code.
Press Cmd + P (MacOS) or Ctrl + P (Windows/Linux), then paste the following command and press Enter.
- Use [NPM](https://www.npmjs.com) to install Angular CLI globally.

```
ext install debugger-for-chrome
npm install -g @angular/cli
```
- Use Angular CLI to create a new Angular application.
Expand All @@ -28,7 +23,7 @@ Press Cmd + P (MacOS) or Ctrl + P (Windows/Linux), then paste the following comm
ng new my-dream-app
```
- Change to the app directory and open VS Code.
- Change to the newly created application directory and open VS Code.
```
cd my-dream-app
Expand All @@ -38,11 +33,11 @@ Press Cmd + P (MacOS) or Ctrl + P (Windows/Linux), then paste the following comm
## Configure launch.json File
- Click on the Debugging icon in the Activity Bar to bring up the Debug view.
Then click on the *settings* icon to configure a launch.json file, selecting **Chrome** for the environment:
Then click on the gear icon to configure a launch.json file, selecting **Chrome** for the environment:
![add-chrome-debug](https://user-images.githubusercontent.com/2836367/27004175-77582668-4dca-11e7-9ce8-30ef3af64a36.png)
- Replace content of the the generated launch.json with the following two configurations.
- Replace content of the generated launch.json with the following two configurations:
```json
{
Expand Down Expand Up @@ -70,13 +65,13 @@ Then click on the *settings* icon to configure a launch.json file, selecting **C

- 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.
- Open a terminal at the root folder and serve the app using Angular CLI:

```
ng serve
```

- Go to the Debug view, select the **'Launch Chrome with ng serve'** configuration, then press F5 or click the green button.
- Go to the Debug view, select the **'Launch Chrome with 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.

Expand All @@ -86,15 +81,15 @@ Then click on the *settings* icon to configure a launch.json file, selecting **C

- 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.
- Open a terminal at the root folder and run the tests using Angular CLI:

```
ng test
```

- After the test run, go to the Debug view, select the **'Launch Chrome with 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.
- 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](https://user-images.githubusercontent.com/2836367/27004448-e5134ff8-4dce-11e7-8145-69de0956dd07.png)

0 comments on commit 48779b0

Please sign in to comment.