专业的

在 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>。PyCharm 生成调试配置并通过它启动调试会话。文件将在浏览器中打开，并出现“调试”工具窗口。

   提示

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

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

1. 在代码中设置断点。

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

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

在远程 Web 服务器上调试应用程序

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

2. 创建JavaScript 调试类型的运行/调试配置：

   转到“运行”| 编辑配置，然后在“编辑配置”对话框中打开的“编辑配置”对话框中，单击工具栏上的“添加”按钮 ( )，并从列表中选择“JavaScript 调试” 。

3. 在打开的“运行/调试配置：JavaScript 调试”对话框中，指定运行应用程序的 URL 地址。根据服务器访问配置，该 URL 地址应该是Web 服务器根 URL和相对于 Web 服务器文档根的 HTML 文件路径的串联。有关详细信息，请参阅配置与服务器的同步。

   单击“确定”保存配置设置。

4. 在工具栏的“选择运行/调试配置”列表中选择新创建的配置，然后单击“调试”按钮。运行配置中指定的 HTML 文件将在所选浏览器中打开，并显示“调试”工具窗口。

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

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

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

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

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

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

   

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