浏览器开发者工具是调试JavaScript最直接可靠的工具，Chrome/Edge DevTools覆盖95%需求：Sources设断点、Console执行代码与debugger、Network查请求；console.log应加标签分组条件输出；报错时用debugger回溯调用栈、守卫式断言、检查异步与this绑定。
浏览器开发者工具是调试 JavaScript 最直接、最可靠的工具，其他所谓“必备”插件或外部工具，绝大多数场景下只是锦上添花，甚至可能干扰判断。
Chrome / Edge 的 DevTools 足够覆盖 95% 的日常调试需求
不用额外装插件，F12 打开后重点用好三个面板：
-
Sources面板：打断点（点击行号左侧）、条件断点（右键 → “Edit breakpoint”）、黑盒脚本（右键 → “Blackbox script” 避免跳进第三方库） -
Console面板：执行临时代码、查看console.log输出、用debugger语句主动触发断点 -
Network面板：检查 XHR/fetch 请求是否发出、响应是否成功、请求头/体是否符合预期——很多“JS 没反应”实际是接口 401 或返回空数据
console.log 不是原始人手段，而是可控的轻量级探针
别只写 console.log(data)，容易淹没在日志里。改用这些写法提升信息密度：
- 加标签和格式：
console.log('【User API】response:', res, 'status:', res.status) - 分组输出：
console.group('Form validation'); console.log('email:', validEmail); console.log('pwd:', validPwd); console.groupEnd() - 条件触发：
if (DEBUG) console.log('debug info')，配合全局const DEBUG = location.hostname === 'localhost' - 避免对引用类型直接
log后修改——console.log(obj); obj.name = 'new';可能让你看到的是修改后的值（因控制台延迟求值），改用console.log(JSON.parse(JSON.stringify(obj)))固化快照
遇到 undefined is not a function 或 Cannot read property 'x' of undefined 怎么快速定位
这类错误不是语法错，而是运行时数据流断裂，靠堆栈不一定准（尤其压缩后）。关键动作是回溯“谁传了错的数据”：
立即学习“Java免费学习笔记（深入）”；
- 在报错行上方加
debugger，刷新后停住，看调用栈（Call Stack）里上一层是谁调的、传了什么参数 - 对可疑变量加守卫式输出：
console.assert(typeof callback === 'function', 'callback must be function, got:', typeof callback) - 如果涉及异步（如
fetch后链式调用），检查是否忘了await或漏了.then()，导致后续操作基于Promise对象而非实际数据 - 注意事件监听器里的
this绑定问题——btn.addEventListener('click', this.handleClick)中this会丢失，应写成btn.addEventListener('click', this.handleClick.bind(this))或用箭头函数封装
真正卡住的时候，往往不是工具不够多，而是没确认清楚「执行到了哪一行」「当时的变量值是什么」「上一步谁调用了它」——把这三件事盯死，DevTools 和 console 就已足够。复杂状态管理（比如 Redux 或 Vue 响应式）的调试，则需要额外关注派生状态的更新时机，那已是另一层问题了。
