浏览器开发者工具的五个隐藏用法

1. Network 节流模拟弱网

DevTools → Network → Throttling → Slow 3G。上线前跑一遍，比用户投诉提前发现问题。

2. Performance 录制火焰图

录制 3–5 秒操作，看主线程被什么吃掉了：长任务（Long Task）标黄，一秒一个提醒。

3. 截图工具

Ctrl+Shift+P（Mac Cmd+Shift+P）→ 输入 screenshot：

• Capture full size screenshot：整页长图
• Capture node screenshot：单个元素

4. Console 里直接操作选中元素

Elements 面板选中的节点，Console 里就是 $0：

$0.getBoundingClientRect()
copy($0.outerHTML)

5. Sensors 面板模拟手机

Ctrl+Shift+P → Show Sensors：模拟地理位置、陀螺仪、触摸事件。