使用Visual Studio Code进行调试无法正常工作 [英] Debug with Visual Studio Code not working

问题描述

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

I'd like to be able to debug an Angular2 application with Visual Studio Code.

这是我的环境:

• OS :Ubuntu 16.10 x64
• 浏览器:铬 53.0.2785.143
• 节点:6.8.0
• Angular-cli :1.0.0-beta.19-3

• OS: Ubuntu 16.10 x64
• Browser: Chromium 53.0.2785.143
• Node: 6.8.0
• Angular-cli: 1.0.0-beta.19-3

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

Creating a new project with angular-cli :

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

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

Then I open VSC and load the project : File/open folder

我单击debug徽标，然后选择chrome，然后单击configure launch.json.它生成以下文件:

I click on the debug logo and I configure launch.json by selecting chrome. It generates the following file :

{
    "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项目:

Then I just start the angular2 project by running :

ng serve

启动后，在VSC中，我选择:使用源地图针对本地主机启动Chrome".

Once it has started, in VSC I select : "Launch Chrome against localhost, with sourcemaps".

然后，出现以下错误:
找不到chrome:安装它或在启动配置中设置runtimeExecutable字段."

Then, I get the following error :
"Can't find chrome : Install it or set the runtimeExecutable field in the launch config."

所以我设置了:
"runtimeExecutable":铬浏览器"
(因为在我的Ubuntu上，我没有有铬但有铬).

So I set :
"runtimeExecutable": "chromium-browser"
(as I do not have chrome but chromium on my Ubuntu).

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

Angular-cli default port to launch the app is 4200. Change url from : "http://localhost:8080" to "http://localhost:4200".

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

Now the browser is opening the app but VSC has the following error: "Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONREFUSED 127.0.0.1:9222".

从关于stackoverflow/github问题的其他答案中，我读到我可能必须先杀死所有chrome实例，然后再执行此操作，因此我只关闭chrome并运行killall chromium-browser.

From other answers found on stackoverflow/github issues, I've read that I might have to kill all chrome instances before trying to do that, so I just close chromium and run killall chromium-browser.

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

I try to run the debug again : Same error as before (cannot connect).

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

I've also seen that the following arguments might help :

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

但是它并没有改变任何东西.

But it does not change anything.

我决定将VSC用于我的打字稿开发人员(主要是angular2)，这种调试方式似乎非常强大.我觉得不使用它会很糟糕:).

I decided to use VSC for my typescript devs (mostly angular2) and this way of debugging seems very powerful. I have the feeling that it'd be too bad not to use it :).

感谢您的帮助！

PS:一些相关的stackoverflow问题和github问题:
- Debug&使用Visual Studio Code运行Angular2 Typescript?
- https://github.com/angular/angular-cli/issues/2453
- https://github.com/angular/angular-cli/issues/1936
- https://github.com/angular/angular-cli/issues/1281

PS: Some related stackoverflow questions and github issues :
- Debug & Run Angular2 Typescript with Visual Studio Code?
- https://github.com/angular/angular-cli/issues/2453
- https://github.com/angular/angular-cli/issues/1936
- https://github.com/angular/angular-cli/issues/1281

编辑1 :！部分改善！！！ 我找到了一种在Visual Studio Code控制台中获取调试信息的方法！ 因此，它并不是完美的，因为断点不起作用，但这就是问题所在. 到目前为止，如果我打开 http://localhost:9222 ，我什么都看不到. (本地主机未授权连接").

EDIT 1: !!! Partial improvement !!! I found a way to have debug info within Visual Studio Code console ! So it's not perfect yet as breakpoints doesn't work but here's the thing. So far, if I opened http://localhost:9222 I was not able to see anything. ("localhost doesn't authorized the connection").

但是，如果我那样发射铬:

BUT, if I launch chromium like that :

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

重要的是要注意该参数:--user-data-dir=remote-profile.如果只传递--user-data-dir，它将启动一个没有连接任何人的新窗口.但这还不够.您需要传递远程配置文件作为值.

The important thing is to notice that argument : --user-data-dir=remote-profile. If you just pass --user-data-dir it launches a new window with no one connected. But it's not enough. You need to pass remote-profile as value.

• 它会打开一个新的浏览器窗口
• 我打开 http://localhost:4200 并且我也可以访问

• it opens a new browser window
• I open http://localhost:4200 AND I can also reach http://localhost:9222 !
• I'm able to connect VSC with "Attach to chrome with source map" option ! (as you can see, I do have the "Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode." displayed in console and the footer now has an orange background)

到目前为止，我希望它可以对某些人有所帮助. 但是现在的问题是，断点无法正常工作.

So far, I hope it can help some people. But the problem now is that breakpoints are not working.

我一直在挖掘，如果发现原因，将再次进行编辑.

I keep digging and 'll make another edit if I found why.

推荐答案

我能够在OSX上解决此问题.之所以如此痛苦，是因为有很多原因导致了这个问题.

I was able to solve this problem on OSX. The reason it's such a pain is there are multiple things causing the issue.

1. 您第一次使用--user-data-dir=remote-profile进行了操作:如果您已经在运行Chrome(例如，已经打开了选项卡-谁没有打开?)，则必须使用其他userDataDir来启动Chrome独立实例.
   正确的方法是将"userDataDir": "${workspaceRoot}/.vscode/chrome",添加到launch.json配置中(请参见下文).这需要走一条路.如果使用远程配置文件"，它将尝试找到名为远程配置文件"的相对目录.
2. 您需要在launch.json配置中设置sourceMapPathOverrides，其值取决于您的操作系统:
   OSX:"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
   Windows:"sourceMapPathOverrides": { "webpack:///C:*":"C:/*" }
   Linux:"sourceMapPathOverrides": { "webpack:///*": "/*" }
   (注意:我尚未测试Windows或Linux版本)

1. You hit on the first with --user-data-dir=remote-profile: If you're already running Chrome (for example, already have tabs open - who doesn't?), you have to use a different userDataDir to have Chrome launch an independent instance.
   The correct way to do this, however, is to add "userDataDir": "${workspaceRoot}/.vscode/chrome", to your launch.json configuration (see below). This needs to be a path. If 'remote-profile' is used it attempts to find a relative directory named 'remote-profile'.
2. You need to set sourceMapPathOverrides in your launch.json config, the value of which depends on your OS:
   OSX: "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
   Windows: "sourceMapPathOverrides": { "webpack:///C:*":"C:/*" }
   Linux: "sourceMapPathOverrides": { "webpack:///*": "/*" }
   (Note: I have not tested the Windows or Linux versions)

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

Here is my working launch.json on 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.

For this to work, run ng serve in a terminal, then hit F5 inside of Visual Studio Code.

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

Here are the versions I'm working with:

• 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

这篇关于使用Visual Studio Code进行调试无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！