VSCode：如何使用 Chromium 調試本地文件（擴展名：Debugger for Chrome）

Question

我的目標是正確設置launch.json文件以在 Chromium 中運行一些 *.html。

例如：這是我的項目文件夾結構：

project/
├─ some_folder/
│  ├─ index.html
│  ├─ script.js
├─ index.html
├─ script.js

最后，我想為兩個index.html文件創建配置。

擴展頁面： https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

• Ubuntu 20.04
• VSCodium 1.55.1

必須可以在launch.json中使用runtimeExecutable （以及一些runtimeArgs ，如果需要）使用 Chromium 而不是 Chrome

所以我嘗試了：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceFolder}/index.html",
            "runtimeExecutable": "/usr/bin/chromium-browser",
            "runtimeArgs": [
              "--new-window",
              "--user-data-dir=\"/${workspaceFolder}/DevProfile\"",
              "--remote-debugging-port=9222",
              "--disable-background-networking"
            ]
        }
    ]
}

我在不使用或使用某些runtimeArgs的情況下進行了相同的嘗試。 還嘗試${fileWorkspaceFolder}或${fileFolder}或index.html絕對路徑而不是${workspaceFolder} 。

仍然是同樣的結果——Chromium 甚至沒有啟動。 沒有錯誤，什么都沒有。 只有某種進度條在RUN AND DEBUG window 中短暫顯示。

我沒主意了。 感謝幫助！

Answer 1

注意：問題發布一年后，提到的擴展名已棄用。

您可以嘗試在啟用遠程調試的情況下啟動 Chromium，然后設置 launch.json 配置以附加到遠程調試端口。

像這樣啟動鉻：

/usr/bin/chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-debug-profile

你的 launch.config 應該是這樣的：

{
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "attach",
      "name": "Attach to browser",
      "port": 9222
    }
  ]
}

總結 VS Code 的相關文檔：

要附加到正在運行的瀏覽器，需要以特殊的調試模式啟動它。

...

設置--remote-debugging-port告訴瀏覽器在該端口上偵聽調試連接。 設置單獨的--user-data-dir會強制打開瀏覽器的新實例； 如果未給出此標志，則該命令將打開任何正在運行的瀏覽器的新 window 並且不進入調試模式。

來源： https://code.visualstudio.com/docs/nodejs/browser-debugging#_attaching-to-browsers