![How to debug code with vscode](https://img.php.cn/upload/article/000/000/041/5df2083d6c488612.jpg)
First install the extended debugging plug-indebugger for chrome
![1576142961636418.png How to debug code with vscode](https://img.php.cn/upload/image/486/654/569/1576142961636418.png)
Click the ladybug button to debug the project Configuration, click the configuration button
![1576142991906802.png How to debug code with vscode](https://img.php.cn/upload/image/137/729/623/1576142991906802.png)
Select the Chrome environment
![1576143040288784.png How to debug code with vscode](https://img.php.cn/upload/image/870/722/459/1576143040288784.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](https://img.php.cn/upload/image/747/205/791/1576143058480690.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](https://img.php.cn/upload/image/717/740/799/1576143075248142.png)
Then select Chrome: Launch and modify the port
![1576143092680598.png How to debug code with vscode](https://img.php.cn/upload/image/240/961/288/1576143092680598.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](https://img.php.cn/upload/image/934/532/464/1576143109852501.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](https://img.php.cn/upload/image/578/499/728/1576143130494377.png)
to start the debugging button, and the browser page will automatically pop up
![1576143207513690.png How to debug code with vscode](https://img.php.cn/upload/image/884/211/712/1576143207513690.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](https://img.php.cn/upload/image/248/260/671/1576143227526306.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!
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn