PhpStorm 2021.3 Help

配置 JavaScript 调试器

通过JavaScript 调试器插件支持在 PhpStorm 中调试 JavaScript 。JavaScript 调试器插件与 PhpStorm 捆绑并默认激活。如果插件被禁用,请在设置/首选项的已安装选项卡上启用它。插件页面,如管理插件中所述。

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

在你开始前

  • 确保在Settings/Preferences |上启用了JavaScript 调试器插件。插件页面,标签Installed。有关详细信息,请参阅管理插件

设置内置 Web 服务器端口

  1. Ctrl+Alt+S打开 IDE 设置并选择Build、Execution、Deployment | 调试器

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

可选

  • 通过分别清除“可以接受外部连接”或“允许未签名请求”复选框来抑制从其他计算机或从 PhpStorm 外部对内置服务器上文件的调用。

  • 选择删除断点的方式,默认设置为Click

  • 调试器上。Debugger节点下的Data Views页面,配置高级调试器选项:启用或禁用 Inline Debugging,指定何时查看带有对象值和表达式评估结果的工具提示,等等。

  • 调试器上。Stepping页面,指定调试器要跳过的脚本。

    默认情况下,调试器不仅仅单步执行库脚本。要展开黑名单,请选中不要进入脚本添加按钮复选框并使用  和添加要跳过的 URL 地址删除按钮

使用您的默认 Chrome 用户数据启动调试会话

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

要使用您熟悉的外观打开一个新的 Chrome 实例,请在 PhpStorm 中配置 Chrome 以使用您的用户数据开始。在这种情况下,在开始调试会话之前,请始终确保 Chrome 尚未使用您的用户数据运行。否则,PhpStorm 仍会使用您的用户数据启动另一个 Chrome 实例,但无法为其打开调试端口。因此,PhpStorm 调试器无法连接到新 Chrome 实例中的应用程序,并且调试会话无法启动。

在 PhpStorm 中配置 Chrome 以使用您的 Chrome 用户数据开始

  1. 将您的Chrome 用户数据保存在您机器上的任何位置。

  2. Ctrl+Alt+S打开 IDE 设置并选择工具 | 网络浏览器

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

  4. 选择新配置并单击编辑Chrome 设置对话框打开。

  5. 选中Use custom user data directory复选框并在 PhpStorm 设置中指定用户数据目录的路径。

  6. 按照选择默认的 PhpStorm 浏览器中所述标记您的 Chrome 浏览器配置默认值,并且在创建运行/调试配置时不要忘记从浏览器列表中选择默认值

最后修改时间:2021 年 9 月 2 日