在Windows下使用Chrome在Intellij中调试Angular应用程序。

Question

我已经找了很长时间，想要在Windows上使用IntelliJ和Chrome来调试Angular应用程序。

目前我无法将调试器连接到Chrome。我尝试了使用--remote-debugging-port=9222启动Chrome以及许多其他解决方案。

我目前使用的是IntelliJ 2020.2和Chrome 86。

有人有Windows上的解决方案吗？

- Georg H.

Answer 1

我在使用Mac，但我认为这可能对你有所帮助，因为它解决了我的问题。

解决方法是前往：

设置 -> 工具 -> 网络浏览器和预览

编辑Chrome条目，并在命令行选项中输入--remote-allow-origins=*。

参考资料：https://www.reddit.com/r/IntelliJIDEA/comments/120faod/comment/jdk82yz/?utm_source=share&utm_medium=web2x&context=3

- Raihanul Alam Hridoy

Answer 2

如果出现以下错误： 请确保浏览器已成功启动并开放了远程调试端口。如果已经启动具有相同用户数据目录的Chrome，则无法打开端口。 请尝试删除此文件：

~\AppData\Roaming\JetBrains\WebStorm2020.2\options\other.xml

如果上述方法不起作用，除了上述步骤外，还需要删除此文件：

~\AppData\Roaming\JetBrains\WebStorm2020.2\options\web-browsers.xml

永远记得备份您的文件。

- Prasanth Louis

---

在2023年03月，这个路径对我在Windows系统上有效： %APPDATA%\JetBrains\WebStorm2022.2\options 使用~语法没有任何有用的效果，只是打开了一个新的浏览器窗口。 - Cee McSharpface

Answer 3

请按照帮助中描述的步骤进行操作：

• 运行npm start启动您的应用程序
• 创建JavaScript调试运行配置，在其中指定您的服务器URL（http://localhost:4200/或类似的URL）
• 在您的代码中设置断点。
• 调试上述配置

另请参阅https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/

- lena

---

我尝试了上面描述的解决方案，但无法运行。当我启动调试配置时，会打开一个带有“崩溃”标签的 Chrome 实例。还在 Intellij 的事件日志中收到以下消息：07:02 等待与 localhost:57914 的连接。请确保浏览器成功启动，并打开了远程调试端口。如果已经运行了具有相同用户数据目录的 Chrome，则无法打开端口。 - Georg H.

嗯...看起来像是IDE的问题。你用的是什么操作系统？使用--remote-debugging-port选项启动Chrome的结果是什么？ - lena

我正在使用Windows 10操作系统。我需要在哪里设置“--remote-debug-port”选项，并且正确的端口是多少？是9222吗？ - Georg H.

嗨 @lena，我刚试了一下使用 --remote-debugging-port=9222，还是没有成功。调试器无法附加到任何 Chrome 进程上。IntelliJ 启动的 Chrome 会话都出现了问题，都崩溃了。 - Georg H.