在 Rider 中调试 Angular 应用程序

Question

我用谷歌搜索并找到了在 Rider 中调试 Angular 应用程序的方法，但它感觉不对，因为完成如此简单的事情需要执行一些步骤，所以我在这里询问该方法是否正确以及如果可以改进的话。

我主要在后端工作，所以我使用 Rider 作为我的 IDE（它与 WebStorm 的调试器捆绑在一起）。

工具版本信息：

Angular CLI version: 17.0.6
Rider version: 2023.3.2

---

这就是我所做的：

1. 使用 Angular CLI 创建一个新项目。例如：

   ng new tour-of-heroes

   .

2. 在 Rider 中打开应用程序工作区目录。

3. 打开终端并运行

   ng serve

   来运行应用程序。

4. 获取应用程序正在运行的 url。例如：

   http://localhost:4200

   .

5. 在 Rider 中，转到

   Run

   ->

   Edit Configurations...

   1. 单击

      +

      （即

      Add New Configuration

      ）并选择

      JavaScript Debug

      

   2. 为其命名（例如：

      debug-tour-of-heroes

      ）并输入您在第 2 步中获取的网址
      

      File/Directory

      部分不显示我的项目文件，这很奇怪吗？ 🤔

   3. 在上述窗口左下角的下拉菜单中选择

      Debug

      ，然后点击确定
      

6. 单击右上角的“调试”图标

   

   此时，将打开一个新的浏览器窗口，并且开始命中断点。

这感觉就像是调试应用程序的很多步骤。 😩

这是正确的方法吗？有更好的办法吗？

Answer 1

我不认为在这种情况下可以在 IDE 中附加调试器（用于调试在浏览器环境中运行的 js 代码，而不是 NodeJS）。

我建议使用浏览器来调试代码。 您可以使用以下任一方法来实现此目的

• Angular DevTools 用于检查组件状态的插件
• Chrome DevTools 调试您的 js（和 css、html）代码。如果您想在特定行上设置断点，只需在该行上写

  debugger;

  并打开 DevTools，它应该会中断该点的执行并为您提供导航工具。