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 暂停的地方，逐行执行代码