隐藏在 Chrome DevTools 中的强大调试功能

2024-01-08 05:33:50

前言

Chrome DevTools 是一个强大的工具，可以帮助您调试和优化您的 web 应用。它包含了许多有用的功能，但其中一些功能可能并不为人所知。在这篇博文中，我们将介绍一些鲜为人知但非常有用的 Chrome DevTools 调试技巧。这些技巧可以帮助您更快地找到和修复 bug，并使您的开发工作更加高效。

技巧 1：使用“Drawer”来检查元素

“Drawer”是一个浮动的面板，可以显示有关选定元素的各种信息，包括样式、布局、事件侦听器和辅助功能属性。要打开“Drawer”，请右键单击要检查的元素，然后选择“Inspect Element”选项。

“Drawer”分为三个部分：

Styles ：显示有关选定元素的样式信息，包括元素的 CSS 规则、继承的样式和计算后的样式。
Layout ：显示有关选定元素的布局信息，包括元素的尺寸、位置和边距。
Event Listeners ：显示有关选定元素的事件侦听器信息，包括事件类型、侦听器函数和侦听器的源代码。
Accessibility ：显示有关选定元素的辅助功能信息，包括元素的 ARIA 角色、ARIA 标签和 ARIA 属性。

“Drawer”是一个非常有用的工具，可以帮助您快速找到和修复样式、布局和辅助功能问题。

技巧 2：使用“Performance”面板来分析性能

“Performance”面板可以帮助您分析您的 web 应用的性能。它可以显示有关页面加载时间、资源加载时间和 JavaScript 执行时间的信息。要打开“Performance”面板，请按 Ctrl+Shift+J (Windows) 或 Cmd+Option+J (Mac) 打开 DevTools，然后点击“Performance”选项卡。

“Performance”面板分为三个部分：

Timeline ：显示有关页面加载时间、资源加载时间和 JavaScript 执行时间的信息。
Frames ：显示有关页面上不同帧的信息，包括帧的持续时间、JavaScript 执行时间和渲染时间。
Details ：显示有关选定帧的详细信息，包括有关资源加载时间、JavaScript 执行时间和渲染时间的信息。

“Performance”面板是一个非常有用的工具，可以帮助您找到和修复性能问题。

技巧 3：使用“Sources”面板来调试 JavaScript

“Sources”面板可以帮助您调试您的 JavaScript 代码。它可以显示您的代码、设置断点和单步执行代码。要打开“Sources”面板，请按 Ctrl+Shift+J (Windows) 或 Cmd+Option+J (Mac) 打开 DevTools，然后点击“Sources”选项卡。

“Sources”面板分为三个部分：

Files ：显示您的项目的源代码文件。
Script ：显示选定文件的源代码。
Console ：显示有关您的代码的错误和警告信息。

“Sources”面板是一个非常有用的工具，可以帮助您找到和修复 JavaScript 代码中的 bug。

技巧 4：使用“Network”面板来分析网络请求

“Network”面板可以帮助您分析您的 web 应用的网络请求。它可以显示有关请求的 URL、状态代码、响应头和响应体的信息。要打开“Network”面板，请按 Ctrl+Shift+J (Windows) 或 Cmd+Option+J (Mac) 打开 DevTools，然后点击“Network”选项卡。

“Network”面板分为三个部分：