Question

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

今天我从Visual Studio Marketplace安装了适用于Chrome的Debugger。 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

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

 35to40     0to35   
NULL    asdasd
dhara   NULL
NULL    g
ravi    NULL
sonam   NULL

Answer 2

我使用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 3

来自readme

如果代码无法找到目标，您可以通过导航到http://localhost来验证它是否实际可用：＆lt;浏览器中的端口＆gt; / json。如果您获得了一堆JSON的响应，并且可以在该JSON中找到您的目标页面，那么此扩展可以使用该目标。

我猜你得到的是Cannot GET /json，但如何解决这个问题我不知道。

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]从目标应用程序获得响应，但未找到有效的目标页面

4 个答案: