浏览器里按F12，浏览或者右键“检查”，器调控制台就弹出来了。浏览大多数人卡在这一步就不知道干什么了。器调其实调试JS就三件事：看报错、浏览打断点、器调改变量。浏览

先说看报错。器调控制台里红色那一坨，浏览就是器调你的代码在喊救命。别慌，浏览点开那条错误，器调右侧会告诉你具体哪一行出了问题。浏览有一次我在一个循环里用了undefined的器调数组长度，报错提示是浏览“Cannot read property 'length' of undefined”。光看这个提示，新手可能懵——但点开堆栈追踪，能看到是哪个函数调用了它。顺着调用链往上找，多半是数据没拿到就往下传了。这种错误，十有八九是异步请求没等返回就处理了。

打断点是另一个狠活。在Sources（源代码）面板里，找到你的JS文件，点击行号那一列，就会出现一个蓝色标记。刷新页面，代码跑到这一行就会停住。这时候右侧的Scope面板会显示当前所有变量的值。我习惯先看几个关键变量是不是预期值。比如一个按钮点击事件里，我想确认用户输入的是不是数字——把断点打在事件处理函数第一行，鼠标悬停在输入框绑定的变量上，马上就能看到值。如果是个对象，还能展开看属性。这一步能省掉大量console.log。

但打断点有个坑：如果你用的是压缩后的代码，比如webpack打包出来的，那断点打在压缩文件上等于没打。解决办法是在Sources里找到Sources面板左侧的“Page”树，展开能找到webpack://的目录，那里有原始源码。或者更省事，直接在代码里写debugger;语句。浏览器跑到这句会自动停下，跟手动打断点效果一样。我写复杂逻辑时经常临时加一行，调完再删。

改变量是调试的进阶玩法。当代码停在断点处，你可以在Console面板里直接输入变量名，然后重新赋值。比如一个循环次数控制变量i，你可以在控制台敲i = 99，然后按F8（继续执行），看看后面逻辑会不会出问题。这比改源码再刷新快多了。有一次我调试一个分页组件，发现当前页变量被意外重置。我就在断点处手动把那个变量改成一个非法值，结果下一页直接报错——瞬间定位到是某个方法里把变量初始化了。

还有个容易被忽略的功能：Event Listener Breakpoints。在Sources面板右侧，有个叫“Event Listener Breakpoints”的折叠菜单。展开后能看到所有DOM事件类型。勾选“click”，然后点击页面任意按钮，代码会自动停在触发该事件的JS位置。这招对付“点击没反应”的问题特别有效——你能直接看到事件到底有没有绑定上，还是绑定了但函数内部抛错被吞了。

最后说个日常小技巧。控制台底部有个“🔍”图标，点开可以过滤日志。我通常只勾选Errors和Warnings，其他全关掉。不然浏览器插件或第三方库的日志能刷满屏，真正有用的信息全被淹没了。另外，console.log别打太多，打多了你根本不知道哪个对应哪次执行。用console.log({ 变量名})——注意外面包一层花括号——这样打印出来的是对象，点开能看当前快照，比打印字符串直观得多。

调试这事，工具就那几个，但用得熟不熟，效率差好几倍。别背快捷键，直接在代码里乱点乱试，踩几次坑就记住了。我见过有人调试全靠alert弹窗，那真是折磨自己。控制台里敲几行代码，比弹窗强一百倍。你现在就可以打开一个页面，按F12，在Console里敲document.title回车，看看返回什么。这就是你的第一步。