javascript - 如何在带有 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 天前）电子：13.1.8 Chrome：91.0.4472.164 Node.js：14.169.3 V89.12。 electron.0 操作系统：达尔文 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. { VSCodedebugger; } 通过我的 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

我完全失去了！

标签： javascriptmacosgoogle-chromedebuggingvisual-studio-code

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 快捷方式指向自定义目录