运行并调试 Angular 应用

创建 npm 运行/调试配置

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

   

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

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

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

   

3. 可选：

   要在浏览器中打开应用，请按以下方式更新配置：在 浏览器 / 实时编辑 选项卡中，勾选 启动后 复选框，选择用于打开应用的浏览器，并指定应用将运行的 URL 地址。

   如果您打算调试应用，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。

   

运行应用

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

2. 单击 。

   

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

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

   

   或者，启用 WebStorm 以在启动时打开应用， 如上所述。

使用单个 npm 运行/调试配置运行并调试 Angular 应用

1. 在代码中设置 断点。

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

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

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

   

4. 在 浏览器 / 实时编辑 选项卡中，选中 启动后 复选框，从列表中选择 Google Chrome 或其他 基于 Chromium 的浏览器 ，选中 使用 JavaScript 调试器 复选框，然后指定应用程序将运行的 URL。

   

5. 单击 运行。

   要重新运行该配置，请在 运行 小部件中的列表中选择它，然后单击其旁边的 。

   WebStorm 会以开发模式运行应用程序，并同时启动调试会话。

   

6. 程序在命中第一个断点时，切换到 调试工具窗口 ，然后按常规方式继续操作： 单步执行程序、 暂停并恢复程序执行、 在暂停时检查程序 、探索调用栈和变量、设置监视、计算变量、 查看实际 HTML DOM 等。

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

1. 在代码中设置 断点。

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

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

   

3. 创建一个 JavaScript 调试 配置。 为此，请在主菜单中转到 运行 | 编辑配置 ，单击 ，然后从列表中选择 JavaScript 调试。

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

   

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

   

5. 单击 调试。

   要重新运行该配置，请在 运行 小部件中的列表中选择它，然后单击其旁边的 。

   

6. 当第一个断点被触发时，切换到 调试工具窗口 ，然后照常进行操作： 逐步执行程序、 暂停和恢复程序执行、 在程序暂停时进行检查 ，探索调用堆栈和变量，设置监视，计算变量值， 查看实际 HTML DOM等。

1. 在代码中设置 断点。

2. 以 上述方式在开发模式中启动应用，并等待应用编译完成以及开发服务器准备就绪。

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

   

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

   如果您是从 New Terminal 中以开发模式启动的应用，只需点击链接旁的 在浏览器中开始调试 按钮。