在 Chrome 中调试 JavaScript

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

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

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

开始调试

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

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

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

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

1. 在代码中设置断点。

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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