调试原理
- 调试后端
- Chrome 浏览器内置了 CDP 服务端功能
- 当 Chrome 以调试模式启动时，会自动开启 CDP 服务端
- 调试前端
- vscode debugger
- chrome devtools
- 通信协议 Chrome DevTools Protocol (CDP)
调试配置文件 launch.json
{
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
- name
- 调试配置的名称
- 会在 VS Code 调试面板中显示
- port
- 指定调试器要连接的 Chrome 远程调试端口
- launch 模式下 port 通常是自动设置的，无需配置
- attach 模式必须指定这个端口，因为需要连接到以 --remote-debugging-port=xxxx 启动的 Chrome
- request
- type
- 指定调试器类型
- VSCode 会使用指定调试器扩展
- Debugger for Chrome/Debugger for Firefox
- webRoot
- 指定源代码的根目录
${workspaceFolder}：VS Code 变量，指向当前工作区根目录
- url
- 要调试的网页地址
- 在 attach 模式下通常是无效的
- userDataDir
- 默认是 true，代表创建一个临时目录来保存用户数据
- false：使用默认 userDataDir 来启动 chrome
request
- launch
- VSCode 在 launch 模式下会自动启动一个新的 Chrome 实例
- Chrome 实例的调试端口由 VSCode 默认设置
- Chrome 实例会自动打开 launch.json 配置的 url 网页
- VSCode 启动调试器，通过该端口与 Chrome 通信，实现调试功能
- attach
- 需要手动启动带调试端口的 Chrome 实例
"xx/chrome.exe" --remote-debugging-port=9222 --user-data-dir="C:\temp\chrome-debug"- remote-debugging-port
- 远程调试端口
- 默认不开启
- 开启调试端口才开启远程调试服务
- user-data-dir
- 用户数据目录
- 存放浏览记录、cookies、插件、书签等信息
- 用户数据目录只能被一个 Chrome 实例独占使用
- 在 Chrome 实例手动运行要调试的网页
- VSCode 启动调试器，通过配置中的 port 端口与 Chrome 通信，实现调试功能
调试 vue/react
