调试 NodeJS + AngularJS 2答案

【问题标题】：Debug NodeJS + AngularJS 2调试 NodeJS + AngularJS 2
【发布时间】：2017-12-08 14:11:00
【问题描述】：

如何调试整个 App NodeJS 和 ExpressJS？我尝试使用 'ng build --prod' ，然后将 dist 中的文件复制到我的视图文件夹中。我希望每当我更改代码时，我都会刷新浏览器，并且它的代码也会发生变化。谢谢！

【问题讨论】：

您将不得不提供比这更多的信息。您具体要调试什么？什么没有按预期工作？
是的，但我只想知道如何测试和修复错误，然后我可以在刷新后看到代码更改。 google了一下，没搞清楚

标签： javascript angularjs node.js debugging

【解决方案1】：

我假设你使用的是 Angular2（AngularJS 2 没有意义）

如果你只想调试服务器（NodeJS + ExpressJS）
使用网络风暴。使用 WebStorm 标记断点非常容易，然后转到“运行/调试配置”并添加新的 Node.js 配置文件。在配置区域中设置适当的属性。现在，您可以通过单击 IDE 右上角的绿色小错误图标以调试模式运行服务器。当您从客户端发送请求时，服务器将在断点处暂停。 WebStorm 将在调试时为您提供许多有用的功能。

如果你想调试 angular2 应用程序
您可以使用 Google Chrome 扩展程序Augury 来调试 Angular2 应用程序。 Augury 文档将帮助您如何使用它。

另外我想让你告诉你的是，

在开发时不要使用ng build. 使用ng serve 并在不同的端口（默认4200）和另一个端口（默认3000）中提供角度应用程序和节点服务器。然后在浏览器中打开 Angular 应用程序并禁用网络安全（CORS 已禁用 - here）。这将为您提供更灵活的开发体验。
使用Nodemon 启动nodeJS 服务器。它会随着你源代码的变化自动重启服务器。

谢谢。

【讨论】：

【解决方案2】：

使用 --inspect 调试 ExpressJS

启用检查器代理
侦听默认端口 (9229)

禁用 Angular JS 的 minify 或 uglify，以便您可以在 Chrome 上调试

供您参考 https://nodejs.org/en/docs/guides/debugging-getting-started/

对于 prod，默认情况下会被丑化

【讨论】：