如何在 WebStorm 的调试器中调试 AngularJS(Angular 1.x)/Gulp 应用程序，以便客户端 JS 断点在 WebStorm 中工作？答案

【问题标题】：How to debug an AngularJS(Angular 1.x)/Gulp application in WebStorm's debugger so that client side JS breakpoints work in WebStorm?如何在 WebStorm 的调试器中调试 AngularJS(Angular 1.x)/Gulp 应用程序，以便客户端 JS 断点在 WebStorm 中工作？
【发布时间】：2018-01-24 17:10:55
【问题描述】：

我遵循了许多文档/教程，但无济于事。看起来过去有人问过一个很similar question，但没有准确回答，但那是两年前的事了。

【问题讨论】：

Afaik，你不能 - 他们是客户端。
blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps ?

标签： angularjs debugging gulp webstorm

【解决方案1】：

AngularJS 应用程序运行/调试与任何其他 javascript 客户端应用程序运行/调试没有什么不同：为此您需要一个 JavaScript Debug 运行配置。您的 Angular 应用程序的服务方式（通过自定义 node.js 服务器、Gulp、WebStorm 内置 Web 服务器或任何其他 Web 服务器）无关紧要 - 您只需指定您的应用程序 URL（用于访问它的 URL）浏览器）作为运行配置中的 URL。请参阅https://www.jetbrains.com/help/webstorm/debugging-javascript-in-chrome.html，调试在外部 Web 服务器上运行的应用程序

【讨论】：

试过了，在我看来你可以调试编译的 JS，所以“在 gulp 之后”。在预编译的代码中有断点并让这些工作正常工作会很好。还是我做错了什么？
必须是源映射的问题 - 它们要么丢失要么不准确，因此无法将源映射到正在运行的编译代码。确保正确使用和配置 'gulp-sourcemaps' 包