Proper debug configuration for VSCode using Parcel and Edge Chromium

Question

It seems that the standard launch configuration options don't work when launching Parcel & Edge Chromium.

With launch mode, the browser opens a new instance of Chromium that loses all of the extension settings, while the attach mode just refuses to load the browser, or results in this error loop:

> parcel serve src/index.html

Debugger attached.
ℹ Server running at http://localhost:1234
@parcel/workers: Cannot find module '"c:/Users/jgent/AppData/Local/Programs/Microsoft'
Require stack:
- internal/preload
Error: Cannot find module '"c:/Users/name/AppData/Local/Programs/Microsoft'      
Require stack:
- internal/preload
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)   
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at Module._preloadModules (internal/modules/cjs/loader.js:1147:12)
    at loadPreloadModules (internal/bootstrap/pre_execution.js:446:5)
    at MessagePort.<anonymous> (internal/main/worker_thread.js:122:5)
    at MessagePort.emit (events.js:314:20)
    at MessagePort.onmessage (internal/worker/io.js:80:8)
    at MessagePort.exports.emitMessage (internal/per_context/messageport.js:11:10)

Here's my current configuration:

launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "command": "npm start",
      "name": "Parcel",
      "request": "launch",
      "type": "node-terminal"
    },
    {
      "type": "edge",
      "request": "launch",
      "version": "canary",
      "name": "Debug",
      "url": "http://localhost:1234",
      "webRoot": "${workspaceFolder}",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "../*": "${webRoot}/*"
      }
    }
  ],
  "compounds": [
    {
      "name": "Parcel/Debug",
      "configurations": ["Debug", "Parcel"]
    }
  ]
}

package.json:

{
"scripts": {
    "start": "parcel serve src/index.html"
  },
}

Does anyone have a working configuration?

score 0 · Answer 1 · answered Mar 16 '21 at 22:53

I was finally able to get this working with this configuration:

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug",
      "type": "pwa-msedge",
      "request": "launch",
      "preLaunchTask": "Parcel",
      "url": "http://localhost:1234",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Parcel",
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "problemMatcher": []
    }
  ]
}

I also uninstalled and reinstalled VSCode, perhaps that helped as well.

Proper debug configuration for VSCode using Parcel and Edge Chromium

1 Answers1