PhpStorm 2021.3 Help

在 Chrome 中调试 JavaScript

PhpStorm 为您的客户端JavaScript 代码提供内置调试器。

下面的说明将引导您完成开始使用此调试器的基本步骤。

在你开始前

  1. 确保在Settings/Preferences |上启用了JavaScript 和 TypeScript以及JavaScript 调试器所需的插件。插件页面,选项卡Installed,有关详细信息,请参阅管理插件

  2. 如配置 JavaScript 调试器中所述配置内置调试器。

    要使您对 HTML、CSS 或 JavaScript 代码所做的更改立即显示在浏览器中而不重新加载页面,请激活实时编辑功能。有关详细信息,请参阅HTML、CSS 和 JavaScript中的实时编辑。

调试在内置服务器上运行的应用程序

PhpStorm 有一个内置的 Web 服务器,可用于预览和调试您的应用程序。此服务器始终在运行,不需要任何手动配置。就项目结构而言,所有项目文件都使用根 URL http://localhost:<built-in server port>/<project root> 在内置服务器上提供服务。

开始调试

  1. 根据需要在 JavaScript 代码中设置断点。

  2. 打开引用要调试的 JavaScript 的 HTML 文件,或在项目工具窗口中选择 HTML 文件。

  3. 从编辑器或选择的上下文菜单中,选择Debug <HTML_file_name>。PhpStorm 生成调试配置并通过它启动调试会话。该文件在浏览器中打开,并出现调试工具窗口

  4. 调试工具窗口中,照常进行:单步调试程序暂停和恢复程序执行、暂停时检查查看实际的 HTML DOM在控制台中运行 JavaScript 代码片段,等等。.

例子

假设您有一个由index.html文件和index.js文件组成的简单应用程序,其中index.html引用index.js。要开始使用内置服务器调试此应用程序,请在编辑器中打开index.html并从上下文菜单中选择Debug 'index.html' :

ws_quick_start_debug_built_in_server_1.png

PhpStorm 自动创建运行/调试配置,并启动调试会话:

ws_quick_start_debug_built_in_server_2.png

要重新启动新的运行/调试配置,请单击调试按钮PhpStorm 窗口的右上角或选择运行 | 从主菜单调试:

ws_quick_start_debug_built_in_server_3.png

在浏览器中重新加载当前页面

除了通过单击调试工具窗口重新启动应用程序外重新运行按钮,您还可以单击以重新加载当前导航的页面。这与Chrome中的重新加载页面功能 ( ) 的工作方式相同。在浏览器中重新加载Ctrl+R

下面的示例显示了一个简单的应用程序,它由两个 HTML 页面和一个 JavaScript 脚本组成。开始的home.html页面有一个提交按钮,按下该按钮会打开calculator.html页面,其中包含Calculator.js脚本执行的结果。

在调试会话期间,单击将使用提交按钮重新运行按钮重新加载home.html页面。单击会重新加载calculator.html页面,以便清除所有先前的脚本输出,并且调试器返回到Calculator.js中的第 1 行。在浏览器中重新加载按钮

在浏览器中重新加载当前页面

在开发模式下调试在 localhost 上运行的应用程序

如果您的应用程序在开发模式下运行localhost,您可以从内置终端( Alt+F12)、运行工具窗口调试工具窗口开始调试它。只需按住Ctrl+Shift并单击运行应用程序的 URL。

从运行工具窗口启动调试会话
  1. 在代码中设置断点

  2. 以开发模式启动应用程序,例如,使用 npm 脚本。

  3. 运行工具窗口或终端显示应用程序正在运行的URL。按住Ctrl+Shift并单击此 URL 链接。PhpStorm 使用自动生成的启动调试会话JavaScript Debug类型的配置。

这也适用于调试Vue.jsAngularReactNode.js应用程序。

调试在外部 Web 服务器上运行的应用程序

通常,您可能想要调试在外部开发 Web 服务器上运行的应用程序的客户端 JavaScript,例如由 Node.js 提供支持。

  1. 根据需要在 JavaScript 代码中设置断点。

  2. 开发模式下运行应用程序。通常你需要为此而奔波npm start

    开发服务器准备就绪后,复制应用程序在浏览器中运行的 URL 地址 - 您需要在运行/调试配置中指定此 URL 地址。

  3. 创建JavaScript Debug类型的调试配置:从主菜单中,选择Run | 编辑配置,单击工具栏并从列表中添加按钮选择JavaScript 调试。在打开的运行/调试配置:JavaScript 调试对话框中,指定运行应用程序的 URL 地址。该 URL 可以从浏览器的地址栏中复制,如上面第 2 步所述。单击确定以保存配置设置。

  4. 选择新创建的从工具栏上的选择运行/调试配置列表中选择配置,然后单击运行按钮列表旁边的。运行配置中指定的 URL 地址在浏览器中打开,并出现调试工具窗口

  5. 调试工具窗口中,照常进行:单步调试程序暂停和恢复程序执行、暂停时检查查看实际的 HTML DOM在控制台中运行 JavaScript 代码片段,等等。.

有关示例,请参阅调试 React 应用程序调试 Angular 应用程序。

调试异步代码

PhpStorm 支持调试异步客户端 JavaScript 代码。PhpStorm 识别异步代码中的断点,停在它们处,并让您单步执行此类代码。一旦异步函数中的断点被命中或您进入异步代码,就会在“调试器”选项卡的“框架”窗格中Async call from <caller>添加一个新元素。PhpStorm 显示完整的调用堆栈,包括调用者和异步操作开始的整个过程。

下图显示了 JavaScript 调试会话的示例。

调试异步 JavaScript 代码

调试器在第 3 行(断点)处停止,然后在第 5 行(断点)处停止。单击Step into时,调试器将在 line5 (on function) 停止,然后将移动到 line6。

默认开启异步调试模式。要禁用异步堆栈跟踪,请js.debugger.async.call.stack.depth注册表中设置为0.

调试工作者

PhpStorm 支持调试Service WorkersWeb Workers。PhpStorm 识别每个工作线程中的断点,并在调试工具窗口的调试器选项卡上的框架窗格中将其调试数据显示为单独的线程。

请注意,PhpStorm 只能调试专用工作人员,目前不支持对共享工作人员进行调试。

  1. Workers中设置断点进行调试。

  2. 如果您使用的是Service Workers,请确保在Debugger页面(Settings/Preferences| Build, Execution, Deployment | Debugger)上选中了Allow unsigned requests复选框。否则,您的服务工作人员可能在调试会话期间不可用。

  3. 如上文调试在外部 Web 服务器上运行的客户端 JavaScript中所述,创建JavaScript 调试类型的调试配置。

  4. 选择新创建的从工具栏上的选择运行/调试配置列表中选择配置,然后单击调试按钮列表旁边的。

    运行配置中指定的 HTML 文件在浏览器中打开,调试工具窗口打开,其中显示所有Workers的Frames列表:

    调试 Service Worker

    要检查Worker的数据(变量、监视等) ,请在列表中选择其线程并在变量监视窗格中查看其数据。当您选择另一个Worker时,窗格的内容会相应更新。

最后修改:2021 年 10 月 29 日