你是不是还在靠console.log打印变量找bug？明明代码逻辑写得通顺，结果运行起来要么出NaN，要么元素突然消失，翻遍代码也找不到问题根源？
其实Chrome浏览器的DevTools里藏着一堆“调试黑科技”，比console.log高效10倍，今天就把这些前端老司机压箱底的技巧扒给你。
先打开DevTools（按F12或Cmd+Option+I），点 Sources 标签——这是调试的核心面板。左边是文件导航区，像树一样展示页面的源代码，pages文件夹里是小程序或网页的页面文件；中间是代码编辑区，点行号左边能设断点（蓝色标记是未生效，红色是生效），直接改代码按Ctrl+S还能临时生效；右边是调试控制区，有继续执行（F8）、单步跳过（F10）、单步进入（F11）这些按钮，控制代码走得快慢
。
断点可不是随便点的，这里有几种“精准断点”技巧：普通断点就是点行号，条件断点更聪明——右键断点选“Edit breakpoint”，输个条件（比如id>100、user.name==='admin'），只有满足条件才会断；日志断点更省事儿，右键行号加Logpoint，输一句“当前值:”+x，代码执行到这儿自动打印，不用暂停也不用改代码；XHR/Fetch断点能追踪API请求，右边点“XHR/fetch Breakpoints”加个URL关键词（比如api/user），发起匹配请求时自动断，直接看调用栈就知道是谁发的请求；DOM断点更狠，Elements面板右键元素选“Break on”，能监控子元素变化、属性修改（比如class变了）或者元素被删——要是某个元素莫名其妙消失，用这个一抓一个准
。
单步执行也有门道：Step into（F11）会进函数内部，比如你想看看fetch函数里干了啥，点它就对了；Step over（F10）跳过函数，不用进去看细节；Step out（Shift+F11）是跳出当前函数，比如你进了一个无关的函数，直接跳出来继续往下走。这些按钮配合断点，不用每行都设断点也能精准定位问题。
还有个“调试线上问题的神器”——Overrides本地替换。打开Sources的Overrides标签，选个本地空文件夹授权，然后：改CSS的话，在Elements面板右键样式选“Save for overrides”，刷新页面修改还在；改JS就右键文件选“Override content”，加几句console.log测试，不用改本地代码；甚至能Mock API——Network面板右键请求改返回数据，比如把空数组改成假数据，直接测前端逻辑，比等后端改快多了
。
控制台里也有魔法：$0是当前选中的元素，直接输$0.innerText就能看文字，$0.click()触发点击；copy()能复制JSON、Cookie，比如copy(JSON.stringify(data, null, 2))，直接把格式化的JSON复制到剪贴板；$$()是querySelectorAll的简化，比如$$('button')拿所有按钮，$$('.ad-banner').
forEach(el=>el.remove())一键删广告；console.table更直观，把数组转成表格，比console.log清楚100倍
。
其实这些技巧也就覆盖了90%的调试场景，尤其是Overrides和条件断点，用好了能省超多时间。别再跟代码死磕了，赶紧打开DevTools试试——保证你再也不想用console.log！
你平时用DevTools最多的功能是啥？有没有遇到过“死活找不到的bug”？欢迎聊聊你的调试经历～
