# 运行并调试 React 应用程序

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

## 运行 React 应用程序

> **Note:**
> 仅适用于通过  `create-react-app` 创建的应用程序。

Procedure:

1. 点击 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)（位于  `start`  脚本旁的装订区域，该脚本在  `package.json`  中），或者执行  `npm run start`  命令（在   终端   `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)) 中），或者双击  `start`  任务（在 [npm 工具窗口](npm-tool-window.html)（  `查看 | 工具窗口 | npm` ）中）。

![从 package.json 中以开发模式运行 React 应用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_run_dev_mode_package_json.animated.gif)

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

运行   工具窗口或   终端   会显示应用程序正在运行的 URL。 如果您的应用是使用 create-react-app 生成的，那么默认的 URL 是  `http://localhost:3000/` 。 点击此链接查看应用程序。

![React 应用正在运行](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_debug_cra_app_is_running.png)

> **Tip:**
> 由于 [Webpack Hot Module Replacement](https://webpack.github.io/docs/hot-module-replacement.html)，当开发服务器正在运行时，您只要改变任一源文件并保存更新，您的应用程序就会自动重新加载。

### 通过运行/调试配置运行 React 应用程序

对于使用  `create-vite` 在IntelliJ IDEA   新建项目  向导中 [如上所述](react.html#creating_react_app_with_generators)创建的应用程序，IntelliJ IDEA会生成一个默认名称为   npm start  的 [npm](run-debug-configuration-npm.html)配置。 此配置会运行  `react-scripts start`  命令，该命令将启动开发服务器并以开发模式启动应用程序。

在其他情况下，您需要手动 [创建一个运行/调试配置](#react_running_and_debugging_run_via_rc_create_rc)，并设置实际的参数，如主机、端口等。

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

Procedure:

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

![打开编辑配置对话框](https://resources.jetbrains.com/help/img/idea/2026.3/react_run_config_create.png)

在打开的   编辑配置  对话框中，点击工具栏上的   添加  按钮（ !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)），然后从列表中选择   npm  。

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

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

![npm 运行/调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/react_debug_npm_rc.png)

3. 可选：

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

如果要调试应用程序，请选择 [Google Chrome](http://www.google.com/chrome/) 或其他 [基于 Chromium 的浏览器](https://www.chromium.org/)。

![Browser / Live Edit 选项卡：选择浏览器](https://resources.jetbrains.com/help/img/idea/2026.3/react_run_rc_browser_tab_select_browser.png)

#### 运行应用程序

Procedure:

1. 从工具栏上的列表中选择   npm start   运行配置，然后点击其旁边的 ![运行](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.execute.svg)。

![通过运行/调试配置在开发模式下运行 React 应用程序](https://resources.jetbrains.com/help/img/idea/2026.3/react_run_dev_mode.png)

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

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

![React 应用正在运行](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_debug_cra_app_is_running.png)

或者，启用 IntelliJ IDEA 以在启动时打开应用程序 [如上所述](#ws_react_start_app_in_dev_mode_enable_opening_browser)。

> **Note:**
> 当开发服务器正在运行时，您的应用程序会在您更改任意源文件并保存更新后自动重新加载。

## 调试 React 应用程序

> **Note:**
> React 应用程序的调试仅在 [Google Chrome](http://www.google.com/chrome/)和其他 [基于 Chromium 的浏览器](https://www.chromium.org/)中支持。

您可以通过 [启动运行/调试配置](#react_debug_with_rc)或 [从运行工具窗口](#react_debug_from_tw)，该窗口显示您的应用程序在开发模式下运行的 URL，开始调试会话。

### 通过运行/调试配置开始调试

要调试 React 应用程序，需要两个运行/调试配置：

* 在开发模式下启动应用程序的 npm 配置， [如上所述](#react_running_and_debugging_run)。

* 用于将调试器附加到以开发模式运行的应用程序的 JavaScript Debug 配置。

您可以在   JavaScript Debug  配置中创建一个   npm  配置，以便一次启动它们，如 [使用 npm 运行/调试配置运行和调试 React 应用程序](#react_debug_two_rc)中所述。

或者，分别创建并启动   npm   和   JavaScript Debug   运行/调试配置，如 [使用 JavaScript Debug 运行/调试配置开始调试](#react_debug_via_js_debug_rc) 中所述。

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

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

1. 在代码中设置 [断点](using-breakpoints.html)。

2. 创建   npm   配置， [如上所述](#react_running_and_debugging_run_via_rc_create_rc)。

如果您使用  `create-react-app`  生成了应用程序，IntelliJ IDEA 已经使用默认名称   npm start   创建了一个   npm   配置。 此配置可通过   运行  小部件或   运行/调试配置  对话框获得。

![自动生成的 npm run/debug 配置](https://resources.jetbrains.com/help/img/idea/2026.3/react_run_dev_mode.png)

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

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

![npm 运行/调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/react_debug_npm_rc.png)

4. 在   浏览器 / Live Edit   选项卡中，选中   在启动后   复选框，从列表中选择 [Google Chrome](http://www.google.com/chrome/) 或其他 [Chromium-based browser](https://www.chromium.org/)，选中   使用 JavaScript 调试器   复选框，然后指定您的应用程序将运行的 URL。

![npm 配置，浏览器标签](https://resources.jetbrains.com/help/img/idea/2026.3/react_debug_npm_rc_browser_tab.png)

5. 点击   运行  。

要重新运行该配置，请从   运行   微件中的列表中选择它，然后点击其旁边的 ![运行](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.execute.svg)。

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

![调试会话](https://resources.jetbrains.com/help/img/idea/2026.3/react_debug_npm_rc_debugging_session.png)

6. 当第一个断点被触发时，切换到 [调试工具窗口](debug-tool-window.html)并按常规方式继续： [逐步执行程序](stepping-through-the-program.html)， [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行， [在挂起时检查程序](examining-suspended-program.html)，探索调用堆栈和变量，设置监视，评估变量， [查看实际的 HTML DOM](viewing-actual-html-dom.html)，等等。

要忽略源代码映射并逐步执行实际运行的代码，请在   调试  工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。

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

Procedure:

1. 在代码中设置 [断点](using-breakpoints.html)。

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

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

![应用程序正在以开发模式运行](https://resources.jetbrains.com/help/img/idea/2026.3/react_debug_app_running_in_dev_mode.png)

3. 创建一个   JavaScript Debug  配置。 要执行此操作，请在主菜单中转到  `运行 | 编辑配置` ，点击 !["添加"图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)，然后从列表中选择   JavaScript 调试  。

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

![创建一个 JavaScript 调试配置：指定 URL](https://resources.jetbrains.com/help/img/idea/2026.3/react_debug_create_js_debug_rc.png)

5. 点击   调试  。

要重新运行该配置，请从   运行   微件中的列表中选择它，然后点击其旁边的 ![调试](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg)。

![从运行小部件运行 JavaScript Debug 配置](https://resources.jetbrains.com/help/img/idea/2026.3/react_debug_rerun_js_debug_rc.png)

6. 当第一个断点被触发时，切换到 [调试工具窗口](debug-tool-window.html)并按常规方式继续： [逐步执行程序](stepping-through-the-program.html)， [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行， [在挂起时检查程序](examining-suspended-program.html)，探索调用堆栈和变量，设置监视，评估变量， [查看实际的 HTML DOM](viewing-actual-html-dom.html)，等等。

要忽略源代码映射并逐步执行实际运行的代码，请在   调试  工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。

### 从 Run 工具窗口或内置 Terminal 开始调试

如果应用程序在  `本地主机`  上以开发模式运行，尤其是使用  `create-react-app`  生成的应用程序，可以直接从   运行   工具窗口或内置   终端   启动调试会话。

Procedure:

1. 在代码中设置 [断点](using-breakpoints.html)。

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

3. 运行   工具窗口或   终端   会显示应用程序正在运行的 URL。 按住 `Ctrl+Shift` (Windows), `Ctrl+Shift` (macOS), `Ctrl+Shift` (IntelliJ IDEA Classic (macOS)), `Ctrl+Shift` (macOS System Shortcuts), `Ctrl+Shift` (XWin), `Ctrl+Shift` (GNOME), `Ctrl+Shift` (KDE), `Ctrl+Shift` (Emacs), `Ctrl+Shift` (Sublime Text), `Ctrl+Shift` (Sublime Text (macOS)), `Ctrl+Shift` (Visual Studio), `Ctrl+Shift` (Visual Studio (macOS)), `Ctrl+Shift` (NetBeans), `Ctrl+Shift` (Eclipse), `Ctrl+Shift` (Eclipse (macOS)) 并点击此 URL 链接。 IntelliJ IDEA 将使用自动生成的    配置启动调试会话，该配置的类型为 [JavaScript Debug](run-debug-configuration-javascript-debug.html)。

![从运行工具窗口开始调试 React 应用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_start_debugging_from_run_tool_window.animated.gif)

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

![新终端：在浏览器中开始调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/ws_react_start_debugging_from_new_terminal_start_debugging_button.png)

默认情况下，不显示该按钮。 要显示该按钮，请打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `高级设置` ，然后在   JavaScript 和 TypeScript   区域选择   在终端中为本地主机链接显示“在浏览器中开始调试”按钮   复选框。

> **Note:**
> 该按钮在 WSL 中的   新终端   不可用。

当第一个断点被触发时，切换到 [调试工具窗口](debug-tool-window.html)并按常规方式继续： [逐步执行程序](stepping-through-the-program.html)， [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行， [在挂起时检查程序](examining-suspended-program.html)，探索调用堆栈和变量，设置监视，评估变量， [查看实际的 HTML DOM](viewing-actual-html-dom.html)，等等。

要忽略源代码映射并逐步执行实际运行的代码，请在   调试  工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。

## 已知限制

当您在调试会话期间第一次打开应用程序时，可能会发生代码在页面加载时执行的一些断点未被触发。 原因是若要在原始源代码中停在断点处，IntelliJ IDEA 需要从浏览器中获取 source maps。 然而，浏览器只能在页面至少完全加载一次后才能传递这些 source maps。 作为一种解决方法，您可以自己在浏览器中重新加载该页面。