如何在带有 Chrome 调试的 VS Code 中启用文件的可编辑调试？

Question

环境：

• 操作系统：macOS Big Sur 11.5.2 (20G95)
• Chrome：版本 93.0.4577.82（官方版本）(x86_64)
• VSCode：版本：1.60.1 提交：83bd43bc519d15e50c4272c6cf5c1479df196a4d 日期：2021-09-10T17:09:14.403Z（5 天前）Electron: 13441.16.8.Node.13.16.16.16.16.16.16.16.16.16.16.19.16.1.3.8 Electron.0 操作系统：Darwin x64 20.6.0

---

我的行动：

1. { VSCode } 打开包含我的项目目录的工作区。
2. { VSCode } 将以下块添加到“configurations”数组中的“launch.json”：

{
   "type": "pwa-chrome",
   "request": "attach",
   "name": "Attach Chrome Debugging to Browser for VSCode",
   "port": 9222,
   "url": "http://localhost:8888/",
   "urlFilter": "http://localhost:8888/*",
   "webRoot": "${workspaceFolder}"
}

3. { VSCode } 保存“launch.json”
4. { Chrome } 关闭所有正在运行的 Chrome 实例
5. {终端} 导航到根目录 ( / )
6. {终端} 运行命令： /Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --remote-debugging-port=9222 --user-data-dir=remote-debug-profile

结果：

1. { Chrome } 应用程序打开时会弹出一个窗口（不像预期的那样）：
   

---

我的行动：

1. { Chrome } 单击“确定”按钮。

结果：

1. { Chrome } 将打开一个窗口，提示“谁在使用 Chrome？” 可以选择按预期选择我想要的用户配置文件。

---

我的行动：

1. { Chrome } 单击我想要的用户配置文件。

结果：

1. { Chrome } 一个窗口打开，我想要的用户配置文件按预期登录。

---

我的行动：

1. { VSCode } 通过debugger;向我的代码添加断点debugger; 我的 HTML 文件中的语句。
2. { VSCode } 单击“运行”按钮并选择我的调试配置文件。
3. { Chrome } 执行行为以在我的代码中触发断点。

结果：

1. { VSCode } 断点被触发，但是：它是在我的文件的“只读”版本中触发的，在与我的实际文件分开的新选项卡中打开。

---

我想要的结果

使用“附加”我希望能够在 VSCode 中的实际文件内激活断点，而不是“只读”版本。

---

我花了大约两个小时研究这个问题，据我所知，它与以下方面有关：

• 我正在运行终端命令的位置。 我试过：
  • 从项目目录运行它，但是它将大量代码转储到我的项目目录中，并且无法打开一个 Chrome 实例，我可以在其中选择我想要的用户配置文件 - 而不是打开一个用户配置文件不可知的 Chrome 窗口。
• 终端命令中的--user-data-dir=remote-debug-profile行。
• 我在 Launch.JSON 中的配置。 我尝试过以下组合：
  • "type": "chrome"
  • "webRoot": "*/thedirectpathtomyprojectdirectory*"
  • "webRoot": "${workspaceFolder}/src"
  • "userDataDir": "/Library/Application\\ Support/Google/Chrome/Profile 1"
  • "userDataDir": "/Library/Application\\ Support/Google/Chrome"
  • "sourceMapPathOverrides": {"webpack://?:*/*": "${workspaceFolder}/*"}
  • "sourceMaps": true

我完全不知所措！

Answer 1

问题在于--user-data-dir=remote-debug-profile

见这里 - https://chromium.googlesource.com/chromium/src/+/HEAD/docs/user_data_dir.md

您需要提供实际的目录路径。

1. 将您当前的用户数据文件夹复制到您的自定义目录

2. 使用 --user-data-dir 参数将 chrome 快捷方式指向自定义目录