# 在 Chrome 中调试 JavaScript > For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt). > **TL;DR** > 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。 > > > > 所需插件 : > > > > `JavaScript 和 TypeScript` 、 `JavaScript Debugger` - 插件与 IntelliJ IDEA 捆绑在一起并默认启用。 IntelliJ IDEA 为 客户端 JavaScript 代码提供内置调试器。 > **Note:** > JavaScript 代码的调试仅在 [Google Chrome](http://www.google.com/chrome/)和其他 [Chromium-based browsers](https://www.chromium.org/)中受支持。 以下是一些指导，帮助您开始使用这个调试器的基本步骤。 ## 开始之前 Procedure: 1. 请确保在设置中已启用 JavaScript and TypeScript 捆绑插件。 按 `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 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。 2. 请确保在设置中已启用 JavaScript 调试器 捆绑插件。 按 `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 调试器 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。 3. 按照 [配置 JavaScript 调试器](configuring-javascript-debugger.html)中的描述配置内置调试器。 要在不重新加载页面的情况下，将对 HTML、CSS 或 JavaScript 代码所做的更改立即显示在浏览器中，请启用 Live Edit 功能性。 有关实时编辑功能性的更多信息，请参阅 [在 HTML、CSS 和 JavaScript 中实时编辑](live-editing.html)。 ## 调试正在内置服务器上运行的应用程序 IntelliJ IDEA 具有内置 web 服务器，可用于在 web 浏览器中调试应用程序，或在 IntelliJ IDEA 内置浏览器中预览代码。 此服务器始终运行且不需要任何手动配置。 Procedure: 开始调试 1. 根据需要在 JavaScript 代码中设置 [断点](using-breakpoints.html)。 2. 打开引用 JavaScript 进行调试的 HTML 文件或在 [项目工具窗口](project-tool-window.html)中选择 HTML 文件。 3. 从编辑器或选定内容的上下文菜单中选择 调试 。 IntelliJ IDEA 生成调试配置，并通过它启动调试会话。 文件将在浏览器中打开，并且 [调试工具窗口](debug-tool-window.html) 会出现。 > **Tip:** > 要保存自动生成的配置以便以后重复使用，请在调试会话结束后从上下文菜单中选择 保存 。 4. 在打开的 调试 工具窗口中，按常规操作： [逐步执行程序](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)。 > **Tip:** > 默认情况下，调试会话会在带有自定义 [Chrome 用户数据](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md) 的新窗口中启动。 要打开一个具有熟悉外观与感觉的新 Chrome 实例，请在 IntelliJ IDEA 中配置 Chrome，使其使用用户数据启动。 如需更多信息，请参阅 [使用默认 Chrome 用户数据启动调试会话](configuring-javascript-debugger.html#ws_js_debug_default_chrome_user_data)。 ### 示例 假设有一个简单的应用程序，由一个 `debug_from_run.html` 文件和一个 `debug_from_run.js` 文件组成，其中 `debug_from_run.html` 引用 `debug_from_run.js` 。 要使用内置服务器开始调试此应用程序，请在 `debug_from_run.js` 中设置断点，在编辑器中打开 `debug_from_run.html` ，然后从上下文菜单中选择 `调试"debug_from_run.html"` 。 ![从编辑器开始调试会话](https://resources.jetbrains.com/help/img/idea/2026.3/ws_quick_start_debug_built_in_server_1_706.png) IntelliJ IDEA 会自动创建一个 运行/调试配置 ，然后调试会话开始。 ![调试会话开始，应用程序在浏览器中打开](https://resources.jetbrains.com/help/img/idea/2026.3/ws_quick_start_debug_built_in_server_2.png) 要重新启动新的运行/调试配置，请从列表中选择它，然后点击 ![调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg)。 ![重新启动调试会话](https://resources.jetbrains.com/help/img/idea/2026.3/ws_quick_start_debug_built_in_server_3.png) ### 在浏览器中重新加载当前页面 除了通过点击 重新运行 按钮( ![重新运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.restart.svg))在 调试 工具窗口中重新启动您的应用程序，您还可以使用 在浏览器中重新加载 操作重新加载您当前导航到的页面。 这与 Chrome 中的 重新加载页面 功能( `Ctrl+R` (Windows), `⌘ R` (macOS), `⌘ R` (IntelliJ IDEA Classic (macOS)), `⌘ R` (macOS System Shortcuts), `Ctrl+R` (XWin), `Ctrl+R` (GNOME), `Ctrl+R` (KDE), `Alt+Shift+5` (Emacs), `Ctrl+H` (Sublime Text), `⌘ ⌥ F` (Sublime Text (macOS)), `Ctrl+H` (Visual Studio), `⌃ H` (Visual Studio (macOS)), `Ctrl+H` (NetBeans), `Ctrl+F` (Eclipse), `Ctrl+R` (Eclipse (macOS)))的工作方式相同。 Procedure: * 要重新加载当前页面，请点击工具栏上的 ![更多图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.more.svg)并选择 在浏览器中重新加载 ( ![在浏览器中重新加载](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.refresh.svg))。 ![在浏览器中重新加载操作](https://resources.jetbrains.com/help/img/idea/2026.3/ws_debug_reload_in_browser_action.png) 下面的示例展示了一个由两个 HTML 页面和一个 JavaScript 脚本组成的简单应用程序。 起始 `home.html` 页面上有一个 提交 按钮，点击该按钮后， `calculator.html` 页面将打开，显示 `Calculator.js` 脚本执行的结果。 调试会话期间，点击 重新运行 按钮( ![重新运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.restart.svg))将使用 提交 按钮重新加载 `home.html` 页面。 点击 在浏览器中重新加载 按钮( ![浏览器中重新加载按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.refresh.svg))会重新加载 `calculator.html` 页面，从而清除所有先前的脚本输出，并且调试器返回到 `Calculator.js` 的第 1 行。 ![在浏览器中重新加载当前页面](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_debug_reload_in_browser.animated.gif) ## 调试运行在开发模式下 localhost 上的应用程序 如果您的应用程序在 `本地主机` 的开发模式下运行，您可以从内置的 终端 （ `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))），从 [运行工具窗口](run-tool-window.html)或从 [调试工具窗口](debug-tool-window.html)开始调试。 只需按住 `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。 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_start_debugging_from_run_tool_window.mp4) Procedure: 1. 在代码中设置 [断点](using-breakpoints.html)。 2. 在开发模式下启动应用程序，例如，使用 npm 脚本。 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)。 如果从 [新终端](terminal-emulator.html) 以开发模式启动了应用程序，只需点击链接旁边的 在浏览器中启动调试 按钮即可。 ![新终端：在浏览器中开始调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_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 中的 新终端 不可用。 这同样适用于调试 [Vue.js](vue-js.html#vue_running_and_debugging_debug)、 [Angular](run-and-debug-angular-applications.html#angular_running_and_debugging_debug)、 [React](run-and-debug-react-applications.html#react_running_and_debugging_debug) 和 [Node.js](running-and-debugging-node-js.html#ws_node_debug_from_run_tw) 应用程序。 ## 调试运行在远程 Web 服务器上的应用程序 您可能经常需要调试在外部开发 Web 服务器上运行的应用程序的客户端 JavaScript。 ### 什么是远程 Web 服务器？ 在 IntelliJ IDEA 中，任何 document root 位于当前项目之外的服务器都称为 remote 。 该服务器可能实际上运行在物理远程主机或您的机器上。 例如，如果您的项目位于 `C:/%instance%Projects/MyProject` ，而网络服务器文档根目录是 `C:/XAMPP/htdocs` ，那么对于 IntelliJ IDEA 来说，该网络服务器就是 remote 。 ### 如何将服务器上的应用程序源代码与 IntelliJ IDEA 项目中的本地副本同步？ 在 远程 Web 服务器上调试应用程序时，您需要在 一个 IntelliJ IDEA 项目中拥有其源代码的副本。 要同步本地和远程源，请创建 部署配置 ，如 [创建远程服务器配置](creating-a-remote-server-configuration.html) 和 [连接到 Web 服务器](configuring-synchronization-with-a-remote-host.html) 中所述。 Procedure: 在远程 Web 服务器上调试应用程序 1. 根据需要在 JavaScript 代码中设置 [断点](using-breakpoints.html)。 2. 创建一个 JavaScript Debug 类型的运行/调试配置： 转到 `运行 | 编辑配置` ，然后在 编辑配置 对话框中，在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（ !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)），并从列表中选择 JavaScript Debug 。 3. 在 [运行/调试配置：JavaScript 调试](run-debug-configuration-javascript-debug.html)对话框中，指定应用程序运行的 URL 地址。 该 URL 地址应为 Web 服务器根 URL 与 HTML 文件相对于 Web 服务器文档根目录的路径拼接而成，并符合 服务器访问配置 。 如需更多信息，请参阅 [连接到 Web 服务器](configuring-synchronization-with-a-remote-host.html)。 点击 OK 保存配置设置。 4. 在工具栏上的 选择运行/调试配置 列表中选择新创建的配置，然后点击 调试 按钮 ![启动调试器](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg)。 在运行配置中指定的 HTML 文件会在选择的浏览器中打开，并会显示 [Debug 工具窗口](debug-tool-window.html)。 5. 在打开的 调试 工具窗口中，按常规操作： [逐步执行程序](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)。 > **Tip:** > 默认情况下，调试会话会在带有自定义 [Chrome 用户数据](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md) 的新窗口中启动。 要打开一个具有熟悉外观与感觉的新 Chrome 实例，请在 IntelliJ IDEA 中配置 Chrome，使其使用用户数据启动。 如需更多信息，请参阅 [使用默认 Chrome 用户数据启动调试会话](configuring-javascript-debugger.html#ws_js_debug_default_chrome_user_data)。 ### 示例：无需映射进行调试 假设您有一个简单的应用程序，它由一个 `index.html` 文件和一个 `App.js` 文件组成，其中 `index.html` 引用 `App.js` 。 Procedure: 1. 现在让我们将简单的应用程序部署到本地 Web 服务器，请参阅 [将文件部署到服务器](deploying-applications.html)。 在以下示例中，它是 Apache： ![在外部 Web 服务器上调试 JavaScript：远程主机上的已上传源码](https://resources.jetbrains.com/help/img/idea/2026.3/ws_quick_start_debug_external_server_0.png) 2. 当使用本地 Web 服务器，例如 Nginx 或 Apache（如本例所示），或者 Web 服务器在远程主机上时，您需要创建一个 Run/Debug 配置来启动 JavaScript 调试器。 要执行该操作，请点击 IntelliJ IDEA 窗口右上角的列表，然后选择 编辑配置 。 或者，从主菜单中选择 `运行 | 编辑配置` ： ![在外部 web 服务器上调试 JavaScript：打开 编辑配置 对话框](https://resources.jetbrains.com/help/img/idea/2026.3/ws_quick_start_debug_external_server_1.png) 在 运行/调试配置 对话框中，点击 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)并从列表中选择 JavaScript Debug ： ![创建 JavaScript 调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_quick_start_debug_external_server_2.png) 指定您正在运行的应用程序的 URL，在我们的示例中是 `http://localhost:8888/MySimpleApp/index.html` ![运行您的应用程序的 URL](https://resources.jetbrains.com/help/img/idea/2026.3/ws_quick_start_debug_external_server_3.png) 在我们的示例中，本地项目结构与服务器上的文件结构相同，因此不需要映射。 3. 现在我们可以开始调试了：从 IntelliJ IDEA 窗口右上角的列表中选择新的运行/调试配置，然后点击 ![调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg): ![编辑器、主菜单和工具栏](https://resources.jetbrains.com/help/img/idea/2026.3/ws_quick_start_debug_external_server_4.png) 在打开的 调试 工具窗口中，按常规操作： [逐步执行程序](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)。 ### 映射 Mappings 设定了 Web 服务器上的文件与其本地副本之间的对应关系。 您需要 mappings: * 当您的应用程序部署并在 remote Web 服务器上运行时。 * 当您定义了多个资源根文件夹（除了项目根目录之外）。 IntelliJ IDEA 尝试根据 部署配置 或基于文件和脚本名称及内容来猜测路径映射。 但是，如果您的应用程序结构复杂，则需要手动指定路径映射。 Procedure: 配置映射 1. 创建一种类型为 JavaScript Debug 的调试配置，如在 [调试应用程序](#create_js_debug_configuration) 中所述。 2. 在 本地文件的远程 URL 区域中，根据当前使用的 部署配置 ，将文件和文件夹映射到服务器上文件和文件夹的 URL 地址，请参阅 [将本地文件夹映射到服务器上的文件夹并访问它们的 URL 地址](creating-a-remote-server-configuration.html#mapping)。 #### 示例：启动调试 (mapping) 假设出于某种原因，决定更改 [上一个示例](#ws_js_debug_on_remote_server_example)中应用程序的文件夹结构，并将 `index.html` 和 `App.js` 移动到单独的文件夹 `src` 中。 ![本地文件夹的结构与远程 Web 服务器上的文件夹结构不同](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_debug_on_remote_server_example_mappings_1.png) 由于本地源代码与网页服务器上的应用程序结构不同，调试器将无法将本地源代码与实际执行的代码同步。 为了解决这个问题，让我们将应用程序根目录的 URL 地址映射到 `src` 文件夹。 Procedure: 1. 开始创建运行/调试配置 [如上所述](#ws_js_debug_on_remote_server_example_create_run_debug_config)。 2. 在 运行/调试配置 对话框中，点击 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)在 本地文件的远程 URL 区域。 3. 在打开的对话框中，选择 `src` 文件夹下的 `MySimpleApp` 。 4. 在 远程 URL 字段中，输入应用程序的 URL 地址，我们的示例中是 `http://localhost:8888/MySimpleApp` ![URL 映射](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_debug_on_remote_server_example_mappings_2.png) 5. 保存运行/调试配置并按照 [上述说明](#ws_js_debug_on_remote_server_example_start_debugging)启动。 如需更多调试示例，请参考 WebStorm 博客中的以下文章： [调试 React 应用程序](https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/)和 [调试 Angular 应用程序](https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/)。 ## 在 Code with Me 会话中调试 也可以在 [Code with Me](code-with-me.html) 会话期间开始调试。 无论是作为 主机 还是 客户端 ，浏览器都会在启动调试会话的一方打开。 ## 调试异步代码 IntelliJ IDEA 支持调试异步客户端 JavaScript 代码。 IntelliJ IDEA 能识别异步代码中的断点，停在断点处，并允许您逐步进入此类代码。 一旦异步函数中的断点被触发，或者您进入异步代码， `异步调用自 ` 会在 帧 面板的 调试器 选项卡中添加一个新元素。 IntelliJ IDEA 会显示完整的调用堆栈，包括调用者以及到异步操作开始位置的完整路径。 ![调试异步 JavaScript 代码](https://resources.jetbrains.com/help/img/idea/2026.3/ws_debug_tool_window_async.animated.gif) 在上面的示例中，调试器会在第 3 行（断点）处停止，然后在第 5 行（断点）处停止。 点击 步入 时，调试器将在 line5 处（在 `函数` 上）停止，然后移至 line6。 默认情况下启用异步调试模式。 若要禁用异步堆栈跟踪，请在 Registry 中设置 `js.debugger.async.call.stack.depth` 为 `0` 。 ## 调试 workers IntelliJ IDEA 支持调试 [Service Workers](https://www.w3.org/TR/service-workers/)和 [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)。 IntelliJ IDEA 会识别每个 worker 中的断点，并在 [调试工具窗口](debug-tool-window.html) 的 调试器 选项卡的 帧 窗格中将其作为单独的线程显示调试数据。 请注意，IntelliJ IDEA 只能调试 [专用工作者](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers)，目前不支持调试 [共享工作者](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Shared_workers)。 Procedure: 1. 在 [断点](using-breakpoints.html)中设置 Workers 进行调试。 2. 如果您正在使用 Service Workers ，请确保在 允许未签名请求 复选框选中 `设置| 构建、执行、部署 | 调试器` 的 [调试器](settings-debugger.html)页面上。 否则，您的 service workers 可能在调试会话期间不可用。 3. 如上所述，在 JavaScript Debug 类型中创建一个调试配置，见 [调试在外部 Web 服务器上运行的客户端 JavaScript](#create_js_debug_configuration)。 4. 在工具栏的 运行 小部件列表中，选择新创建的 配置，然后点击其旁边的 ![调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg)。 运行配置中指定的 HTML 文件将在浏览器中打开，并且 [调试工具窗口](debug-tool-window.html)会打开，其中显示了 帧 所有可用 Workers 的列表： ![调试 Service Workers](https://resources.jetbrains.com/help/img/idea/2026.3/Chrome](run-debug-configuration-node-js-remote-debug.html) 类型的运行/调试配置调试 Chrome 扩展。 请注意，您需要使用 [自定义 Chrome 用户数据配置文件](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md) 启动 Chrome，了解更多信息请参阅 [使用首选的 Chrome 用户数据启动调试会话](configuring-javascript-debugger.html#ws_js_debug_default_chrome_user_data)。 Procedure: 创建 Attach to Node.js/Chrome 运行/调试配置 1. 前往 `运行 | 编辑配置` 。 或者，在工具栏上的 运行 小部件中选择 编辑配置 。 ![打开编辑配置对话框](https://resources.jetbrains.com/help/img/idea/2026.3/ws_node_run_config_create.png) 在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（ !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)），然后从列表中选择 附加到 Node.js/Chrome 。 ![选择“Attach to Node.js /Chrome”配置类型交付情況：已完成。 ](https://resources.jetbrains.com/help/img/idea/2026.3/Chrome](run-debug-configuration-node-js-remote-debug.html) 对话框。 2. 指定配置名称并接受预定义的主机和端口值 `localhost:9229` 。 > **Note:** > 如果您指定了自定义端口，请确保稍后在从命令行运行 Chrome 时指定它。 ![创建 Attach to Node.js/Chrome 运行/调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_debug_extension_create_run_config.png) 3. 点击 应用 和 OK 以保存配置并退出对话框。 Procedure: 运行 Chrome 并加载扩展 1. [从命令行运行 Chrome](https://www.chromium.org/developers/how-tos/run-chromium-with-flags/) 以指定远程调试端口和 [您的 Chrome 用户数据目录](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md)。 打开你的命令行 shell 或嵌入式 终端 （ `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))），然后输入： ```SHELL  --remote-debugging-port= --user-data-dir= ``` > **Note:** > 预定义的端口是 `9229` 。 2. [加载您的未打包扩展](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked) 到打开的 Chrome 窗口中。 Procedure: 开始调试 1. [设置断点](using-breakpoints.html) 所需的位置。 2. 在工具栏的 运行 小部件列表中，选择新创建的 附加到 Node.js/Chrome 配置，然后点击其旁边的 ![调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg)。 ![选择 Attach to Node.js/Chrome 配置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_js_debug_extension_select_run_config.png) [调试工具窗口](debug-tool-window.html)打开。 3. 转到加载了扩展的 Chrome 标签页。 4. 切换到 IntelliJ IDEA。 在 调试 工具窗口中， [逐步执行断点](stepping-through-the-program.html)，切换帧，动态更改值， [检查挂起的程序](examining-suspended-program.html)， [评估表达式](examining-suspended-program.html#evaluating-expressions)，并 [设置监视](examining-suspended-program.html#watches)。 ## See also ### 过程 [调试代码](debugging-code.html) [Debug tool window](debug-tool-window.html) ### 参考 [运行/调试配置：JavaScript 调试](run-debug-configuration-javascript-debug.html)