如何在 Visual Studio 代码中调试 Angular 应用程序？答案

【问题标题】：How to debug angular application in visual studio code?如何在 Visual Studio 代码中调试 Angular 应用程序？
【发布时间】：2016-04-27 16:49:17
【问题描述】：

我有一个在 MEAN 堆栈中开发的应用程序。我有 server.js 文件，它使用“http”节点模块在本地端口“4030”上启动服务器。我的 chrome 浏览器已经配置了远程调试功能

--remote-debugging-port=9222

所以要在本地调试 Angular 应用程序，这就是我一直在做的：

1>从 windows 节点命令提示符启动 http 服务器，它在 localhost:4030 上启动服务器

 Node server.js

2>在 chrome 中，浏览http://localhost:4030上的应用程序
3>在 chrome 中，再打开一个选项卡，然后浏览 http://localhost:9222 -> 选择我在 localhost:4030 上运行的应用程序 -> 选择源 -> 并调试应用程序
这一直运行良好。

我正在使用 Visual Studio Code 进行开发，并且能够在 Visual Studio Code 中调试 Node 代码而没有任何问题。但是，现在我也想在 Visual Studio Code 中调试 Angular 应用程序。我关注了文章here，但我无法将调试器附加到角度。这是我所做的

1> 在 Visual Studio Code 中安装扩展

 ext install debugger-for-chrome

2> Chrome 已配置启用远程调试。在“目标”字段中，附加

--remote-debugging-port=9222

Visual Studio Code 的根文件夹是“C:\src\MyApp” 这是我的应用程序的物理文件路径：

 C:\src\MyApp\.vscode\launch.json  
 C:\src\MyApp\integration\server.js  
 C:\src\MyApp\integration\angular\js\app.js  
 C:\src\MyApp\integration\angular\views\index.html

index.html 是起始页

  <html lang="en" dir="ltr" data-ng-app="MyApp">
    <head>    
    </head>
    <body>    
        <div class="container" data-ui-view>
        <div id="footer">        
        </div>

        <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="/bower_components/angular/angular.js"></script>

         Some more javascript reference here....   

        <script type="text/javascript" src="/js/app.js"></script>
    </body>
 </html>

问题
我不确定应该在 launch.json 文件中使用哪些配置值？
Visual Studio Code 是否像我现在做的那样有内置服务器或单独启动服务器并附加 Visual Studio Code？p>

【问题讨论】：

嗨，你有没有用 VSCode 来调试 Angular 我还是做不到
没有。我还不能在 Visual Code 中调试 Angular。
感谢您的回复，如果我能正常工作，我会通知您

标签： angularjs debugging visual-studio-code

【解决方案1】：

我按照说明 here 来调试我的 Angular 应用程序。我使用的是launch 请求类型，因为它比attach 请求类型更可靠。

顺便说一句，VSCode 没有内置 Web 服务器，所以我创建了一个指向我的 Angular 应用程序的根目录的 IIS 网站，然后在launch.json 中，我添加了一个使用 'url 的启动配置' 启动方法（类似于：http://localhost/myangularapp/index.html）。

【讨论】：