2

我正在使用此处找到的模板启动器项目 ( 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 错误消息说：

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).

4

1 回答 1

2

webRootStencil 应用程序的${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 自动中断。

于 2018-11-29T14:37:58.850 回答