debugging - 需要 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 代码中的所有断点都表示它们“未经验证”，因此执行不会在它们处停止。附加的版本不起作用，它给了我一个 404 错误消息:

无法连接到运行时进程，10000 毫秒后超时 - (原因:无法连接到目标:404 文件未找到 网址:/json 文件: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 就会自动中断。