使用Visual Studio代码进行调试不起作用

问题描述：

我希望能够使用Visual Studio代码调试Angular2应用程序。使用Visual Studio代码进行调试不起作用

这里是我的环境：

OS：Ubuntu的16.10 64
浏览器：铬 53.0.2785.143
节点：6.8.0
Angular- cli：1.0.0-beta.19-3

创建具有角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我选择：“将Chrome浏览器对本地主机，与sourcemaps”。

然后，我得到以下错误：
“无法找到chrome：安装它或在启动配置中设置runtimeExecutable字段。”

所以我设置：
“runtimeExecutable”： “铬浏览器”
（像我一样不有铬，但铬在我的Ubuntu）。

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

现在浏览器在打开应用程序，但VSC有以下错误： “无法连接到运行过程中，超时后10000毫秒 - （原因：无法连接到目标：连接ECONREFUSED 127.0.0.1:9222”

。

从这计算器/ github上发现问题，其他的答案，我读过，我可能会尝试这样做，之前杀死所有Chrome实例，所以我只是近铬和运行killall chromium-browser。

我尝试运行再次调试：与以前相同的错误（无法连接）

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

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

但它不会改变任何东西。

我决定将VSC用于我的打字稿开发人员（主要是angular2），这种调试方式似乎非常强大。我有这样的感觉，它不会使用它:)。

感谢您的帮助！

编辑1：!!!部分改善！ 我发现了一种在Visual Studio代码控制台中拥有调试信息的方法！所以它不完美，但断点不起作用，但这是事情。到目前为止，如果我打开http://localhost:9222，我无法看到任何东西。（“本地主机不授权连接”）。

，但如果我启动铬这样的：

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

重要的是要注意这样的说法：--user-data-dir=remote-profile。如果你只是传递--user-data-dir，它会启动一个没有连接的新窗口。但这还不够。您需要将远程配置文件作为值。

它会打开一个新的浏览器窗口
我打开http://localhost:4200，我也可以达到http://localhost:9222！
我可以将VSC连接到“附加到源图的铬”选项！（正如你所看到的，我也有“角2在开发模式下运行。调用enableProdMode（），使生产模式”。在控制台中显示和页脚现在有一个橙色背景）

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

如果我找到原因，我会继续挖掘并进行其他编辑。

使用Angular 2.4.8 http://stackoverflow.com/questions/42495655/how-to-debug-angular-with-vscode – Asesjix

答

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

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

这是我在OSX工作launch.json：

{ 
    // 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代码中键入F5。

这里是我的工作版本：

角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

我不支持“chrome”。 – fuzz

@fuzz是否安装了扩展[Chrome for Debugger]（https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome）？ –

非常感谢您提供'launch.json'文件。它完美的工作！ – fuzz

答

我终于得到它充分的工作！

对于那些有兴趣：

（在Linux上使用铬浏览器，但你可以很容易地仅仅通过“铬”代替）。

首先，这里的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

只是一个Windows用户请注意：'sourceMapPathOverrides'必须包含您的相关驱动器号。例如。 ''webpack：/// c：*“：”c：/ *“'当您从_C：drive_运行项目时。 – Yuri

Bravo！我已经尝试了几次，并且永远无法使它工作。 sourceMapPathOverrides是关键！ –

我知道......感谢和不相关的评论是一个不会在计算器中，因为你的答案是节省时间：“谢谢！”。 – Luther

答

亚伦F.类似ANS 我使用Windows环境下的设置角度2+发展

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "name": "Launch Chrome against localhost, with sourcemaps", 
      "type": "chrome", 
      "request": "launch", 
      "url": "http://localhost:4200", 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}", 
      "trace": true, 
      "smartStep": true, 
      "runtimeArgs": [ 
       "--disable-session-crashed-bubble", 
       "--disable-infobars" 
      ], 
      "userDataDir": "${workspaceRoot}/.vscode/chrome", 
      "sourceMapPathOverrides": { 
       "webpack:///./*": "${webRoot}/*" 
      } 
     } 
    ] 
}

答

我得到launch.json奇怪的问题由Aaron F.

提供”。脚本 “在调试命令行给的网址是这样的：

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts) 
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts)

所以VS代码试图用文件”/ home/user中/我的梦 - 应用程序/ src目录/应用/的WebPack：/ src目录/程序/应用程序。 component.ts”。（通知的WebPack：在中间）

来源的地图不工作，因为我的Chrome给的网址为‘的WebPack：/’一个斜线

在得到它与此次发布的工作。 json：

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "type": "chrome", 
      "request": "launch", 
      "name": "Launch Chrome with ng serve", 
      "url": "http://localhost:4200/", 
      "webRoot": "${workspaceRoot}", 
      "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*" } 
     } 
     ] 
}

and got corr ECT映射

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts) 
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)

Ubuntu的：16.04
铬：64.0.3282.186
VSCode：1.20.1
角CLI：1.7.2
节点：7.10.1

使用Visual Studio代码进行调试不起作用

相关推荐