![How to debug code with vscode](/static/imghw/default1.png)
First install the extended debugging plug-indebugger for chrome
![1576142961636418.png How to debug code with vscode](/static/imghw/default1.png)
Click the ladybug button to debug the project Configuration, click the configuration button
![1576142991906802.png How to debug code with vscode](/static/imghw/default1.png)
Select the Chrome environment
![1576143040288784.png How to debug code with vscode](/static/imghw/default1.png)
##The Chrome debugging configuration file launch.json will pop up, modify it The port can be
![1576143058480690.png How to debug code with vscode](/static/imghw/default1.png)
#If there is no lauch.json configuration file generated, you can also open the configuration file in the following way. Select Add Configuration
![1576143075248142.png How to debug code with vscode](/static/imghw/default1.png)
Then select Chrome: Launch and modify the port
![1576143092680598.png How to debug code with vscode](/static/imghw/default1.png)
Open the project and use ctrl ` [Note that the ` is on the Tab key] Enter ng serve to start the project
![1576143109852501.png How to debug code with vscode](/static/imghw/default1.png)
to switch to the ladybug interface. For example, we set a break in app.component.ts Click
![1576143130494377.png How to debug code with vscode](/static/imghw/default1.png)
to start the debugging button, and the browser page will automatically pop up
![1576143207513690.png How to debug code with vscode](/static/imghw/default1.png)
After refreshing the page, you will find that the program is running At the breakpoint location
![1576143227526306.png How to debug code with vscode](/static/imghw/default1.png)
# we can view variables, capture exceptions, call stacks and other debugging.
Recommended related articles and tutorials:
vscode tutorial
The above is the detailed content of How to debug code with vscode. For more information, please follow other related articles on the PHP Chinese website!