Need visual studio code configuration for debugging stencil

Question

I'm using the stencil starter project found here (https://github.com/ionic-team/stencil-component-starter) and I would like to debug the code in visual studio code. I tried the following configurations but neither of them work

"configurations": [
 {
  "type": "chrome",
  "request": "attach",
  "name": "Attach to Chrome",
  "port": 3333,
  "webRoot": "${workspaceFolder}"
 },
 {
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome against localhost",
  "url": "http://localhost:3333",
  "sourceMaps": true,
  "webRoot": "${workspaceFolder}"
 }
]

The launch version does successfully launch chrome and display the running stencil project, but all the breakpoints in visual studio code say they are 'unverified' thus execution doesn't stop at them. The attached version doesn't work, it gives me a 404 error message saying:

Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: 404 File Not Found Url: /json File: C:/work/projectA/www/json).

Answer 1

The webRoot for a Stencil app should be ${workspaceFolder}/www. That should fix the launch configuration.

To attach you have to set port to the Chrome debugging port which you have to set with a flag. Source: https://github.com/Microsoft/vscode-chrome-debug#attach

But since Stencil does not generate source maps yet you will only be able to debug the compiled code. Source: https://github.com/ionic-team/stencil/issues/219

My method for finding the correct generated file is to just add a debugger; statement so that VS Code will automatically break.