运行并调试 Angular 应用程序

创建一个 npm 运行/调试配置

1. 前往 运行 | 编辑配置。 或者，在工具栏上的 运行 小部件中选择 编辑配置。

   

   在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（ ），然后从列表中选择 npm。

2. 在打开的 配置 对话框的 运行/调试配置：npm 选项卡中，指定 package.json 、Node.js 运行时以及要使用的包管理器的位置。

   在 命令 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 它很可能是默认的 start 脚本，但可以在 package.json 中配置另一个脚本，例如，在自定义端口上运行应用程序。

   

3. 可选：

   要在浏览器中打开应用程序，请按照以下步骤更新配置：在 浏览器 / Live Edit 选项卡中，选中 在启动后 复选框，选择要在其中打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。

   如果要调试应用程序，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。

   

运行应用程序

1. 从工具栏上的 运行 小部件列表中，选择一种 npm 类型的运行配置。 这可以是自动生成的 Angular CLI 服务器 配置，或者是您自行创建的自定义配置 如上所述。

2. 点击 。

   

3. 等待应用程序编译完成且开发服务器就绪。

   运行 工具窗口或 终端 会显示应用程序正在运行的 URL。 如果应用程序是使用 @angular/cli 生成的，默认 URL 为 http://localhost:4200/ 。 点击此链接查看应用程序。

   

   或者，启用 IntelliJ IDEA 以在启动时打开应用程序 如上所述。

使用单个 npm run/debug 配置运行和调试 Angular 应用程序

1. 在代码中设置 断点。

2. 创建 npm 配置， 如上所述。

3. 在打开的 配置 对话框的 运行/调试配置：npm 选项卡中，指定 package.json 、Node.js 运行时以及要使用的包管理器的位置。

   在 命令 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 它很可能是默认的 start 脚本，但可以在 package.json 中配置另一个脚本，例如，在自定义端口上运行应用程序。

   

4. 在 浏览器 / Live Edit 选项卡中，选中 在启动后 复选框，从列表中选择 Google Chrome 或其他 Chromium-based browser ，选中 使用 JavaScript 调试器 复选框，然后指定您的应用程序将运行的 URL。

   

5. 点击 运行。

   要重新运行该配置，请从 运行 微件中的列表中选择它，然后点击其旁边的 。

   IntelliJ IDEA 在开发模式下运行应用程序，同时启动调试会话。

   

6. 当第一个断点被触发时，切换到 调试工具窗口 并按常规方式继续： 逐步执行程序， 停止并恢复程序执行， 在挂起时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。

   要忽略源代码映射并逐步执行实际运行的代码，请在 调试 工具窗口的工具栏上点击 。

使用 JavaScript Debug 运行/调试配置开始调试

1. 在代码中设置 断点。

2. 启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。

   运行 工具窗口或 终端 会显示应用程序正在运行的 URL。 请复制此 URL 到 稍后在 JavaScript Debug 配置中指定。

   

3. 创建一个 JavaScript Debug 配置。 要执行此操作，请在主菜单中转到 运行 | 编辑配置 ，点击 ，然后从列表中选择 JavaScript Debug。

   如果您使用 Angular CLI 生成了应用程序， 如上所述 ，IntelliJ IDEA 已经创建了一个 JavaScript Debug 运行/调试配置，默认名称为 调试应用程序 ，默认 URL 为 http://localhost:4200。 从 JavaScript Debug 节点下的列表中选择此 run/debug 配置。

   

4. 在打开的 运行/调试配置：JavaScript Debug 对话框中，指定配置的名称以及应用程序在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或 终端 中复制此 URL， 如上所述。

   

5. 点击 调试。

   要重新运行该配置，请从 运行 微件中的列表中选择它，然后点击其旁边的 。

   

6. 当第一个断点被触发时，切换到 调试工具窗口 并按常规方式继续： 逐步执行程序， 停止并恢复程序执行， 在挂起时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。

   要忽略源代码映射并逐步执行实际运行的代码，请在 调试 工具窗口的工具栏上点击 。

1. 在代码中设置 断点。

2. 启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。

3. 运行 工具窗口或 终端 会显示应用程序正在运行的 URL。 如果应用程序是使用 @angular/cli 生成的，默认 URL 为 http://localhost:4200/ 。 请按住 Ctrl+Shift 并点击此 URL 链接。 IntelliJ IDEA 启动了一个调试会话，使用了自动生成的 Angular 应用程序 类型为 JavaScript Debug 的配置。

   

   或者，从列表中选择自动生成的 Angular 应用程序 配置，然后点击列表旁边的 调试 按钮 。

   如果从 新终端 以开发模式启动了应用程序，只需点击链接旁边的 在浏览器中启动调试 按钮即可。

   

   默认情况下，不显示该按钮。 要显示该按钮，请打开 设置 对话框（Ctrl+Alt+S ），转到 高级设置 ，然后在 JavaScript 和 TypeScript 区域选择 在终端中为本地主机链接显示“在浏览器中开始调试”按钮 复选框。