【vscode】前端调试

调试原理

• 通信协议 Chrome DevTools Protocol (CDP)
  • 通过通信协议传输调试数据
• 调试后端
  • Chrome 浏览器内置了 CDP 服务端功能
  • 当 Chrome 以调试模式启动时，会自动开启 CDP 服务端
• 调试前端
  • vscode debugger
  • chrome devtools

chrome 调试模式

"xx/chrome.exe" --remote-debugging-port=9222 --user-data-dir="C:\temp\chrome-debug"

• remote-debugging-port
  • 远程调试端口
  • 默认不开启
  • 开启调试端口才开启远程调试服务
• user-data-dir
  • 用户数据目录
  • 存放浏览记录、cookies、插件、书签等信息
  • 用户数据目录只能被一个 Chrome 实例

调试配置文件 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"
  • 在 Chrome 实例手动运行要调试的网页
  • VSCode 启动调试器，通过配置中的 port 端口与 Chrome 通信，实现调试功能

调试 vue/react

• 启动开发服务器
• 添加调试配置
  • 新建文件 .vscode/launch.json
  • 添加配置 chrome:launch
  • 修改 url 为开发服务器地址，ex.http://localhost:5173/
• F5 启动调试器