使用 Visual Studio Code 調試 Chrome 擴展

Question

有誰知道是否可以使用 Visual Studio Code 調試 Chrome 擴展？ 我讀過的所有例子都涉及一個帶有 url 的真實網頁。

Answer 1

對於那些仍在尋找答案的人（如我，早些時候），我已經找到了真正的解決方案，這就是它。 這假設您已經安裝了Debugger for Chrome 。

不像 Firefox 那樣擁有本地配置支持，您需要在運行 Chrome 之前提供加載擴展的參數，特別是load-extension參數。

在.vscode/launch.json文件中使用啟動請求在 Chrome 配置對象中添加此行。 這假定您的manifest.json文件直接位於工作區文件夾中。 如果您的manifest.json文件位於另一個文件夾中，請相應地更改${workspaceFolder} 。

{
    "runtimeArgs": ["--load-extension=${workspaceFolder}"]
}

例如，這就是我在工作區中的launch.json文件上執行此操作的方式。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "https://example.com/#this-could-be-anything",
            // Here it is!
            "runtimeArgs": ["--load-extension=${workspaceFolder}"]
        },
        { 
            // Firefox equivalent
            "type": "firefox",
            "request": "launch",
            "name": "Launch Firefox",
            "url": "https://example.com/#this-could-be-anything",
            "addonPath": "${workspaceFolder}"
        }
    ]
}

Answer 2

您可以使用attach選項調試在網頁上運行的擴展代碼。

{
    "type": "chrome",
    "request": "attach",
    "name": "Chrome Extension debugging",
    "port": 9222,
    "url": "<URL>",
    "webRoot": "${workspaceFolder}/extension"
}

請記住在調試模式下啟動 Chrome 之前關閉所有打開的 Chrome 實例：

.\chrome.exe --remote-debugging-port=9222

可以在此處找到更多信息： GitHub 上的 vscode-chrome-debug

Answer 3

不幸的是，目前只能使用 Chrome DevTool 調試 Google Chrome 擴展。 ... -> 更多工具 -> 擴展 -> 你的擴展 -> Inspect views background page

關於vscode-chrome-debug ：

支持的功能

• 設置斷點，包括在啟用源映射時在源文件中
• 步進，包括 Chrome 頁面上的按鈕
• 本地面板
• 調試 eval 腳本、腳本標簽和動態添加的腳本
• 手表
• 安慰

不支持的場景

• 調試網絡工作者
• 調試 Chrome 擴展
• 任何不是腳本調試的功能

Answer 4

是的，它有效，可以調試擴展...

使用Chrome 擴展調試器..

首先確保您已關閉所有 chrome 窗口...並配置如下所示的“附加”調試選項...

  {
     "type": "chrome",
     "request": "attach",
     "name": "Attach to Chrome",
     "port": 9222,
     "webRoot": "${workspaceFolder}/src", <-- path to the root of the extension
     "url": "https://calendar.google.com/calendar/r" <-- Replace with the url (public or private) on which you want to debug your extension ...
      // IMPORTANT this url must exactly match the one in the address bar of the browser ..
  }

然后使用以下命令打開 chrome：

google-chrome --remote-debugging-port=9222

...然后導航到您要調試擴展程序的網址...

...最后，只有那時...在 vscode 上開始調試會話...