使用 Visual Studio Code 进行调试不起作用 [英] Debug with Visual Studio Code not working

查看：235
本文介绍了使用 Visual Studio Code 进行调试不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是我的环境:

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

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

ng new test-VSC-debugcd 测试-VSC-调试

然后我打开 VSC 并加载项目:文件/打开文件夹

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

<代码>{版本":0.2.0"，配置":[{"name": "使用源映射针对本地主机启动 Chrome",类型":铬"，请求":启动"，"url": "http://localhost:8080","sourceMaps": 真,"webRoot": "${workspaceRoot}"},{"name": "附加到 Chrome，带有源地图",类型":铬"，"请求": "附加",端口":9222，"sourceMaps": 真,"webRoot": "${workspaceRoot}"}]}

然后我只需运行以下命令即可启动 angular2 项目:

ng 服务

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

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

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

Angular-cli 启动应用程序的默认端口是 4200.将 url 从:"(如您所见，我确实在控制台中显示了Angular 2 正在以开发模式运行.调用 enableProdMode() 以启用生产模式."显示在控制台中，页脚现在具有橙色背景)

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

我一直在挖掘，如果找到原因，我会再做一次编辑.

解决方案

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

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

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

{//使用 IntelliSense 了解可能的 Node.js 调试属性.//悬停以查看现有属性的描述.//更多信息，请访问:https://go.microsoft.com/fwlink/?linkid=830387版本":0.2.0"，配置":[{名称":针对本地主机启动 Chrome，使用源映射"，类型":铬"，请求":启动"，url":http://localhost:4200"，//这会强制 chrome 运行一个全新的实例，允许现有的//镀铬窗口保持打开状态.userDataDir":${workspaceRoot}/.vscode/chrome"，sourceMaps":真，webRoot":${workspaceRoot}"，//诊断日志":真，"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*";}},{名称":附加到 Chrome，带有源地图"，类型":铬"，请求":附加"，url":http://localhost:4200"，端口":9222，sourceMaps":真，webRoot":${workspaceRoot}"，诊断日志":真，"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*";}}]}

为此，请在终端中运行 ng serve，然后在 Visual Studio Code 中按 F5.


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

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

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

Here's my environment:

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

Creating a new project with angular-cli :

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

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

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

Then I just start the angular2 project by running :

ng serve

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

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

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

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

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".

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.

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 :).

Thanks for any help !

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

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

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.

  • 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.

解决方案

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. 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)

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}/*" }
        }
    ]
}

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
  • node: 7.3.0
  • Chrome: 55.0.2883.95
  • Visual Studio Code: 1.8.1
  • VSCode Extension "Debugger for Chrome" msjsdiag.debugger-for-chrome: 2.4.2

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆