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:
After the extension is installed, reload Visual Studio Code:
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:
Immediately you see a dropdown of choices, click on Chrome:
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:
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!!".
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:
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:
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
Subscribe to The Meek Developer Blog
Get the latest posts delivered right to your inbox