Chrome DevTools 是一款功能强大的网页开发和调试工具，本文总结了其主要面板及使用技巧。
主要功能面板
- Elements 元素面板：检查和调整页面结构，调试 DOM 和 CSS。
- Network 网络面板：调试网络请求，查看静态资源分布，检测网页性能。
- Console 控制台面板：调试 JavaScript，查看日志，进行交互式代码调试。
- Sources 源代码资源面板：调试 JavaScript 源代码，进行断点调试。
- Application 应用面板：查看和调试客户端存储，如 Cookie、LocalStorage、SessionStorage。
- Performance 性能面板：查看页面性能细节，优化网页加载性能。
- Memory 内存面板：分析 JavaScript CPU 和内存堆使用情况。
- Security 安全面板：查看页面的安全性及证书问题。
- Audits 面板：使用 Google Lighthouse 进行性能分析，并给出优化建议。
打开 DevTools 的方式
- 通过菜单：在 Chrome 菜单中选择“更多工具 > 开发者工具”。
- 通过右键菜单：在页面元素上右键点击，选择“检查”。
- 快捷键：
- 打开最近关闭的状态：
command + option + I(Mac) 或Ctrl + shift + I(Windows) - 直接打开 Elements 元素面板：
command + option + C(Mac) 或Ctrl + shift + C(Windows) - 直接打开 Console 控制台面板：
command + option + J(Mac) 或Ctrl + shift + J(Windows)
- 打开最近关闭的状态：
常用技巧
1. 禁用缓存
在 Network 网络面板中勾选“Disable cache”项。
2. 手动清理网站缓存
按 command + shift + p (Windows 按 Ctrl + shift + p) 打开命令输入框，输入 clear site data 并敲回车。
3. 展开某标签下所有层级的标签
切换到 Elements 元素面板，按住 Alt 键点击某个文档节点左侧的小箭头。
4. 强制设置元素的状态
选中元素后，点击 Style 面板下的 “:hov” 按钮，勾选要切换的状态。
5. 查找某元素绑定的事件
在 Elements 面板中，点击文档节点，选择 Event Listeners 页签，展开相应事件名并右键点击 handler，选择 “Show function definition”。
6. 打开某个资源文件
按 command + p (Windows 按 Ctrl + p) 打开文件搜索框，输入文件名并敲回车。
7. 快速定位源代码行数
按 command + p (Windows 按 Ctrl + p)，在输入框中输入 :行数，如 :480 并敲回车。
8. 格式化代码
点击已打开文件左下角的 {} 按钮。
9. 对某行代码打断点
点击代码左侧的行号，鼠标移至代码中的变量可实时查看值。
10. 查找加载图片的代码
在 Network 网络面板中，点击 Initiator 列下的文件名。
11. 全局查询请求头和响应体
在 Network 页签中，点击左上角的“放大镜”按钮，在搜索框中输入内容并敲回车。
12. 切换网络模式
在 Network 网络面板中，点击 online 下拉面板，选择要切换的网络模式。
13. 限制网速
在 Network 网络面板中，点击 online 下拉面板，选择 add 选项，点击 Add custom profile...，输入配置后点击 Add。
14. 在 Console 控制台查找 DOM
切换到 Console 面板，输入 document.querySelectorAll("#APP") 并敲回车。
15. 在控制台中输入多行代码
按住 Shift 键并敲回车即可换行。
16. 手动添加 Cookie
在 Application 面板中按 esc 键打开控制台，输入 document.cookie = "test=1"。
17. 手动添加 LocalStorage
在 Application 面板中按 esc 键打开控制台，输入 localStorage.setItem('test', '1')。
18. 模拟手机调试
点击 DevTools 左上角的手机图标按钮。
19. 设置网页 User Agent
按 command + shift + p (Windows 按 Ctrl + shift + p)，输入 show Network conditions，取消勾选 Select automatically，然后选择相应的设备。
20. 截图
按 command + shift + p (Windows 按 Ctrl + shift + p)，输入 screenshot，然后选择合适的截图方式。
21. 集成 Vue.js 开发者工具
进入 Vue.js 官网，在“生态系统”菜单下选择 “Devtools”，下载源码并解压，使用 webpack 打包后加载已解压的扩展程序。
通过这些技巧，您可以更高效地使用 Chrome DevTools 进行网页开发和调试。