如何在帶有 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 快捷方式指向自定義目錄