北京
绝大多数前端开发者每天都在使用Chrome DevTools，但真正把它用透的人并不多。强制触发hover状态、整页截图、网络限速、实时编辑页面、快速执行命令——这些隐藏功能都能在日常调试中帮你省下大量时间。
本文整理了19个Chrome DevTools实用技巧，覆盖调试提速、性能排查、页面编辑等多个场景，不少功能连资深开发者都未必知道。
命令面板：像VS Code一样操作DevTools
Chrome DevTools内置了与VS Code类似的命令面板。在DevTools打开的状态下，按下Ctrl + Shift + P（Mac用户为Cmd + Shift + P），即可快速搜索并调用几乎所有功能——截图、主题切换、面板切换、传感器模拟等。
相比逐级点击菜单，这种方式明显更快。很多开发者甚至不知道这个功能的存在。
整页截图：无需任何浏览器扩展
截取完整页面不需要安装第三方插件。打开命令面板（Ctrl+Shift+P），输入screenshot，选择Capture full size screenshot，DevTools会自动截取整个页面并保存为PNG文件。
如果只想截取某个特定元素，可以选择Capture node screenshot，精准捕获指定节点的截图。
强制触发伪类状态：调试hover不再手抖
调试hover样式不必再小心翼翼地保持鼠标静止。在Elements面板中选中元素，打开Styles选项卡，点击:hov按钮，即可强制触发:hover、:focus、:active、:visited、:focus-visible等状态。
这个方法对调试悬停效果、下拉菜单、焦点环以及其他交互状态都非常高效。
页面实时编辑：designMode一键开启
在Console中运行以下代码，整个页面会变成可编辑状态：
document.designMode = 'on'
开启后，你可以点击页面任意位置直接输入文字。这个技巧适合测试不同文案、快速模拟UI改动，或在截图前替换占位内容。
$0快捷引用：选中元素秒变变量
每次在Elements面板中选中元素，DevTools都会自动将其保存为Console中的$0。输入$0并回车，即可检查该元素、访问其属性或调用其方法。
此外，$1、$2、$3、$4分别对应之前选中的元素。调试时在多个元素间切换，效率会明显提升。
代码格式化：压缩文件一键还原
压缩后的JavaScript和CSS文件在调试时很难阅读。在Sources面板中打开文件，点击底部的{}按钮，DevTools会立即格式化代码，使其变得清晰可读。无需复制到外部工具处理。
网络限速：模拟弱网环境
打开Network面板，点击No throttling下拉菜单，可以模拟Slow 3G、Fast 3G，甚至自定义网络配置。这是检查网站在慢速连接下表现、提前发现性能问题的简单方法。
请求屏蔽：测试资源加载失败场景
在Network面板中右键点击任意请求，选择Block request URL，DevTools会在每次刷新页面时屏蔽该资源。这个方法非常适合测试API调用失败、字体加载异常或第三方脚本出错时网站的表现。
更多隐藏技巧等你挖掘
以上只是19个技巧中的一部分。Chrome DevTools的功能远不止这些——从性能分析到内存排查，从移动端模拟到多设备调试，每一个模块都藏着提升效率的细节。
建议开发者花点时间把DevTools的命令面板翻一遍，很可能会有意外收获。毕竟，工具用得越熟，调试花的时间就越少。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
