作为前端开发者，我们70-80%的时间都在浏览器里——调试、测试、检查、微调。然而大多数人只用到Chrome、Firefox或Edge功能的皮毛。

1.$0和$_的调试超能力

当你在开发者工具元素面板中选中某个元素时，可以在控制台用$0访问它。更棒的是$_会给出最后计算的表达式。

// 在元素面板中选择一个按钮
$0.style.backgroundColor = "red";
// 复用上一个控制台输出
console.log($_);

调试时再也不用复制粘贴选择器或写那些别扭的document.querySelector语句了

2.复制为cURL——最快的API调试法

在开发者工具中右键点击网络请求→复制→复制为cURL。

粘贴到终端里，你瞬间就能得到精确的API调用。完美用于调试认证头信息或重放请求。

curl 'https://api.example.com/data' \
  -H 'Authorization: Bearer xyz...' \
  --compressed

光是这个技巧就为我节省了好几个小时的抓狂时间。

3.本地覆盖：无需部署即可修改

你知道可以在Chrome里本地编辑生产环境文件，而且这些修改会在刷新后依然保留吗？

• 打开源代码标签→覆盖
• 选择你电脑上的一个文件夹
• 保存修改→它们就会覆盖线上网站

我经常在生产环境里即时测试CSS修复，然后再推送补丁。

4.设计模式：把任何页面变成游乐场

在控制台运行这个：

document.designMode = "on";

突然间，任何页面都变得可编辑了。我用这个来做快速原型、演示，甚至直接在网页里练习文案写作。

5.专业级截图

忘掉第三方工具吧。Chrome开发者工具内置了整页截图选项。

• 按Ctrl+Shift+P（Mac上是Cmd+Shift+P）
• 输入screenshot→选择捕获全尺寸截图

这对记录UI错误或与客户分享预览图简直是救星。

6.性能标签页：找到真正的瓶颈

大多数开发者忽略性能标签页因为它看起来很难懂。但它简直是宝藏。

你可以记录页面活动，看到布局偏移、绘制时间和脚本执行。我就是这么发现一个"无害"的动画正拖垮我的页面速度的。

7.用方向键编辑CSS

在样式面板里，你可以用方向键调整数值。更棒的是：

• Shift + 上/下→按10递增
• Alt + 上/下→按0.1递增

// 示例：实时调整内边距  
padding: 20px;  // Shift+方向键 → 30px  

就像用摇杆进行实时编码一样。

8.网络节流：像用户一样调试

你的用户并不总是有光纤网络。直接在开发者工具里模拟3G、慢速4G或离线模式。

• 打开网络标签页
• 把节流从无限制改为慢速3G

你会立刻感受到用户的体验——并发现那些你原本会忽略的问题。

9.代码片段：你的专属开发者工具脚本

在源代码→代码片段里，你可以保存一些可重用的小脚本。我存了一个清除localStorage的，一个模拟API数据的，还有一个测试动画的。

// 快速清除缓存
localStorage.clear();
sessionStorage.clear();
console.log("Storage cleared!");

只需点击一下就能随时运行它们。

10.CSS grid和flexbox可视化工具

这感觉就像魔法：在开发者工具里，当你选中一个display为grid或flex的元素时，可以切换一个覆盖层，显示间距、对齐和间隙。

再也不用猜为什么你的弹性项目没对齐了——浏览器会直接给你画出来。

最后的思考

最大的教训是什么？你的浏览器不只是用来查看代码的——它是一个完整的开发工具包。

通过学习这些隐藏技巧，我把调试时间减半，测试UI变快了，还不再把时间浪费在重复性任务上。

下次你卡住的时候，别急着找新的npm包或扩展。

先看看你的浏览器。很可能，解决方案已经在那儿等着你了。