做网站的人天天跟Chrome开发者工具打交道，但大多数人的用法停留在F12打开、看个Console报错。其实DevTools里藏着一堆能让你少加班的功能，今天挑十个最实用的说，按排查问题的顺序排。
第一个，Network面板的瀑布图。网站慢，先看这里：按耗时排序，一眼看出是哪个请求拖后腿。是图片太大、接口太慢，还是某个JS阻塞了渲染，瀑布图里清清楚楚。双击任何一条请求能看到详情，Timing标签里还细分了DNS、连接、等待、下载各花了多少毫秒，瓶颈在哪一步，直接定位。第二个，Performance面板录一段性能。F12打开Performance，点录制，在页面上操作几秒，停止。火焰图里能看到主线程被哪些长任务占着，哪个函数拖慢了页面，INP指标的问题基本都能在这儿找到根源。
第三个，Console里的条件断点。在Sources里给代码行打断点，右键断点可以加条件，比如只在变量等于某个值的时候停住。排查循环里的bug，这一招能省半小时。第四个，Sources里的Overrides。线上代码有问题想试改？不用改服务器，在Sources的Overrides里映射一个本地文件，改完刷新页面生效，验证没问题再改正式代码，调试线上问题神器。
第五个，设备模拟。点DevTools左上角的手机图标，可以模拟各种手机尺寸，还能模拟慢网速和弱网环境，移动端适配问题基本都是在这儿查出来的。第六个，Application面板看存储。LocalStorage、SessionStorage、Cookie、IndexedDB都在这里，排查登录状态、缓存问题，直接在这儿增删改查，不用写代码。
第七个，Network面板的截图功能。录制Network时会自动给每帧页面截图，想看页面加载过程中哪个阶段出现布局错乱，回放截图一目了然。第八个，Lighthouse跑分。一键生成性能、无障碍、SEO、最佳实践四维报告，每个扣分项都给了具体修改建议，新页面验收前跑一遍，比凭感觉检查靠谱。
第九个，Elements面板里右键节点可以截图单个元素，做素材、留证据都方便，不用再整个页面截图去裁。第十个，2026年Chrome DevTools还加入了AI辅助：选中有问题的代码或报错，可以直接问内置的Gemini，它会结合上下文给排查建议，对新手特别友好，但记住AI给的建议也要自己验证一遍再动手。
标签： Chrome DevTools 调试技巧 前端开发 实用技巧
还木有评论哦，快来抢沙发吧~