Cursor(vscode) debug for Chrome

远方的小草
0 阅读2分钟

本篇文章的内容为如何使用 cursor 调试，通过 xswitch 线上代理的项目。

背景

我们在平时调试的时候，大多数情况下只是在 Chrome 浏览器自带的调试工具下调试，cursor 里也有调试功能，如何用 cursor 去调试我们的代码呢？

用 cursor 调试的好处？遇到一些问题，我们可以直接修改源代码进行调试，而不是在 chrome 控制台进行调试。

接下来我们一起看下如何使用 cursor 和 chrome 进行连接调试。

前置知识

  • sourceMap 的映射
  • 基础的调试配置

✍️ Cursor 配置

具体配置大家可以通过 AI 和自己实操来进行查看学习。

在项目根目录下创建 .vscode/launch.json：

{
  // 指定 launch.json 配置文件的版本号
  "version": "0.2.0",
  // 包含所有调试配置的数组
  "configurations": [
    {
      // 调试配置的显示名称，会在 VS Code 调试面板的下拉菜单中显示
      "name": "Debug: Chrome (XSwitch)",
      // 表示使用 Chrome 浏览器的调试器
      "type": "pwa-chrome",
      // 调试请求类型，"attach" 表示附加到已运行的进程，而不是启动新进程
      "request": "attach",
      // 指定要附加到的进程的端口号
      "port": 9222,
      // 指定 Web 应用的根目录
      "webRoot": "${workspaceFolder}",
      // 指定源代码映射的路径覆盖规则
      "sourceMapPathOverrides": {
        "webpack://rms-prod-front-alarm-/src/*": "${workspaceFolder}/src/*",
        "webpack://rms-prod-front-alarm-/*": "${workspaceFolder}/*"
      },
      // 启用智能步进功能
      "smartStep": true,
      // 指定跳过哪些文件的调试
      "skipFiles": [
        "<node_internals>/**",
        "${workspaceFolder}/node_modules/**",
        "${workspaceFolder}/.umi/**"
      ]
    }
  ]
}

⛷ 浏览器配置

remote-debugging-port

浏览器需要开启一个临时的调试服务器来供 chrome 和 vscode 进行通信。

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

我们可以通过 --remote-debugging-port 为 9222 来指定。

userDataDir

远程调试需要指定 userDataDir 参数。

userDataDir 是保存用户数据的地方，比如你的浏览记录、cookies、插件的数据等等。

我们指定 userDataDir 为 false 打开浏览器看看效果：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=false

image.png

可以看到打开了一个新的浏览器，这个浏览器没有任何数据。

image.png 我们在启动的时候加了个调试服务器，输入 localhost:9222/json，这里的调试服务器会出现各页面的临时 websocket 服务器信息。

Chrome 136 版本后的变化

在 Chrome 136 版本之前，我们可以使用默认的保存数据的地方进行调试，这样打开浏览器之后就有我们之前配置的数据了。

但是在 136 之后，chrome 要求我们打开调试服务器的时候必须要指定一个新的 userDataDir，为了保护我们的数据安全。

参考：developer.chrome.com/blog/remote…

解决方案：复制浏览器缓存目录

那我们要通过 cursor 调试我们的项目，是必须要使用之前的数据的，比如 xswitch、登录信息等等。

我们可以把浏览器缓存的位置复制一份作为一个新的用户目录。

把缓存的文件复制到 /Users/admin/Desktop/chromeStorage2，然后执行以下命令启动浏览器：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/Users/admin/Desktop/chromeStorage2

关闭 Chrome 浏览器，执行这个命令，启动浏览器。

image.png

image.png 可以看到浏览器的代理服务器已经正确运行，而且也能正常加载我们的本地缓存数据（xswitch 配置、登录信息等）。

😼 打通 Cursor 与 Chrome

万事俱备，接下来我们就要打通 cursor 与 chrome 的调试了。

前提条件

⚠️ 前提！！！代理的情况下必须保证 sourceMap 有正确映射加载。

确保 console.log 映射的是本地的源文件（如 useProtableProps.tsx:76），而不是编译后的代码。

image.png

sourceMapPathOverrides 配置说明

"sourceMapPathOverrides": {
  "webpack://rms-prod-front-alarm-/src/*": "${workspaceFolder}/src/*",
  "webpack://rms-prod-front-alarm-/*": "${workspaceFolder}/*"
}

这里的 webpack://rms-prod-front-alarm-/src/* 对应的就是当前文件的 webpack 路径。

这里一定要设置好，不然断点就不能正确映射本地文件。

image.png

image.png

如何查看 webpack 路径？在 Chrome DevTools 的 Sources 面板中，找到对应文件，查看其路径前缀即可。

启动调试

  1. 在 cursor 的调试面板选择 Debug: Chrome (XSwitch) 配置

image.png 3. 点击运行（F5）开始调试

  1. 在代码里打上断点
  2. 在浏览器中触发对应操作（如点击查询按钮）

cursor 里就会发现已经代理调试成功了，断点命中，可以看到完整的变量信息和调用堆栈。

image.png

总结

至此我们就做到了在 cursor 里调试代码了！

整体流程：

复制 Chrome 用户数据目录
    ↓
以 --remote-debugging-port=9222 启动 Chrome
    ↓
配置 .vscode/launch.json（注意 sourceMapPathOverrides）
    ↓
确保 devtool 使用 eval-cheap-module-source-map
    ↓
Cursor 附加调试 → 打断点 → 触发操作 → 调试成功 ✅
avatar
文章
阅读
粉丝