控制台（console）本身不直接做性能分析，但它能快速定位和验证性能问题，配合其他面板形成高效排查链。关键在于用对命令、结合上下文、及时转向performance或network面板深挖。
快速识别可疑代码段
在控制台中执行带计时的代码块，确认某段逻辑是否真慢：
- 用 console.time() 和 console.timeEnd() 包裹待测逻辑，比如
console.time('渲染列表');→ 执行渲染 →console.timeEnd('渲染列表'); - 对高频操作加 console.count()，看函数被调用了多少次；用 console.assert() 检查是否意外触发了冗余计算
- 发现大量重复日志或警告（如“Avoid large layout shifts”），往往指向强制同步布局或资源加载阻塞
引用并检查当前页面状态
不用写 selector 就能快速拿到目标元素或数据：
- 在 Elements 面板选中一个 DOM 节点后，在 Console 里直接输入 $0 就能访问它，可立刻测
$0.getBoundingClientRect()或$0.offsetWidth看是否触发重排 - 执行复杂操作后，右键控制台输出的对象 → “Store as global variable”，生成 temp1 等变量，后续可反复 inspect 或调用方法
- 用 console.table() 查看数组或对象结构（如
console.table(performance.getEntriesByType('resource'))），快速判断哪些资源加载耗时异常
联动 Performance 和 Network 面板
控制台是跳转枢纽，不是孤岛：
- 如果 console 报出
Long task警告，立刻切到 Performance 面板，点击录制并复现操作，重点看火焰图中超过 50ms 的 JS 任务 - 看到某个 API 返回慢，复制请求 URL 后，在 Network 面板过滤该地址，查看 Initiator、Waterfall、Timing，确认是 DNS、SSL 还是服务器响应拖慢
- 输入
performance.memory可粗略查看内存占用，若 usedJSHeapSize 持续上涨且不回落，再进 Memory 面板拍快照比对
善用调试辅助命令
减少手动翻找，提升效率：
- console.group() 把相关日志归组，避免信息混杂；搭配 console.groupCollapsed() 默认收起非关键日志
- console.trace() 在可疑函数里插入，直接打印调用栈，快速定位是谁在反复调用
- 启用 Preserve log upon navigation（设置 → ⚙️ → Console → 勾选），防止页面跳转清空线索
