Debugging Angular CLI Apps inside VSCode with Browser Preview
Incase you haven’t heard about it yet, Kenneth Auchenberg — Program Manager on the VSCode team recently released an incredible extension to the marketplace, allowing you to run & debug not only Angular applications, but any type of application, all inside of the VSCode IDE!
In this post we’re going to be talking about getting things wired up with the Angular-CLI specifically - but keep in mind, you can use any framework (or none at all) and still use Browser Preview!
Getting Setup
For the purpose of this demo, let’s start with a newly created Angular-CLI application, but you could go ahead and use browser preview with an existing Angular App as well!
# let's get the latest CLI just incase :)npm i -g @angular/cling new angularcli-vscode-debugcd angularcli-vscode-debug && code .
Ok great, now that we have Angular setup out of the way, let’s make sure we have the right VSCode extensions.
VSCode Marketplace extensions needed
Let’s head over to the VSCode marketplace and download the new Browser Preview extension and make sure we have Debugger for Chrome as well (as it’s required for browser preview).
Browser Preview
Debugger for Chrome
VSCode Launch.json Configuration
Open up VSCode again and make sure we have the required launch.json configurations.
Head over to the Debugging Tab on the left,
and add a new Browser Preview configuration.
This will create a baseline Launch.json for us, but we’ll want to make a few small tweaks so that it works with Angular.
The first thing you might of noticed is that by default it’s pointing to "http://localhost:3000" and the Angular-CLI runs (by default) on port 4200, so let’s make sure we change that here.
But that alone won’t work, we also need to let VSCode know what our webRoot is. The webRoot tells VSCode where our files are being served from. In the case of the Angular-CLI, it’s simply ${workspaceFolder}.
With those two lines added, you’re all set and ready to Launch!
Running Browser Preview
Note: Make sure you are running your Angular application in a terminal before launching the VSCode debugger with browser preview.
Fire up your Angular app via npm start or ng serve, then open up the Debugging sidebar inVSCode, and make sure to select:
Browser Preview: Launch and hit Start Debugging (or F5) to try it out for yourself!
You should see our starter Angular app open up right beside your code! 🔥
Debugging with Browser Preview
Now that you have all the magic setup, let’s test out debugging real quick!
We’re going to add a little button to our app.component.html template and a method to handle the click events.
app.component.html<button (click)="testDebugging()">Click Me!</button>app.component.tstestDebugging() {
this.title = 'browser preview works!!'; // set a breakpoint here
}
Note, any changes you make to these files and Save will automatically reload in the browser preview since the angular-cli is handling all the recompilation/etc.
Set a breakpoint on the left hand gutter inside of that testDebugging() method.
When the right preview window reloads, go ahead and click on that button — and watch the magical debugging in action 🙌
And there you have it! We can see by clicking that “Click Me” button on the right side Browser Preview, it immediately hit our breakpoint in the code.
I hope that helps you get everything setup, have fun hacking away!
Angular Demo Repo
https://github.com/DevHelp-Online/angularcli-vscode-browser-preview
VSCode Browser Preview Repo
https://github.com/auchenberg/vscode-browser-preview
Find me Online !
Twitter: @MarkPieszak
Github: @MarkPieszak
Trilon — Next-level Application Consulting
Trilon.io is a software consulting firm aimed to help get teams & applications up to speed by working with some of the leading industry experts in JavaScript, NodeJS, NestJS Framework & ASP.NET.
Contact us:
hello@trilon.io
Website:
Trilon.io
