# 配置 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 捆绑在一起并默认启用。 > **Note:** > JavaScript 代码的调试仅在 [Google Chrome](http://www.google.com/chrome/)和其他 [Chromium-based browsers](https://www.chromium.org/)中受支持。 IntelliJ IDEA 为 客户端 JavaScript 代码提供内置调试器。 内置调试器会在您 [启动调试会话](debugging-javascript-in-chrome.html#debugging_js_on_built_in_server)时自动启动。 为了确保调试成功，您只需指定内置 web 服务器端口并接受 IntelliJ IDEA 为其他调试器选项建议的默认设置。 ## 开始之前 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)。 ## 设置内置 web 服务器端口 Procedure: IntelliJ IDEA 具有内置 web 服务器，可用于在 web 浏览器中调试应用程序，或在 IntelliJ IDEA 内置浏览器中预览代码。 此服务器始终运行且不需要任何手动配置。 从 [调试在内置服务器上运行的应用程序](debugging-javascript-in-chrome.html#debugging_js_on_built_in_server)了解详情。 1. 按 `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)) 打开设置，然后选择 `工具 | Web Browsers 和预览` 。 2. 在 内置服务器 区域，指定内置 web 服务器运行的端口。 默认情况下，此端口设置为默认的 IntelliJ IDEA 端口 `63342` ，IntelliJ IDEA 通过该端口接受来自服务的连接。 您可以将端口号设置为从 1024 开始的任何其他值。 ![内置服务器端口](https://resources.jetbrains.com/help/img/idea/2026.3/js_debugger_built_in_server_port.png) ## 自定义默认调试器配置 ### 抑制调用 Procedure: 1. 按 `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)) 打开设置，然后转到 `工具 | Web Browsers 和预览` 。 2. 通过清除 可以接受外部连接 或 允许未签名请求 复选框，分别抑制来自其他计算机或 IntelliJ IDEA 外部的对内置服务器上文件的调用。 ![抑制外部调用](https://resources.jetbrains.com/help/img/idea/2026.3/js_debugger_suppress_external_calls.png) ### 选择删除断点的方式 Procedure: 默认情况下，可以通过点击鼠标左键切换断点。 要更改此行为： 1. 按 `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)) 打开设置，然后转到 `构建、执行、部署 | 调试器` 。 2. 在 删除断点 区域中，选择相应的选项。 ![移除断点](https://resources.jetbrains.com/help/img/idea/2026.3/ij_js_debugger_remove_breakpoints.png) ### 指定要跳过的脚本 某些脚本（例如标准 Java 类的方法，如 `系统` ）会被 步入 跳过，因为通常可能不需要调试它们。 您可以在 `构建、执行、部署 | 调试器 | 单步调试` 页面的 设置 对话框中（ `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))）微调此列表。 Procedure: 1. 打开运行/调试配置以启动调试会话，并切换到 步进 选项卡。 2. 要禁止自动 智能步入 ，请清除 始终使用智能步入 复选框。 3. 要跳过源代码映射的 `ignoreList` 字段中的脚本，请选中 忽略源代码映射中指定的已知第三方脚本 复选框。 较旧的 Chrome 专用字段名称 `x_google_ignoreList` 已弃用，但当缺少 `ignoreList` 字段时，仍可能被识别。 从 [源代码映射规范](https://tc39.es/ecma426/#sec-source-map-format) 中了解详情。 4. 要禁止步进进入自定义脚本，请选中 不步入 URL 与以下模式匹配的脚本 复选框，并展开下面此类脚本的默认列表。 使用 `*` 、 `?` 、 `**` 和 `!` 。 ![JavaScript 调试器：跳过脚本](https://resources.jetbrains.com/help/img/idea/2026.3/js_debugger_stepping.png) #### 模式语法 模式中支持以下字符： * 星号 `*` 会匹配除斜杠 `/` 以外的零个或多个字符。 在单个路径部分内使用此字符。 * 问号 `?` 会匹配除斜杠 `/` 以外的正好一个字符。 * 双星号 `**` 作为整个段时，会匹配零个或多个路径段。 其含义取决于它的位置： * 作为第一部分时，它会匹配任意前导符号。 * 作为最后一部分时，它会匹配任意尾随符号。 * 在中间时，它会匹配一个或多个部分。 例如， `a/**/b` 会匹配 `a/x/b` 和 `a/x/y/b` ，但不匹配 `a/b` 。 * 位于最后一个段末尾的尾随双星号 `**` （本身不是一个完整段，例如 `foo**` ）会匹配该段之后的任何后缀。 例如， `foo**` 会匹配 `foo` 、 `foobar` 和 `foo/bar` 。 * 以感叹号 `!` 开头的模式会对给定模式取反，并修改列表中在它之前添加的模式。 它本身不会添加新模式。 示例 1 : 在模式列表 `["**/*.ts", "!**/*.test.ts"]` 中，第一个 glob 会匹配每个 `.ts` 文件。 第二个模式会修改第一个 glob，以从匹配中排除每个 `.test.ts` 文件。 示例 2 : 传入的 URL 会通过斜杠 `/` 拆分为多个部分。 因此， `**/node_modules/**` 会按如下方式拆分:: : : : : 1. 双星号 `**` 会匹配 `node_modules` 段之前的任何路径。 : : 2. `node_modules` 会匹配 URL 中的 `node_modules` 。 : : 3. 双星号 `**` 会匹配后面的任何内容。 : : : : 因此，模式 `**/node_modules/**` 会匹配包含 `node_modules` 的任何 URL。 : : : : 请记住，脚本的 URL 会与整个模式进行匹配。 如果移除第二个双星号 `**` ，该模式将匹配任何以 `node_modules` 结尾的 URL，而这样的 URL 可能为零。 示例 3 : 跳过第二个双星号 `**` ，以匹配以特定文件名结尾的任何模式。 : : : : * `**/app.js` 会匹配所有以 `app.js` 结尾的 URL。 : : * 以下模式列表将忽略 `node_modules` 中除名称为 `app.js` 的脚本之外的所有脚本。 ``` **/node_modules/** !**/app.js ``` ### 高级选项 Procedure: * 按 `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)) 打开设置，然后转到 `生成、执行、部署 | 调试器 | 数据视图` 。 启用或禁用 [内联调试](examining-suspended-program.html#inline-view)，指定何时查看带有对象值和 [表达式计算结果](examining-suspended-program.html#evaluating-expressions)的工具提示等。 ![JavaScript 调试器：数据视图](https://resources.jetbrains.com/help/img/idea/2026.3/js_debugger_data_views.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` 。 指定是否在对象节点中显示对象属性。 如果是这样，指定属性。 请使用 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg) 和 ![](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.remove.svg) 来管理属性列表。 ![对象节点上显示的属性](https://resources.jetbrains.com/help/img/idea/2026.3/js_debugger_object_node.png) ## 使用首选的 Chrome 用户数据启动调试会话 可能会注意到，调试会话会在新窗口中启动，并使用自定义 [Chrome 用户数据](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md)，而不是平时使用的用户数据。 因此，窗口看起来很不寻常，例如您的书签、浏览器历史记录和扩展都消失了，这会完全破坏您的开发体验。 因为 IntelliJ IDEA 使用 [Chrome 调试协议](https://nodejs.org/api/debugger.html#debugger_v8_inspector_integration_for_node_js) 并使用 `--remote-debugging-port` 选项运行 Chrome。 但是，如果 Chrome 已经启动，则无法为具有相同用户数据目录的任何新建或现有 Chrome 实例打开调试端口。 因此，IntelliJ IDEA 始终会在新窗口中使用自定义用户数据目录启动调试会话。 要打开一个具有熟悉外观与感觉的新 Chrome 实例，请在 IntelliJ IDEA 中配置 Chrome 以使用用户数据目录启动。 > **Note:** > 在这种情况下，启动调试会话之前，请始终确保 Chrome 尚未使用用户数据目录运行。 否则，Chrome 会在现有进程中使用用户数据目录打开新标签页，因此 IntelliJ IDEA 调试器无法连接到应用程序，调试会话也不会启动。 ![自定义 Chrome 用户数据](https://resources.jetbrains.com/help/img/idea/2026.3/js_debugger_custom_chrome_user_data.animated.gif) Procedure: 在 IntelliJ IDEA 中配置 Chrome 以使用首选的 Chrome 用户数据启动 1. 将首选的 [Chrome 用户数据](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md)保存在计算机上的 不同于 [Chrome 默认用户数据目录](https://chromium.googlesource.com/chromium/src/+/main/docs/user_data_dir.md#Default-Location)的单独自定义目录 中。 需要将首选用户数据保存在单独的自定义目录中，因为 Chrome 136 及更高版本不支持在默认用户目录中进行调试。 从 [Chrome 官方网站](https://developer.chrome.com/blog/remote-debugging-port)了解详情。 2. 按 `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)) 打开设置，然后选择 `工具 | Web Browsers 和预览` 。 3. 要创建新的 Chrome 配置，请点击 ![添加](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)。 列表中出现了一个新项。 在 路径 字段中，指定 Chrome 安装文件夹的路径。 4. 选择新配置并点击 编辑 按钮( ![编辑](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.edit.svg))。 5. 在 Chrome 设置 对话框中，选择 使用自定义用户数据目录 复选框，并指定包含首选用户数据的自定义目录的路径。 如果您有多个 [用户数据配置文件](https://support.google.com/chrome/answer/2364824)，它们中的每一个都存储在一个单独的子目录中。 要使用某个配置文件，请在 命令行选项 字段中按如下方式指定： ```BASH --profile-directory="" ``` ![指定自定义配置文件子目录](https://resources.jetbrains.com/help/img/idea/2026.3/调试配置](debugging-javascript-in-chrome.html#create_js_debug_configuration)时。 > **Tip:** > 或者，始终从 浏览器 列表中选择此 Chrome 浏览器配置。 ## See also ### 过程 [调试代码](debugging-code.html) [调试工具窗口](debug-tool-window.html) ### 参考 [运行/调试配置：JavaScript 调试](run-debug-configuration-javascript-debug.html)