Debugging Angular CLI Apps inside VSCode with Browser Preview.

Mark Pieszak | Trilon Consulting
Mark Pieszak

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/cli
ng new angularcli-vscode-debug
cd 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 "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}.

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

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 app.component.html template and a method to handle the click events.

<!-- app.component.html -->
<button (click)="testDebugging()">Click Me!</button>
// app.component.ts
testDebugging() {
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 🙌

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

Learn NestJS - Official NestJS Courses 📚

Level-up your NestJS and Node.js ecosystem skills in these incremental workshop-style courses, from the NestJS Creator himself, and help support the NestJS framework! 🐈

🚀 The NestJS Fundamentals Course is now LIVE and 25% off for a limited time!

🎉 NEW - NestJS Course Extensions now live!

Share this Post!

📬 Trilon Newsletter

Stay up to date with all the latest Articles & News!

More from the Trilon Blog .

Jay McDoniel | Trilon Consulting
Jay McDoniel

NestJS Metadata Deep Dive

In this article we'll be doing a deep-dive and learning about how NestJS uses Metadata internally for everything from dependency injection, to decorators we use everyday!

Read More
Kamil Mysliwiec | Trilon Consulting
Kamil Mysliwiec

NestJS v10 is now available

Today I am excited to announce the official release of Nest 10: A progressive Node.js framework for building efficient and enterprise-grade, server-side applications.

Read More
Manuel Carballido | Trilon Consulting
Manuel Carballido

Implementing data source agnostic services with NestJS

Learn how to implement data source logic in an agnostic way in yours NestJS applications.

Read More

What we do at Trilon .

At Trilon, our goal is to help elevate teams - giving them the push they need to truly succeed in today's ever-changing tech world.

Trilon - Consulting

Consulting .

Let us help take your Application to the next level - planning the next big steps, reviewing architecture, and brainstorming with the team to ensure you achieve your most ambitious goals!

Trilon - Development and Team Augmentation

Development .

Trilon can become part of your development process, making sure that you're building enterprise-grade, scalable applications with best-practices in mind, all while getting things done better and faster!

Trilon - Workshops on NestJS, Node, and other modern JavaScript topics

Workshops .

Have a Trilon team member come to YOU! Get your team up to speed with guided workshops on a huge variety of topics. Modern NodeJS (or NestJS) development, JavaScript frameworks, Reactive Programming, or anything in between! We've got you covered.

Trilon - Open-source contributors

Open-source .

We love open-source because we love giving back to the community! We help maintain & contribute to some of the largest open-source projects, and hope to always share our knowledge with the world!

Explore more

Write us a message .

Let's talk about how Trilon can help your next project get to the next level.

Rather send us an email? Write to:
© 2019-2023 Trilon.