打断点
VSCode 打断点
以
VSCode
IDE 、js
代码、谷歌浏览器 为例。
1、安装插件 Debugger for Chrome
2、运行→启动调试 (或 F5 快捷键)
3、选择环境 Chrome
示意图1:
或示意图2:
4、此时会出现 launch.json
配置文件
配置文件的内容如下:
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
5、鼠标单击行数左侧打断点
6、全局安装 http-server
安装命令:
npm i http-server -g
7、运行http-server
8、再次 运行→启动调试 (或 F5 快捷键)即可拦截断点处
在代码中打断点
在需要打断点的代码处手动写入 debugger
运行到浏览器中,触发相关事件时,调试窗口就会跳转到 source 页面,点击图中用红框圈出的按钮,你就可以在 debugger 暂停的地方,逐行执行代码