写了 console.log()，打开控制台却什么都没有，是前端最常见的困惑之一。按下面顺序过一遍，基本都能定位。

一、控制台筛选被打开

Console 面板的下拉框如果只勾了 Errors，log 会被过滤。旁边的 Filter 输入框输过内容没清空，也会隐藏输出。先检查这两处。

二、代码没执行到那一行

在 log 前面下个断点，或临时改成 throw new Error('reach') 看有没有抛出。常见原因：

  • 脚本加载失败，Network 面板里能看到 JS 文件 404；
  • 脚本写在 DOM 元素之前，元素还没生成，querySelector 返回 null，后面的代码报错中断；
  • 事件没绑上，回调根本没触发；
  • 函数被后面的同名函数覆盖。

控制台有红色报错时先解决报错，后面的代码大多不会执行。

三、强缓存加载了旧脚本

改了本地文件，浏览器用的还是缓存版本，现象是打印的还是旧内容甚至完全没有变化。开发者工具勾上 Disable cache，或者 Ctrl+F5 硬刷新。线上脚本建议带版本号。

四、构建把 console 删了

Webpack、Vite 的生产构建常配 terser 的 drop_console，打包后 console 语句直接消失。线上没有日志、本地正常，先看打包配置。需要保留调试输出的话，换成自己封装的方法：

const DEBUG = true;
const log = (...args) => { if (DEBUG) console.log(...args); };

五、环境没有控制台

小程序、App 内嵌 WebView、某些定制浏览器里不显示 console 输出，需要接调试工具或者用 vConsole 这类内嵌面板。

六、打印的是对象引用

先 log 对象再改属性，展开时看到的是新值，容易误判。打印快照更可靠：

console.log(structuredClone(obj));

快速定位

在控制台输入 typeof 函数名，确认函数是否存在；在 Sources 面板搜关键字，确认加载的脚本里有这段代码。两步做完，问题基本就浮出来了。