/ Tools

Break Point! VS Code & Chrome Developer Tools

Testing your code, having unit as well as integration tests are extremely important. However, sometimes you just want to observe your code's execution in a sequential manner. Add breakpoints to your editor, push or execute a command to debug, and BAM!! Hover over variables, methods to see what they contain without having to dig around Chrome developers tools viewing nest folders looking for map files etc. On this blog post am going to use the Angular CLI, create a new Angular project, configure the Visual Studio Code Chrome extension, and place break points in my code to inspect the internals of the application.

Install Angular CLI

As as mentioned above, I will be taking advantages of all the wonderful power that the CLI has to offer, I don't have to be a Webpack expert, and more importantly I don't have to worry about the ochistration of getting started.

          npm -g install @angular/cli
          ng new mycoolapp
          installing ng
          create .editorconfig
          create README.md
          create src\app\app.component.css
          create src\app\app.component.html
          create src\app\app.component.spec.ts
          create src\app\app.component.ts
          create src\app\app.module.ts
          create src\assets\.gitkeep
          create src\environments\environment.prod.ts
          create src\environments\environment.ts
          create src\favicon.ico
          create src\index.html
          create src\main.ts
          create src\polyfills.ts
          create src\styles.css
          create src\test.ts
          create src\tsconfig.app.json
          create src\tsconfig.spec.json
          create src\typings.d.ts
          create .angular-cli.json
          create e2e\app.e2e-spec.ts
          create e2e\app.po.ts
          create e2e\tsconfig.e2e.json
          create .gitignore
          create karma.conf.js
          create package.json
          create protractor.conf.js
          create tsconfig.json
          create tslint.json
        You can `ng set --global packageManager=yarn`.
        Installing packages for tooling via npm.
        Installed packages for tooling via npm.
        Successfully initialized git.
        Project 'mycoolapp' successfully created.
        PS C:\Users\Atorr\Desktop> cd .\mycoolapp\
        PS C:\Users\Atorr\Desktop\mycoolapp> code ...

Install VS Code Chrome Extension

Inside Visual Studio Code click on the extension icon or use the keyboard shortcut:
CTRL+Shift+X - Windows
⇧ ⌘ X - Mac

Next, do a search for Debugger for Chrome and install the extension:

extension

After the extension is installed, reload Visual Studio Code:

reload-1

Configure Chrome Debugger

This is the part that really impressed me because it was too easy. It was so easy that I even questioned if I was doing it right?

Click on the debug icon or use keyboard shortcuts:
CTRL+Shift+D - Windows
⇧ ⌘ D - Mac

Click on the gear icon:

gear

Immediately you see a dropdown of choices, click on Chrome:

setup

You will see that a json file called "Launch.json" is created, and by default it points to port 8080. Now, by default the Angular CLI uses port 4200, so simply alter the port from 8080 to 4200 as illustrated below:

launch.json

Break it Down!

The Angular CLI has by default a sample page, and am going to change the title binding from "app" to "NG Houston Rocks!!".

binding

And am going to add a break point on the title variable, and take advantage of the awesome ability to observe what is actually happening behind the scenes:

breakpoint

Run ng --serve in your command line interface, give some time for angular to transpile your code in dev mode, then click on Debug icon again, and on the green play button to start debugging. This will launch your chrome browser on localhost:4200. Reload or push F5 on chrome, this will actually force the browser to execute again in order to hit your breakpoint in VS Code:

livebreak

You can do all of this using the developer tools directly from Chrome, but I find it way easier to just stay in Visual Studio Code.

Market place link available here

Github Project available here