配置 JavaScript 调试器
PhpStorm 为您的 客户端 JavaScript 代码提供内置调试器。 内置调试器会在您 启动调试会话时自动启动。
为了确保调试成功，您只需指定内置 web 服务器端口并接受 PhpStorm 为其他调试器选项建议的默认设置。
开始之前
设置内置 web 服务器端口
PhpStorm 具有内置 web 服务器，可用于在 web 浏览器中调试应用程序，或在 PhpStorm 内置浏览器中预览代码。 此服务器始终运行且无需任何手动配置。 从 调试在内置服务器上运行的应用程序了解详情。
按 Ctrl+Alt+S 打开设置，然后选择 。
在 内置服务器 区域，指定内置 web 服务器运行的端口。 默认情况下，此端口设置为默认的 PhpStorm 端口 63342 ，PhpStorm 通过该端口接受来自服务的连接。 您可以将端口号设置为从 1024 开始的任何其他值。
自定义默认调试器配置
抑制调用
按下 Ctrl+Alt+S 打开设置，并导航到 。
通过清除 可以接受外部连接 或 允许未签名请求 复选框，分别抑制来自其他计算机或 PhpStorm 外部的对内置服务器文件的调用。
选择删除断点的方式
默认情况下，您可以通过点击鼠标左键切换断点。 要更改此行为：
按下 Ctrl+Alt+S 打开设置，并导航到 。
在 移除断点 区域中，选择适当的选项。
指定要跳过的脚本
某些脚本会被 逐步进入 跳过，因为通常可能不需要调试它们。
打开要用于启动调试会话的运行/调试配置，并切换到 单步调试 选项卡。
要禁止自动 智能单步进入 ，请清除 始终使用智能步入 复选框。
要跳过源代码映射的
ignoreList字段中的脚本，请选中 忽略源代码映射中指定的已知第三方脚本 复选框。较旧的 Chrome 特定字段名称
x_google_ignoreList已弃用，但在缺少ignoreList字段时仍可能被识别。 从 源代码映射规范了解详情。要禁止步进进入自定义脚本，请选中 不步入 URL 与以下模式匹配的脚本 复选框，并展开下方此类脚本的默认列表。 使用
*、?、**和!。
模式语法
模式中支持以下字符：
星号
*匹配除斜杠/以外的零个或多个字符。 请在单个路径部分内使用此字符。问号
?精确匹配除斜杠/以外的一个字符。双星号
**作为完整段时，会匹配零个或多个路径段。 其含义取决于其位置：作为第一部分时，它匹配任意前导符号。
作为最后一部分时，它匹配任意尾随符号。
位于中间时，它匹配一个或多个部分。 例如，
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/**会按如下方式分割::双星号
**会匹配node_modules段之前的任意路径。node_modules匹配 URL 中的node_modules。双星号
**会匹配任意尾随内容。
因此，模式
**/node_modules/**匹配包含node_modules的任意 URL。请记住，脚本的 URL 会与整个模式进行匹配。 如果移除第二个双星号
**，该模式将匹配以node_modules结尾的任意 URL，而这样的 URL 很可能不存在。- 示例 3
省略第二个双星号
**，以匹配以特定文件名结尾的任意模式。**/app.js匹配所有以app.js结尾的 URL。以下模式列表将忽略 node_modules 中除名称为 app.js 的脚本以外的所有脚本。
**/node_modules/** !**/app.js
高级选项
来管理属性列表。
使用首选的 Chrome 用户数据启动调试会话
您可能会注意到，调试会话会在新窗口中启动，并使用自定义 Chrome 用户数据 ，而不是您自己常用的数据。 因此，窗口看起来很不寻常，例如您的书签、浏览器历史记录和扩展都消失了，这会完全破坏您的开发体验。 因为 PhpStorm 使用 Chrome 调试协议 并使用 --remote-debugging-port 选项运行 Chrome。 但是，如果 Chrome 已经启动，则无法为任何具有相同用户数据目录的新建或现有 Chrome 实例打开调试端口。 因此，PhpStorm 始终会在新窗口中使用自定义用户数据目录启动调试会话。
要打开具有熟悉外观与体验的新 Chrome 实例，请在 PhpStorm 中配置 Chrome 以使用您的用户数据目录启动。
在 PhpStorm 中配置 Chrome 以使用您偏好的 Chrome 用户数据启动
将您偏好的 Chrome 用户数据 保存在计算机上的 不同于 Chrome 默认用户数据目录的单独自定义目录中。
您需要将偏好的用户数据保存在单独的自定义目录中，因为 Chrome 136 及更高版本不支持在默认用户目录中调试。 从 Chrome 官方网站了解详情。
按 Ctrl+Alt+S 打开设置，然后选择 。
要创建新的 Chrome 配置，请点击
。 列表中出现了一个新项。 在 路径 字段中，指定 Chrome 安装文件夹的路径。选择新配置并点击 编辑 按钮(
)。在 Chrome 设置 对话框中，选中 使用自定义用户数据目录 复选框，并指定包含您偏好的用户数据的自定义目录路径。
如果您有多个 用户数据配置文件 ，它们中的每一个都存储在一个单独的子目录中。 要使用配置文件，请按如下方式在 命令行选项 字段中指定：
--profile-directory="<profile_to_use>"
按照 选择默认 PhpStorm 浏览器中描述的步骤，将您的 Chrome 浏览器配置标记为 默认。 在 创建运行/调试配置 时，请勿忘记从 浏览器 列表中选择所需的浏览器。