配置 JavaScript 调试器
通过JavaScript 调试器插件支持在 PhpStorm 中调试 JavaScript 。JavaScript 调试器插件与 PhpStorm 捆绑并默认激活。如果插件被禁用，请在设置/首选项的已安装选项卡上启用它。插件页面，如管理插件中所述。
为了确保成功调试，指定内置 Web 服务器端口并接受 PhpStorm 为其他调试器选项建议的默认设置就足够了。
在你开始前
确保在Settings/Preferences |上启用了JavaScript 调试器插件。插件页面，标签Installed。有关详细信息，请参阅管理插件。
设置内置 Web 服务器端口
按Ctrl+Alt+S打开 IDE 设置并选择Build、Execution、Deployment | 调试器。
在“内置服务器”区域中，指定运行内置 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 用户数据开始
将您的Chrome 用户数据保存在您机器上的任何位置。
按Ctrl+Alt+S打开 IDE 设置并选择工具 | 网络浏览器。
要创建新的 Chrome 配置，请单击
。一个新项目出现在列表中。在路径字段中，指定 Chrome 安装文件夹的路径。选择新配置并单击
。Chrome 设置对话框打开。选中Use custom user data directory复选框并在 PhpStorm 设置中指定用户数据目录的路径。
按照选择默认的 PhpStorm 浏览器中所述标记您的 Chrome 浏览器配置默认值，并且在创建运行/调试配置时不要忘记从浏览器列表中选择默认值。