JavaScript调试已超越console.log，现代DevTools提供断点调试、实时编辑、性能内存分析及Console高级技巧等能力。
JavaScript 调试不再只是 console.log 打点看值——现代浏览器 DevTools 提供了强大、精准、可交互的调试能力，关键在于用对功能、理清流程。
断点调试：比 console 更准的“暂停观察”
在源码行号左侧单击设置断点，代码执行到该行会自动暂停，此时可查看当前作用域所有变量、调用栈、执行上下文。支持条件断点（右键断点 → Edit breakpoint），例如输入 user.id === 123，只在特定数据下中断，避免重复触发。
- 使用 debugger 语句可在代码中声明式插入断点，等效于手动点击，适合动态生成逻辑或难以定位的文件
- 函数断点（Sources →右侧 Breakpoints 面板 → Function breakpoints）可监听未暴露函数名的闭包或匿名函数调用
- XHR/fetch 断点（Network → XHR/Fetch Breakpoints）能拦截 API 请求发起前的调用栈，快速定位请求源头
实时修改与热重载：改完即见效果
在 Sources 面板中直接编辑 JS 文件，Ctrl+S（Cmd+S）保存后，Chrome/Ed
ge 会尝试热替换运行时代码，无需刷新页面。适用于调整逻辑分支、修复小 Bug 或测试不同参数。
- 仅限当前已加载的模块生效；若涉及模块依赖变更（如 import 路径改动），仍需刷新
- 编辑后若控制台报错 “Failed to load source map”，不影响执行，可忽略；但建议开发时启用 sourcemap 输出以便调试原始代码
性能与内存快照：定位卡顿和泄漏的利器
Performance 面板录制页面交互（如点击、滚动），可精确看到 JS 执行耗时、渲染帧率、布局抖动。Memory 面板配合 Heap snapshot 可对比多次快照，识别未释放的闭包、全局引用或事件监听器残留。
- 录制前勾选 “Screenshots” 查看视觉帧变化，“JS heap” 观察内存曲线
- 两次快照间保留的对象（Retained Objects），若数量持续增长且与业务操作强相关，大概率存在内存泄漏
- 使用 console.time() 和 console.timeEnd() 快速测量某段逻辑耗时，适合粗粒度定位
Console 高级技巧：不只是输出日志
Console 不仅能打印，还能交互式探索对象、筛选信息、追踪调用链。
-
console.table(data) 以表格形式展示数组或对象，比
console.log 更清晰呈现结构化数据
-
console.group() 和 console.groupEnd() 折叠日志组，适合分类输出异步任务或模块日志
- 输入 $0 获取 Elements 面板中当前选中的 DOM 元素，$1 是上一个，方便快速操作
- 右键 Console 中任意输出项 → “Store as global variable”，可将其转为临时全局变量（如
temp1），用于后续调试命令
ge 会尝试热替换运行时代码，无需刷新页面。适用于调整逻辑分支、修复小 Bug 或测试不同参数。