使用 Google Chrome 在 WebStorm 中调试 JavaScript Angular 应用程序答案

【问题标题】：Debugging JavaScript Angular application in WebStorm using Google Chrome使用 Google Chrome 在 WebStorm 中调试 JavaScript Angular 应用程序
【发布时间】：2014-12-06 05:15:24
【问题描述】：

我正在尝试使用 Google Chrome 在 WebStorm 的 Angular 应用程序中调试一些控制器代码。

我的调试设置：

运行这些调试设置时：

1) Chorme 在任务栏中闪烁，好像它正在尝试连接。

2) 我没有看到通常显示在页面顶部的调试选项卡（指示）（如棕色标题）

3) 在 WebStorm 的调试器窗口中，我收到以下消息

 "cannot connect , ensure that Web Inspector is closed "

此外，我还能够使用 Chrome 开发工具调试我的代码。

知道是什么干扰了 Webstorm 的调试器连接到 Chrome 吗？

【问题讨论】：

WebStorm 和 Chrome 版本？
网络风暴 7 。我不确定 chrome 的确切版本。但我不久前在 Windows 7 64 位上安装了它
在 Chrome 中 -- Menu (burger icon) | About Google Chrome ?
无论如何：Chrome 最近 (v37) 更新了他们的协议 .. 这使得 WebStorm v8 不兼容（而且您使用的是更旧的版本）。因此，要么尝试 v9 EAP 构建，要么将 Chrome 降级到 v36（例如，单独安装、禁用自动更新并仅将其用于开发）。 v9 EAP——见blog.jetbrains.com/webstorm/2014/10/…
好的，谢谢，我刚开始使用 Firefox。

标签： javascript angularjs google-chrome debugging webstorm

【解决方案1】：

您是否为 chrome 安装了“JetBrains IDE Support”扩展程序？如果您的 Web 服务器在 localhost:63342 中运行，请尝试：

将 URL 参数设置为 http://localhost:63342
将 index.html 文件绑定到 http://localhost:63342/index.html

如果您有任何问题，请查看这篇描述如何使用 Intellij 逐步调试 Angular 的帖子： http://ignaciosuay.com/how-to-debug-angularjs-with-intellij/

【讨论】：

【解决方案2】：

我遇到了和你一样的问题，但我找到了解决方案。你只是缺少一个简单但重要的步骤，即覆盖默认的 CORS 设置。你可以按照：

右键单击 JetBrains Chrome 扩展程序图标并选择选项在上下文菜单上。带有 Chrome 扩展选项的网页打开显示连接到 WebStorm 的参数。
更改您可以在 WebStorm 中找到的端口。然后，您可以在 Chrome 中调试您的 AngularJS 应用。

你也可以看到https://www.jetbrains.com/webstorm/help/using-jetbrains-chrome-extension.html

【讨论】：

【解决方案3】：

首先检查 Jetbrains IDE 支持安装在您的 chrome 上，然后右键单击图标转到选项检查端口，我在我的 Angular 应用程序中使用路由，因此在 webstorm javascript 调试的 URL 中没有选择特定的 html 文件，例如（@ 987654321@) 在 urlbox 上写入，然后控制器中的断点工作。这个解决方案对我有用

【讨论】：