Chrome DevTools 调试技巧有哪些？断点、网络和性能怎么用？

Chrome 调试的核心不是把 DevTools 每个面板都点一遍，而是按问题类型选工具：样式错看 Elements，请求慢看 Network，逻辑异常看 Sources，卡顿掉帧看 Performance，内存上涨看 Memory。这样排查更快，也不容易在 Console 里靠猜。

追问

Elements 面板适合解决什么问题？

它适合查 DOM 结构、CSS 覆盖关系、盒模型尺寸和最终计算样式。要注意样式可能来自媒体查询、伪类、继承和组件库默认规则。

Sources 断点怎么用才高效？

普通断点查确定位置，条件断点只在某个参数或状态出现时暂停，XHR/fetch 断点适合追接口是谁发起的。

Network 面板看哪些字段？

先看 Status、Method、Initiator、Payload、Response，再看 Timing 里的 DNS、SSL、TTFB 和下载耗时。

性能卡顿从哪里开始录？

用 Performance 面板录制真实操作，重点看 Main 线程长任务、Layout、Recalculate Style 和 Paint。