使用Visual Studio代码进行调试无效

Question

我希望能够使用Visual Studio Code调试Angular2应用程序.

这是我的环境:

• 操作系统:Ubuntu 16.10 x64
• 浏览器:Chromium 53.0.2785.143
• 节点:6.8.0
• Angular-cli:1.0.0-beta.19-3

使用angular-cli创建一个新项目:

ng new test-VSC-debug
cd test-VSC-debug

然后我打开VSC并加载项目: File/open folder

我点击debug的标志,我configure launch.json的选择chrome.它生成以下文件:

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

然后我通过运行启动angular2项目:

ng serve

一旦启动,我在VSC中选择:"针对localhost启动Chrome,使用源映射".

然后,我收到以下错误:
"找不到chrome:在启动配置中安装或设置runtimeExecutable字段."

所以我设置:
"runtimeExecutable":"chromium-browser"
(因为我的Ubuntu上没有 chrome但是chrome).

用于启动应用程序的Angular-cli默认端口是4200.将URL从" http:// localhost:8080 "更改为" http:// localhost:4200 ".

现在浏览器正在打开应用程序,但VSC有以下错误:"无法连接到运行时进程,10000毫秒后超时 - (原因:无法连接到目标:连接ECONREFUSED 127.0.0.1:9222".

从stackoverflow/github问题上找到的其他答案,我已经读过,在尝试这样做之前我可能必须杀死所有的chrome实例,所以我只是关闭chrome并运行killall chromium-browser.

我尝试再次运行调试:与以前相同的错误(无法连接).

我也看到以下参数可能会有所帮助:

"runtimeArgs": [
  "--remote-debugging-port=9222",
  "--user-data-dir"
]

但它没有改变任何东西.

我决定使用VSC作为我的typescript开发者(大多数是angular2),这种调试方式看起来非常强大.我觉得不使用它太糟糕了:).

谢谢你的帮助 !

PS:一些相关的stackoverflow问题和github问题:
- 用Visual Studio代码调试和运行Angular2 Typescript？
- https://github.com/angular/angular-cli/issues/2453
- https://github.com/angular/angular-cli/issues/1936
- https://github.com/angular/angular-cli /问题/ 1281

编辑1:!!! 部分改进! 我找到了一种在Visual Studio代码控制台中获得调试信息的方法!所以它并不完美,因为断点不起作用,但这就是事情.到目前为止,如果我打开http:// localhost:9222,我无法看到任何内容.("localhost未授权连接").

但是,如果我这样推出铬:

chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

重要的是要注意这个论点:--user-data-dir=remote-profile.如果您只是传递--user-data-dir,它将启动一个没有连接的新窗口.但这还不够.您需要将remote-profile作为值传递.

• 它会打开一个新的浏览器窗口
• 我打开http:// localhost:4200我也可以访问http:// localhost:9222!
• 我能够通过"附加到带源映射的chrome"选项连接VSC! (正如你所看到的,我确实有"Angular 2正在开发模式下运行.调用enableProdMode()以启用生产模式."在控制台中显示,页脚现在有橙色背景)

到目前为止,我希望它可以帮助一些人.但现在的问题是断点不起作用.

如果我找到原因,我会继续挖掘并进行另一次编辑.

Answer 1

我终于让它完全运转了!

对于有兴趣的人:

(在Linux上使用chrome-browser,但您可以轻松地用"chrome"替换).

首先,这是launch.json配置:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src",
            "url": "http://localhost:4200/",
            "sourceMapPathOverrides": {
              "webpack:///*": "/*"
            }
        }
    ]
}

我决定删除带有"请求"的部分:"启动",因为我需要启动一个新的浏览器窗口.

然后,像这样启动浏览器:
chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

在新窗口中,访问http:// localhost:4200.

然后从VSC运行调试.

一切都应该工作得很好,你应该能够使用断点:)

GIF可在此处查看:http://hpics.li/0156b80

Answer 2

我能够在OSX上解决这个问题.这种痛苦的原因是导致这个问题的原因有很多.

1. 您点击了第一个--user-data-dir=remote-profile:如果您已经在运行Chrome(例如,已经打开了标签 - 谁没有？),则必须使用其他userDataDir方法让Chrome启动独立实例.
   但是,正确的方法是添加"userDataDir": "${workspaceRoot}/.vscode/chrome",到launch.json配置中(见下文).这需要成为一条道路.如果使用'remote-profile',它会尝试查找名为'remote-profile'的相对目录.
2. 你需要sourceMapPathOverrides在你的launch.json配置中设置,其值取决于你的操作系统:
   OSX:"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
   Windows:"sourceMapPathOverrides": { "webpack:///C:*":"C:/*" }
   Linux :( "sourceMapPathOverrides": { "webpack:///*": "/*" }
   注意:我没有测试Windows或Linux版本)

这是我launch.json在OSX上的工作:

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",

    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            // This forces chrome to run a brand new instance, allowing existing
            // chrome windows to stay open.
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            //"diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "url": "http://localhost:4200",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        }
    ]
}

要使其工作,请ng serve在终端中运行,然后在Visual Studio Code中按F5.

以下是我正在使用的版本:

• angular-cli:1.0.0-beta.24
• 节点:7.3.0
• Chrome:55.0.2883.95
• Visual Studio代码:1.8.1
• VSCode扩展"适用于Chrome的调试器"msjsdiag.debugger-for-chrome:2.4.2