Debug Angular CLI applications in VSCode using Browser Preview
Hello, Habr! At Iponweb, we not only do magic with Kubernetes , but also create sophisticated user interfaces. The main framework that we use is Angular (as well as AngularJs for legacy parts), so the convenience of development for us is not an empty phrase. We decided to translate an article by Mark Pieszak, which is designed to increase the convenience of debugging JS-code.
Kenneth Auchnberg, the program manager for the VSCode team, has recently released an extension that allows you to run and debug any JS application right in the VSCode IDE!
In this post, we’ll talk about things related to the Angular CLI, but keep in mind that you can use any other framework (or do without it at all) and still use the Browser Preview!
For demonstration, we suggest creating an application through the Angular CLI from scratch. However, if you already have an Angular application, you can skip this section and use the Browser Preview.
You now have a clean installation of Angular. Let's make sure that the necessary extensions for VSCode are installed.
Go to the extension store and download Browser Preview and Debugger for Chrome , if you haven’t already installed it.
In the left pane, select the Debug tab and add a new configuration for the Browser Preview plugin .
This action will create a simple Launch.json configuration , but in order for it to work with the Angular application, you need to make a couple of changes.
As you can see, the URL http: // localhost: 3000 is used by default, but since the Angular CLI runs on port 4200 , the URL needs to be fixed on localhost : 4200.
In addition, in VSCode, you must specify where the root folder ( webRoot ) of your application is located. In the case of Angult, the CLI is $ {workspaceFolder} .
To start, only these two settings must be completed.
Launch Browser Preview
Launch your Angular application using the npm start or ng serve commands, then open the Debug tab in VSCode. Make sure that the “Browser Preview: Launch” configuration that you created is selected in the debug sidebar , and click “Start Debugging” (or F5 ).
To the right of the code window, a window appears with your Angular application.
Now that all the presets have been completed, check the debugging process.
Add a button and a click event interceptor on it to the app.component.html template.
Set a breakpoint inside the testDebugging () method.
When the preview window reloads, click on the “Click Me” button in it and look at the magic that is happening.
And so, you did it! After clicking on the “Click Me” button, Browser Preview will fix the breakpoint.
We hope this article helps you develop your application.
Angular Demo Repo
VSCode Browser Preview Repo
Original article
Kenneth Auchnberg, the program manager for the VSCode team, has recently released an extension that allows you to run and debug any JS application right in the VSCode IDE!
In this post, we’ll talk about things related to the Angular CLI, but keep in mind that you can use any other framework (or do without it at all) and still use the Browser Preview!
Customization
For demonstration, we suggest creating an application through the Angular CLI from scratch. However, if you already have an Angular application, you can skip this section and use the Browser Preview.
# let's get the latest CLI just incase :)
npm i -g @angular/cli
ng new angularcli-vscode-debug
cd angularcli-vscode-debug && code . You now have a clean installation of Angular. Let's make sure that the necessary extensions for VSCode are installed.
Install Extensions for VSCode from the App Store
Go to the extension store and download Browser Preview and Debugger for Chrome , if you haven’t already installed it.
VSCode Launch.json Configuration
In the left pane, select the Debug tab and add a new configuration for the Browser Preview plugin .
This action will create a simple Launch.json configuration , but in order for it to work with the Angular application, you need to make a couple of changes.
As you can see, the URL http: // localhost: 3000 is used by default, but since the Angular CLI runs on port 4200 , the URL needs to be fixed on localhost : 4200.
In addition, in VSCode, you must specify where the root folder ( webRoot ) of your application is located. In the case of Angult, the CLI is $ {workspaceFolder} .
To start, only these two settings must be completed.
Launch Browser Preview
Before you start debugging in VSCode using Browser Preview, make sure that you have already launched the Angular application from the terminal.
Launch your Angular application using the npm start or ng serve commands, then open the Debug tab in VSCode. Make sure that the “Browser Preview: Launch” configuration that you created is selected in the debug sidebar , and click “Start Debugging” (or F5 ).
To the right of the code window, a window appears with your Angular application.
Debugging with Browser Preview
Now that all the presets have been completed, check the debugging process.
Add a button and a click event interceptor on it to the app.component.html template.
<b>app.component.html</b>
<button (click)="testDebugging()">Click Me!</button>
<b>app.component.ts</b>
testDebugging() {
this.title = 'browser preview works!!'; // set a breakpoint here
}
Since the Angular CLI manages rebuilding, any changes you make to the project, when saved, will automatically cause the preview to reload.
Set a breakpoint inside the testDebugging () method.
When the preview window reloads, click on the “Click Me” button in it and look at the magic that is happening.
And so, you did it! After clicking on the “Click Me” button, Browser Preview will fix the breakpoint.
We hope this article helps you develop your application.
Links and demo
Angular Demo Repo
VSCode Browser Preview Repo
Original article