调试Angular w / VS Code

时间：2017-04-28 14:31:06

标签： angular google-chrome visual-studio-code angular-cli vscode-settings

我似乎在使用Visual Studio Code调试Angular应用程序时遇到问题。任何指导将不胜感激。

我正在使用Visual Studio Code 1.11.2并使用Angular CLI生成一个新项目：

ng new my-app
cd my-app
ng serve -o

在VS Code中，我运行了Extensions：Install Extension命令并安装了适用于Chrome 3.0.1版的Debugger。这是我生成的默认launch.json：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.vscode/chrome"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 4200,
            "sourceMaps": true,
            "diagnosticLogging": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

运行调试似乎会抛出错误。这是日志的输出：

    Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: <!DOCTYPE html>

OS: win32 ia32
Adapter node: v6.5.0 ia32
vscode-chrome-debug-core: 3.14.17
10:24:18 AM, 4/28/2017
debugger-for-chrome: 3.0.1
From client: initialize({"clientID":"vscode","adapterID":"chrome","pathFormat":"path","linesStartAt1":true,"columnsStartAt1":true,"supportsVariableType":true,"supportsVariablePaging":true,"supportsRunInTerminalRequest":true})
To client: {"seq":0,"type":"response","request_seq":1,"command":"initialize","success":true,"body":{"exceptionBreakpointFilters":[{"label":"All Exceptions","filter":"all","default":false},{"label":"Uncaught Exceptions","filter":"uncaught","default":true}],"supportsConfigurationDoneRequest":true,"supportsSetVariable":true,"supportsConditionalBreakpoints":true,"supportsCompletionsRequest":true,"supportsHitConditionalBreakpoints":true,"supportsRestartFrame":true,"supportsExceptionInfoRequest":true,"supportsRestartRequest":true}}
From client: attach({"name":"Attach to Chrome, with sourcemaps","type":"chrome","request":"attach","port":4200,"sourceMaps":true,"diagnosticLogging":true,"webRoot":"c:\\Users\\meppielmr\\Desktop\\Training"})
To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"debugStarted","data":{"request":"attach","args":["name","type","request","port","sourceMaps","diagnosticLogging","webRoot","sourceMapPathOverrides","skipFileRegExps"]}}}
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
Discovering targets via http://127.0.0.1:4200/json
HTTP GET failed with: 404 Not Found
To client: {"seq":0,"type":"response","request_seq":2,"command":"attach","success":false,"message":"Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot GET /json</pre>\n</body>\n</html>).","body":{"error":{"id":2010,"format":"Cannot connect to runtime process, timeout after {_timeout} ms - (reason: {_error}).","variables":{"_error":"Cannot connect to the target: <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot GET /json</pre>\n</body>\n</html>","_timeout":"10000"}}}}
From client: disconnect({"restart":false})
Terminated: Got disconnect request
To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"debugStopped","data":{"reason":"Got disconnect request"}}}
To client: {"seq":0,"type":"event","event":"terminated"}
To client: {"seq":0,"type":"response","request_seq":3,"command":"disconnect","success":true}

我从哪里开始？提前感谢所有的帮助。

2 个答案:

答案 0 :(得分：1)

不要将ng serve与-o一起使用，它会打开一个未附加的默认浏览器实例。

只需执行ng serve并转到VS代码中的调试菜单，然后点击播放图标，它将打开一个chrome实例，你应该可以点击断点。

希望这会有所帮助!!

答案 1 :(得分：1)

我今天发现了它，效果很好！

https://github.com/microsoft/vscode-recipes/tree/487f38ea801100d80fdc5ddf257d9f9b1d621c72/Angular-CLI

launch.json看起来像这样：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    },
    {
      "name": "ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
    }
  ]
}

然后它们还包含一个task.json文件：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": [
          "relative",
          "${cwd}"
        ],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    },
  ]
}

我所做的唯一更改是将其切换为https

有大量的vs代码食谱here

相关问题
最新问题