VSCode：如何使用 Chromium 调试本地文件（扩展名：Debugger for Chrome）

Question

My goal is to properly set launch.json file to run some *.html in Chromium.

For example: This is my project folder structure:

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

In the end I'd like to create configurations for both index.html files.

Extension page: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

• Ubuntu 20.04
• VSCodium 1.55.1

It has to be possible to use Chromium instead of Chrome using runtimeExecutable (and some runtimeArgs if needed) in launch.json

So I tried:

{
    "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"
            ]
        }
    ]
}

I tried same without or with some of runtimeArgs . Also tried ${fileWorkspaceFolder} or ${fileFolder} or index.html absolute path instead ${workspaceFolder} .

Still same result - Chromium doesn't even start. No error, nothing. Only some kind of progressbar shortly showed in RUN AND DEBUG window.

I'm out of ideas. Thanks for help!

Answer 1

Note: As of a year after the question was posted, the extension mentioned is deprecated.

You can try starting chromium with remote debugging enabled, then setting the launch.json configuration to attach to the remote debugging port.

Start chromium like this:

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

And your launch.config should look like this:

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

Summarizing VS Code's documentation on this:

To attach to a running browser, it needs to be launched in a special debug mode.

...

Setting the --remote-debugging-port tells the browser to listen on that port for a debug connection. Setting a separate --user-data-dir forces a new instance of the browser to be opened; if this flag isn't given, then the command will open a new window of any running browser and not enter debug mode.

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