PyCharm 2026.3 Help

配置 JavaScript 调试器

PyCharm 为您的 客户端 JavaScript 代码提供内置调试器。 当您 启动调试会话 时,内置调试器会自动启动。

为确保调试成功,只需指定内置 Web 服务器端口,并接受 PyCharm 为其他调试器选项建议的默认设置。

在开始之前

  1. 请确保在设置中启用 JavaScript 和 TypeScript 捆绑插件。 按 Ctrl+Alt+S 打开设置,然后选择 插件。 在搜索字段中,键入 JavaScript 和 TypeScript。 有关插件的更多信息,请参阅 管理插件。

  2. 安装并启用 JavaScript 调试器 插件,在 设置 | 插件 页面上进行,如 从 JetBrains Marketplace 安装插件 中所述。 该插件仅在 PyCharm 专业版中提供。

设置内置 Web 服务器端口

PyCharm 具有一个内置 Web 服务器,可用于在 Web 浏览器中调试您的应用程序,或在 PyCharm 的内置浏览器中预览您的代码。 该服务器始终运行且无需手动配置。 了解详情,请参阅 调试在内置服务器上运行的应用程序。

  1. 按下 Ctrl+Alt+S 以打开设置,然后选择 工具 | Web 浏览器和预览。

  2. 在 内置服务器 区域,指定内置 Web 服务器运行的端口。 默认情况下,此端口设置为默认的 PyCharm 端口 63342 ,PyCharm 通过该端口接受来自服务的连接。 您可以将端口号设置为从 1024 开始的任意其他值。

    内置服务器端口

自定义默认调试器配置

抑制调用

  1. 通过按 Ctrl+Alt+S 打开设置,并导航到 工具 | Web 浏览器和预览。

  2. 分别清除 可以接受外部连接 或 允许未签名的请求 复选框,以抑制来自其他计算机或 PyCharm 外部对内置服务器上文件的调用。

    抑制外部调用

选择移除断点的方式

默认情况下,您可以通过点击鼠标左键切换断点。 要更改此行为:

  1. 通过按 Ctrl+Alt+S 打开设置,并导航到 构建、执行、部署 | 调试器。

  2. 在 移除断点 区域,选择相应的选项。

    移除断点

指定要跳过的脚本

某些脚本会被 步入 跳过,因为通常不需要对它们进行调试。 您可以在 设置 对话框(Ctrl+Alt+S )的 构建、执行、部署 | 调试器 | 单步执行 页面上微调此列表。

  1. 打开运行/调试配置以启动调试会话并切换到 步进 选项卡。

  2. 要禁止自动 智能步入 ,请清除 始终执行智能步入 复选框。

  3. 要跳过源代码映射的 ignoreList 字段中的脚本,请选中 忽略源代码映射中指定的已知第三方脚本 复选框。

    较旧的 Chrome 专用字段名称 x_google_ignoreList 已弃用,但在缺少 ignoreList 字段时可能仍会被识别。 从 源代码映射规范了解详情。

  4. 要禁止步入自定义脚本,请选中 不要步入 URL 与以下模式匹配的脚本 复选框,并展开下方此类脚本的默认列表。 使用 *、 ?、 ** 和 !。

    JavaScript 调试器:跳过脚本

模式语法

模式中支持以下字符:

  • 星号 * 匹配除斜杠 / 以外的零个或多个字符。 请在单个路径部分内使用此字符。

  • 问号 ? 精确匹配除斜杠 / 以外的一个字符。

  • 作为完整段的双星号 ** 匹配零个或多个路径段。 其含义取决于其位置:

    • 作为第一部分时,它匹配任意前导符号。

    • 作为最后一部分时,它匹配任意尾随符号。

    • 在中间时,它匹配一个或多个部分。 例如, 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

高级选项

  • 通过按 Ctrl+Alt+S 打开设置,并导航到 构建、执行、部署 | 调试器 | 数据视图。

    启用或禁用 内联调试 ,指定何时显示包含对象值和 表达式计算结果 的工具提示等。

    JavaScript 调试器:数据视图
  • 通过按 Ctrl+Alt+S 打开设置,并导航到 构建、执行、部署 | 调试器 | 数据视图。

    指定是否要在对象节点中显示对象属性。 如果需要,请指定这些属性。 使用 和 管理属性列表。

    要在对象节点上显示的属性

使用您偏好的 Chrome 用户数据启动调试会话

您可能会注意到,您的调试会话在一个新窗口中启动,使用的是自定义的 Chrome 用户数据 ,而不是您常用的那一份。 因此,该窗口看起来与平时不同,例如,您的书签、浏览器历史记录和扩展程序都不见了,这会破坏您的开发体验。 出现这种情况是因为 PyCharm 使用 Chrome 调试协议 ,并使用 --remote-debugging-port 选项运行 Chrome。 但是,如果 Chrome 已经启动,则无法为具有相同用户数据目录的任何新的或现有的 Chrome 实例打开调试端口。 因此,PyCharm 始终在新窗口中使用自定义用户数据目录启动调试会话。

若要打开具有您熟悉的外观与感觉的新 Chrome 实例,请在 PyCharm 中配置 Chrome 以使用您的用户数据目录启动。

自定义 Chrome 用户数据

在 PyCharm 中配置 Chrome 以使用您偏好的 Chrome 用户数据启动

  1. 将您首选的 Chrome 用户数据 保存到计算机上的 与 Chrome 默认用户数据目录 不同的单独自定义目录 中。

    您需要将偏好的用户数据保存在单独的自定义目录中,因为 Chrome 136 及更高版本不支持在默认用户目录中进行调试。 了解详情,请参阅 Chrome 官方网站。

  2. 按下 Ctrl+Alt+S 以打开设置,然后选择 工具 | Web 浏览器和预览。

  3. 要创建新的 Chrome 配置,点击 添加。 列表中会出现一个新条目。 在 路径 字段中,指定 Chrome 安装文件夹的路径。

  4. 选择新配置,然后点击 编辑 按钮(编辑)。

  5. 在 Chrome 设置 对话框中,选中 使用自定义用户数据目录 复选框,并指定包含您首选用户数据的自定义目录路径。

    如果您有多个 用户数据配置文件 ,每个都存储在单独的子目录中。 要使用某个配置文件,请在 命令行选项 字段中按如下所示指定:

    --profile-directory="<profile_to_use>"
    指定自定义用户配置文件的子目录
  6. 按照 选择默认的 PyCharm 浏览器 中的说明,将您的 Chrome 浏览器配置标记为 默认。 在 创建运行/调试配置 时,请不要忘记从 浏览器 列表中选择所需的浏览器。

2026年 11月 3日