我希望能够使用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),这种调试方式似乎非常强大。我有这样的感觉,它不会使用它:)。
感谢您的帮助!
PS:一些相关的计算器的问题和github上的问题:
- 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代码控制台中拥有调试信息的方法! 所以它不完美,但断点不起作用,但这是事情。 到目前为止,如果我打开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