How does vscode debug code

This article mainly introduces how to debug the code in vscode, which can be used for reference by friends who need it. I hope you will learn a lot after reading this article. Next, let the editor take you to learn about it.

First install the extension debug plug-in debugger for chrome

Click the ladybug button to configure the debugging project, and click the configuration button

Select Chrome environment

Chrome debug configuration file launch.json will pop up, and you can modify the next port.

If no lauch.json configuration file is generated, you can also open the configuration file in the following ways. Select add configuration

Then select Chrome:Launch and modify the port.

Open the project and enter ng serve to start the project through ctrl+ `[note that` is on the Tab key]

Switch to the ladybug interface, for example, we set a breakpoint in app.component.ts

Launch the debug button, which automatically pops up the browser page

After refreshing the page, you will find that the program is running to the breakpoint location.

We can debug variables, catch exceptions, call stacks, and so on.

Thank you for reading this article carefully. I hope it is helpful for everyone to share how vscode debugs the code content. At the same time, I also hope you can support us, pay attention to the industry information channel, and find out if you encounter problems. Detailed solutions are waiting for you to learn!