Debugging Angular CLI Apps inside VSCode with Browser Preview

Mark Pieszak
Jan 25, 2019 · 4 min read

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!

VSCode Browser preview with live debugging!

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.

Baseline launch.json configuration for VSCode Browser Preview.

The first thing you might of noticed is that by default it’s pointing to 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 .

Setting up Angular-CLI launch.json for Browser Preview.

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 or , 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! 🔥

Browser Preview and Angular-CLI in action

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 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 method.

When the right preview window reloads, go ahead and click on that button — and watch the magical debugging in action 🙌

Browser Preview breakpoint 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

VSCode Browser Preview Repo

Find me Online !

Twitter: @MarkPieszak
Github: @MarkPieszak

Trilon — Next-level Application Consulting 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:


Trilon Consulting — Next-level Application Consulting

Mark Pieszak

Written by

Trilon Co-Founder ( — Next level Consulting from Open-source fanatics and key contributors. >> Angular Universal core team >> NestJS Core Team

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade