debugger for chrome
调试代码
-
安装debugger for chrome插件
-
按f5开启debugger,这个时候会弹出框,让选择(我选择的是
chrome
)
-
选择之后会弹出一个lanch.json配置文件
其中
name
就是你这个调试的程序的一个名字,可以随便取
url
就是你这个程序启动运行起来的ip+port
(比如:http:// 10.25.7.78:8080)
修改其中的name和url
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch to Chrome",
"url": "http://10.25.7.78:8080",
"webRoot": "${workspaceFolder}"
}
]
}
- npm start启动项目,然后f5或者点击
vscode
左边小三角---->选择你配置的name
(我这里是Launch to Chrome
)的launch.json
文件,在点击上面的绿色三角,就会自动打开浏览器,并且进入段点
- 开始调式
我们在第4步,运行起来项目之后,会在vscode
里面看到上面这些按钮,下面我们分别讲一下这些按钮在调试过程中的作用:
按钮1:
点击按钮1的时候,程序会在我们的断点之间来回跳动运行,比如上面第4步中我们打了3个断点,分别在第8行,15行,23行,这时候如果我们只按按钮1,这个时候程序走的位置是23—>8---->15---->(循环一完成)23—>8---->15---->(循环二完成)23—>8---->15…
按钮2:
点击按钮2的时候,这个时候程序走的位置是23—>24---->15---->16—>17---->8---->10—>11---->18---->19---->20----->25---->(循环一完成)23—>24---->15---->16—>17---->8---->10—>11---->18---->19---->20----->25------>(循环二完成)23…
按钮3:
点击按钮3的时候,程序会逐行代码跳动运行,比如上面第4步中我们打了3个断点,分别在第8行,15行,23行,这时候如果我们只按按钮3,这个时候程序走的位置是23—>24---->14---->15---->16—>17---->6----->8---->10—>11---->18---->19---->20----->25---->(循环一完成)23—>24---->14---->15---->16—>17---->6----->8…
按钮4:
按钮5:
按钮5是关闭断点调试