运行和调试 React 应用程序.

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

   

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

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

   在 Command 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 通常会使用默认的 start 脚本，但您可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用程序。

   

3. 可选：

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

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

   

1. 在工具栏的列表中选择 npm start 运行配置，并点击其旁边的 。

   

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

   运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 点击此链接以查看应用。

   

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

使用单个 npm 运行/调试配置运行并调试 React 应用程序

1. 设置 断点 在您的代码中。

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

   如果您使用 create-react-app 生成了应用程序， PyCharm 已经创建了一个默认名称为 npm start 的 npm 配置。 该配置可从 运行 小部件以及 运行/调试配置 对话框中使用。

   

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

   在 Command 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 通常会使用默认的 start 脚本，但您可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用程序。

   

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

   

5. 单击 运行。

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

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

   

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

1. 设置 断点 在您的代码中。

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

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

   

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

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

   

5. 单击 调试。

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

   

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