我见过太多人把DevTools当摆设。工具Chrome里按一下F12，工具瞄一眼Console报错，工具关掉，工具完事。工具这就像拿到一把瑞士军刀只用来开啤酒瓶——不是工具刀不行，是工具你没摸到门道。

真正的工具调试高手，打开DevTools的工具第一件事是看Network。那个红色圆点一按，工具所有请求都像流水线一样铺开。工具有一次我帮朋友调一个页面，工具图片加载慢得像蜗牛，工具他怀疑是工具服务器带宽不够。我打开Network一看，工具好家伙，一张3MB的PNG原图直接怼在页面上，连个压缩都没做。用Coverage面板扫一遍，40%的CSS压根没被用到。问题根本不在服务器，是前端太懒。工具不会骗你，它把真相摊在眼前，只看你愿不愿意看。

再说说Elements面板。很多人用它改样式，改完刷新就没了，然后抱怨“怎么白改了”。你倒是右键→Copy→Copy element styles啊，或者直接在Sources里改源文件，配合Live Reload，改一行存一行，浏览器秒刷新。我习惯把DevTools单独拖到第二块屏幕上，左边编辑器，右边浏览器，中间用DevTools的Device Mode切换手机视图。那种感觉就像同时握着方向盘和地图，路况尽在掌握。

Console不只是看报错的地方。你可以把它当个临时计算器、DOM查询器，甚至写点小脚本。比如我想批量抓取页面上所有链接，直接document.querySelectorAll('a')，然后Array.from(...).map(a => a.href)，三秒钟拿到列表。这种临时操作，写个正经脚本反而浪费时间。Console就是你的瑞士军刀里的开瓶器——简单、直接、随时用。

Performance面板更是个宝贝，但大多数人碰都不碰。我调试过一个动画卡顿的页面，肉眼看着就是偶尔掉帧。用Performance录一段交互，看火焰图，发现一个叫layout的紫色块特别长。点进去，定位到某段代码——原来是在循环里改了元素的宽度，导致浏览器反复重排。改成用transform控制位移之后，帧率瞬间从30飙到60。这种问题，不录性能根本无从下手，靠猜得猜一晚上。

还有那些藏在三个点菜单里的功能。比如Coverage，能告诉你哪些代码从没被执行过。我清理过一个老项目，用Coverage一测，发现30%的JavaScript是死代码，删掉之后打包体积直接小了一圈。再比如Search功能，全局搜一个变量名，比在编辑器里挨个文件翻快多了。这些工具不显眼，但用对了，能省你半天功夫。

说到底，DevTools不是给你看的，是给你用的。它像听诊器，光戴在耳朵上没用，得贴到病人胸口才听见心跳。你越主动去戳它、试它、折腾它，它反馈给你的信息就越多。别怕把页面搞坏——最多刷新一下，但学到的东西，是刷不掉的。