Visual Studio代码Chrome调试器扩展 - [webkit-debug-adapter]从目标应用程序获得响应,但未找到有效的目标页面

Question

我有一个Angular/TypeScript应用程序.我可以在Chrome中调试TypeScript,因为我使用的是地图文件.

今天我从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
    }
  ]
}