console.log() 有时看不到输出,主因包括:旧版ie(

console.log() 为什么有时看不到输出?
不是所有环境都支持 console.log(),比如旧版 IE(console is not defined 错误;生产环境若用 UglifyJS 等压缩工具且未配置 drop_console: false,它会被整行删掉。
更隐蔽的问题是:在 iframe 或 Web Worker 中,console 是独立实例,主页面调用不会透出到父页 DevTools。
- 检查浏览器兼容性:Chrome/Firefox/Edge/Safari ≥ 8 均支持基础方法
- 避免未定义报错:可提前兜底
if (typeof console !== 'undefined' && console.log) { console.log(...); } - 不要依赖
console.log()做关键流程日志——它不保证执行顺序(尤其混用异步操作时),也不受 try/catch 捕获
console.warn() 和 console.error() 的实际区别在哪?
视觉上 console.warn() 显示黄色三角,console.error() 是红色叉,但关键差异在行为:
console.error()触发时,DevTools 默认高亮并暂停(如果启用了「Pause on caught exceptions」或「Break on error」相关选项)多数浏览器对
console.error()会额外记录堆栈(即使没抛异常),而console.warn()通常只记调用点在 Chrome 的 Network 标签下,
console.error()可能关联 failed 请求(比如 fetch 报错后手动 log),但console.warn()不会用
console.error()标记必须人工介入的问题(如 API 返回 500 后的 fallback 失败)别用
console.warn()替代类型检查——它不会中断执行,容易被忽略
console.table() 什么情况下反而让调试更难?
console.table() 对数组或对象键值结构清晰的数据很友好,但有明显局限:
只显示第一层属性(或数组元素),嵌套对象一律显示为
[object Object],无法展开不支持 Set、Map、Date、RegExp 等原生对象,会转成空对象或字符串(如
new Date()显示为"2024-06-12T08:23:45.123Z",但丢失原型信息)表格列数上限约 100,超长 key 名会被截断,且排序按字母序而非声明顺序
调试深层嵌套数据时,优先用
console.log(JSON.stringify(obj, null, 2))或直接展开对象想看 Map 内容?先转成数组:
console.table([...myMap.entries()])注意:Vue/React 组件实例传给
console.table()几乎无用,因核心数据藏在$data或state里
console.group() 和 console.time() 这类辅助方法怎么避免干扰主线程?
console.group()、console.time()、console.count() 看似轻量,但在高频循环中可能拖慢性能:
console.time()的计时精度依赖performance.now(),但每次调用仍需 DevTools 进程通信,大量使用(如每帧调用)会导致主线程卡顿console.group()嵌套过深(>20 层)时,Chrome 会自动折叠,Firefox 则可能崩溃渲染面板console.count()本质是全局计数器,同名 label 共享状态,跨模块易冲突(比如两个组件都用console.count('render'))时间测量仅用于粗略定位瓶颈,真要压测请用
performance.mark()+performance.measure()分组调试后务必配对
console.groupEnd(),否则后续所有 log 都被收进该组(极难排查)生产构建时,建议用 webpack DefinePlugin 将
console.*全局替换为空函数,比靠压缩工具更可控
复杂调试往往不是方法不够多,而是没意识到 console 本身也是运行时的一部分——它会参与事件循环、占用内存、触发跨进程通信。真正需要关注的,是哪些 log 必须存在,哪些只是临时拐杖。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











