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/edge 会尝试热替换运行时代码，无需刷新页面。适用于调整逻辑分支、修复小 Bug 或测试不同参数。
- 仅限当前已加载的模块生效；若涉及模块依赖变更（如 import 路径改动），仍需刷新
- 编辑后若控制台报错“Failed to load source map”，不影响执行，可忽略；但建议开发时启用 sourcemap 输出以便调试原始代码
性能与内存快照：定位卡顿和泄漏的利器
Performance 面板录制页面交互（如点击、滚动），可精确看到 JS 执行耗时、渲染帧率、布局抖动。Memory 面板配合 Heap snapshot 可对比多次快照，识别未释放的闭包、全局引用或 事件 监听器残留。
立即学习“Java 免费学习笔记（深入）”；
- 录制前勾选“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），用于后续调试命令
