gpt4 book ai didi

angularjs - 如何在 Visual Studio 代码中调试 Angular 应用程序?

转载 作者:行者123 更新时间:2023-12-02 22:27:20 24 4
gpt4 key购买 nike

我有一个在 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但我无法将调试器附加到 Angular 。这是我所做的

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?

最佳答案

我按照指示 here 进行操作使用我的 Angular 应用程序进行调试。我使用的是 launch 请求类型,因为它对我来说比 attach 请求类型更可靠。

顺便说一句,VSCode 没有内置的 Web 服务器,因此我创建了一个指向我的 Angular 应用程序的根目录的 IIS 网站,然后在 launch.json 中添加了使用“url”启动方法的启动配置(例如: http://localhost/myangularapp/index.html )。

关于angularjs - 如何在 Visual Studio 代码中调试 Angular 应用程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36896037/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com