最终的

在 Chrome 中调试 JavaScript

1. 一定要在设置中启用JavaScript 和 TypeScript 一批插件。按打开 IDE 设置，然后选择插件。单击“已安装”选项卡。在搜索字段中，输入JavaScript 和 TypeScript。有关插件的更多信息，请参阅插件管理。CtrlAlt0S

2. 一定要在设置中启用JavaScript调试器一堆插件。点击打开IDE，然后选择插件。单击“已安装”选项卡。在搜索字段中，输入JavaScript调试器。有关插件的更多信息，请参阅管理插件。CtrlAlt0S

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

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

开始调试

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

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

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

   提示

   要保存自动生成的配置以便供进一步重复使用，请在调试会话结束后从上下文菜单中选择“保存 <HTML_file_name>” 。

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

1. 在代码中设置断点。

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

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

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

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

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

3. 创建JavaScript 调试类型的调试配置：转到运行 | 编辑配置，在打开的“编辑配置”对话框中，单击工具栏上的“添加”按钮 ( )，然后从列表中选择“JavaScript 调试” 。在打开的“运行/调试配置：JavaScript 调试”对话框中，指定运行应用程序的 URL 地址。可以按照上述步骤 2中的说明从浏览器的地址栏中复制此 URL 。单击“确定”保存配置设置。

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

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

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

2. 如果您使用Service Workers，请确保在“调试器”页面（“设置”|“构建、执行、部署”|“调试器”）上选中“允许未签名的请求”复选框。否则，您的服务工作线程可能在调试会话期间不可用。

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

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

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

   

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