如何在 WebStorm 中调试从 grunt serve 开始的 Angular 网站？

Posted 2023-03-05

【中文标题】如何在 WebStorm 中调试从 grunt serve 开始的 Angular 网站？

【英文标题】：How can I debug an Angular website started with grunt serve inside WebStorm?

【发布时间】：2016-12-01 12:27:30

【问题描述】：

我正在尝试从 WebStorm 中调试我的 AngularJS 站点。 该网站使用“grunt serve”服务。 我在 Chrome 中安装了 Jetbrains IDE 支持插件，它被配置为在默认端口 63342 上工作。

我用

Windows 8.1 作为开发平台 Webstorm 2016.3.1 “grunt-contrib-connect”：“~1.0.2”

在 Webstorm 中，我创建了 javascript 调试类型的运行配置。 我在里面放了：

http://localhost:9001 的 URL 字段与中配置的相同 咕噜文件。 浏览器：默认（chrome） 本地文件的远程 URL： src 文件夹映射到http://localhost:9001

当我运行 grunt serve 时，我的网站以 chrome 启动。 当我点击 JavaScript 调试配置的调试按钮时，会显示调试器窗口，但过了一会儿，Chrome 会弹出“等待来自 JetyBrains IDE 支持扩展的连接”。请确保您已安装..."

我也没有在 Chrome 中看到黄色弹出窗口告诉 Jetbrains IDE 支持扩展功能正常。

当我在控制台中查找 Jetbrains IDE 支持扩展的 _generated_background_page.html 时，我看到以下消息：

IN [21,"Debugger","attach",["http://localhost:9001",true]]

然后什么都没有发生了。

有人有关于如何在 WebStorm 中调试使用 Grunt serve 运行的 AngularJS 网站的分步手册吗？

【问题讨论】：

打开 Chrome 调试器并在调试器的脚本部分放置断点。如果你想让它与 Jetbrains 一起工作，它显然与 grunt 或 webstorm 无关，只是在你的 ide 和 chrome 之间。

Webstorm 是 IDE ;-)

【参考方案1】：

我找到了：我需要更改 Jetbrains IDE 支持扩展选项中的主机设置。它的值是 "127.0.0.1"，当我将其 更改 为 "localhost"时，事情就开始了锻炼身体！

【讨论】：

你在windows下（或者windows的虚拟机）？我记得曾经遇到过这样的麻烦，但在linux下从来没有类似的东西。

是的，我在 Windows 上运行。

此类问题可能是由于代理服务器/防火墙阻止了127.0.0.1 ...上的请求...