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

Question

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

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

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

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

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

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

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

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

Answer 1

来自readme

If Code can't find the target, you can always verify that it is actually available by navigating to http://localhost:< port >/json in a browser. If you get a response with a bunch of JSON, and can find your target page in that JSON, then the target should be available to this extension.

我猜你遇到了 Cannot GET /json 但我不知道如何解决。

Answer 2

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

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

Answer 3

我在 angular-cli 下使用 launch.json

{

    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200/", //your application running with ng serve
            "sourceMaps": true,
            "diagnosticLogging": true,
            "runtimeArgs": [
                "--new-window", //Open in new window
                "--user-data-dir=remote-profile",
                "--remote-debugging-port=9222" //Open in port 9222 (standard chrome debug port)
            ],
            "webRoot": "${workspaceRoot}/src/"
        },
        {
            "name": "Attach with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}/src/"
        }
    ]
}

Answer 4

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://www.xgqfrms.xyz/HTML5/Web-Front-End-Job-Interviews/absolutely-center/01.html",
            "sourceMaps": true,
            "webRoot": "${wwwroot}"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${wwwroot}"
        }
    ]
}

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

Visual Studio Code Chrome Debugger Extension - [webkit-debug-adapter] Got response from target app, but no valid target pages found

remote-debugging

angularjs

typescript

visual-studio-code