angularjs - Visual Studio Code Chrome 调试器扩展 - [webkit-debug-adapter] 得到了目标应用程序的响应，但未找到有效的目标页面

Question

我有一个 Angular/TypeScript 应用程序。我可以在 Chrome 中调试 TypeScript，因为我使用 map 文件。

今天我从 Visual Studio Marketplace 安装了 Debugger for Chrome。 https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome

理论上我应该能够在 vscode 中设置断点，但是当我运行调试器时我总是收到这个错误:

[webkit-debug-adapter] 得到了目标应用的响应，但没有找到有效的目标页面

这是因为我不知道如何正确设置它。

我的应用程序使用 Grunt 在端口 9000 上运行。这是调试器配置文件:

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Attach",
        "type": "chrome",
        "request": "attach",
        "port": 9000,
        "webRoot": "./app/scripts"
    }
  ]
}

有人知道如何附加调试器吗？

Answer 1

我设法让这个工作自己。对于遇到此问题的任何其他人，这里是配置文件。

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:9000/",//Change to whatever you homepage is
        "runtimeArgs": [
            "--new-window", //Open in new window
            "--user-data-dir=C:/dev/", //Can be any directory. Makes chrome load in a different directory so that it opens in a new instance.
            "--remote-debugging-port=9222" //Open in port 9222 (standard chrome debug port)
        ],
        "webRoot": "src/app/", //The directory that contains js, ts and map files
        "sourceMaps": true
    }
  ]
}