一、Elements 面板样式调试

  • 选中元素实时修改样式、颜色、边距，临时调试页面布局；
  • 勾选取消样式属性，快速定位是哪条CSS导致布局错乱；
  • :hover/:active等状态强制激活，无需手动悬浮点击；
  • Computed查看元素最终生效样式，排查样式优先级覆盖问题。

二、Console控制台实用玩法

1. 打印进阶用法

console.log('普通打印');
console.warn('警告提示');
console.error('错误日志');
console.table([{name:'a'},{name:'b'}]) //表格打印数组

2. 断点调试JS

在Sources面板给代码行打断点，单步执行、查看变量实时变化；可添加条件断点，满足指定条件才暂停。

三、Network网络抓包排错

  • 查看接口请求参数、返回数据、状态码，定位前后端对接问题；
  • 勾选Preserve log刷新页面不清空请求记录；
  • Throttling限制网速，模拟弱网加载卡顿场景；
  • 右键复制接口为curl，本地直接复现请求。

四、Performance性能分析

录制页面运行过程，查看长任务、重排重绘耗时，定位页面卡顿、动画掉帧原因；找到占用主线程时间过长的JS代码。

五、移动端真机调试

手机USB连接电脑，开发者模式开启USB调试，浏览器可远程操控手机页面，真机查看移动端样式、兼容性问题。

六、小技巧总结

  • F12快速打开开发者工具，Ctrl+Shift+I快捷键；
  • Ctrl+Shift+C拾取页面任意元素；
  • Local Storage、Session Storage在Application面板查看本地缓存；
  • 屏蔽指定接口请求，临时模拟接口异常场景。