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