Chrome DevTools调试JavaScript最高效，核心是熟练运用断点（Sources）、Console实时执行、Network排查异步请求、Performance分析性能瓶颈，四者覆盖90%问题。
直接在 Chrome 开发者工具（DevTools）里调试 JavaScript，是最高效的方式。关键不是“会不会打开”，而是知道在什么场景下用哪个功能、怎么快速定位问题。
断点调试：最常用也最实用的核心功能
不用靠 console.log 海报式打点，精准停在出问题的那一行。
- 在 Sources 面板中找到 JS 文件，点击行号左侧灰色区域设置断点（红色圆点），刷新页面就会暂停执行
- 支持条件断点：右键断点 → Edit breakpoint → 输入条件（比如
i === 5），只在满足时暂停 - 函数断点：在 Debugger 面板输入函数名（如
handleClick），不管它在哪定义、被谁调用，一进就停 - 暂停后可查看作用域变量（Scope 面板）、逐行执行（F10）、步入函数（F11）、跳出（Shift+F11）
Console 不只是打印日志，还能实时调试和修改运行环境
它不只是输出结果的地方，更是临时 JS 执行沙盒。
- 直接输入变量名回车，查看当前值；输入对象名点展开，能看属性、方法、原型链
- 在断点暂停状态下，Console 中的代码会以当前执行上下文运行，可以临时调用函数、修改变量、测试逻辑
-
copy(obj)一键复制对象到剪贴板；$0指向 Elements 面板中最后选中的 DOM 元素，$1是上一个……方便操作页面元素 -
debug(fn)可为某个函数动态加断点（比手动找文件更快）
Network 和 Application 面板辅助排查异步与状态问题
很多 JS 错误其实源于数据没拿到、缓存没更新、本地存储异常。
立即学习“Java免费学习笔记（深入）”；
- Network 面板里勾选 “Preserve log”，再勾选 “Disable cache”，避免缓存干扰；点击某条请求，看 Preview 或 Response 查看真实返回数据
- XHR/Fetch 调用出错？右键请求 → “Replay XHR” 快速重试；或点击 “Initiator” 追溯是哪行 JS 发起的
- Application 面板中可清空 LocalStorage、SessionStorage、IndexedDB；也可手动编辑或删除某条 key，模拟数据异常场景
- Service Workers 标签页能强制更新、跳过等待、甚至直接取消注册，解决 PWA 更新不生效问题
Performance 和 Memory 面板查性能卡顿与内存泄漏
用户说“点按钮卡一下”，往往不是逻辑错，而是执行太慢或内存没释放。
- Performance 面板点录制（●），操作页面后停止，就能看到 JS 执行耗时、渲染帧率、主线程阻塞情况；点击长任务（红色块），直接定位到耗时函数
- Memory 面板中 “Record allocation timeline” 可边操作边录内存分配，结束后筛选“Constructor”找疑似泄漏对象（比如反复创建却没销毁的事件监听器）
- 快捷键
Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac）打开命令菜单，输入 “memory” 或 “performance” 快速进入对应面板
基本上就这些。Chrome DevTools 功能多，但真正高频用到的就是断点、Console、Network 和 Performance 四块。用熟了，90% 的 JS 问题几分钟内就能定位清楚。
