调试模板需要 visual studio 代码配置

Question

我正在使用此处找到的模板启动项目 (https://github.com/ionic-team/stencil-component-starter)，我想调试 visual studio 代码中的代码。我尝试了以下配置，但它们都不起作用

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

启动版本确实成功启动了 chrome 并显示了运行模板项目，但是 visual studio 代码中的所有断点都说它们是 'unverified' 因此执行没有不要停留在他们身上。附加版本不起作用，它给了我一条 404 错误消息：

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

Stencil 应用的 webRoot 应该是 ${workspaceFolder}/www。那应该修复 launch 配置。

要附加，您必须将 port 设置为 Chrome 调试端口，您必须使用标志设置该端口。资料来源：https://github.com/Microsoft/vscode-chrome-debug#attach

但由于 Stencil 不生成源映射，您将只能调试编译后的代码。资料来源：https://github.com/ionic-team/stencil/issues/219

我找到正确生成文件的方法是添加一个 debugger; 语句，这样 VS Code 就会自动中断。

Answer 2

Stenci.js 现在有 Sourcemap：https://stenciljs.com/docs/config#sourcemap 这意味着您可以直接在 Typescript 文件中进行调试

调试模板需要 visual studio 代码配置

Need visual studio code configuration for debugging stencil

debugging

visual-studio-code

stenciljs