浏览器中除console.log外，还可使用console.debug/info/warn/error分级日志、console.group/time组织上下文、console.table展示表格、console.dir查看嵌套对象、console.trace追踪调用栈，并可通过封装函数添加时间戳和模块前缀，生产环境通过域名判断动态禁用非error日志。
console.log 之外，浏览器里还能怎么打日志？
直接用 console.log 没问题，但真要调试复杂逻辑、追踪异步链、或上线后排查问题，它太“裸”了。浏览器原生支持 console.debug、console.info、console.warn、console.error 四级分级，它们不只是颜色不同——部分级别（如 console.error）会触发 DevTools 的「Errors」面板过滤，还能被 console.group 和 console.time 组织成结构化上下文。
如何让日志自动带时间戳和模块前缀？
手动拼接 new Date().toISOString() 和模块名既啰嗦又易错。更可靠的做法是封装一个轻量日志函数，利用 console 方法的多参数特性：
function log(level, module, ...args) {
const timestamp = new Date().toISOString().slice(11, 23);
console[level](`[${timestamp}][${module}]`, ...args);
}
log('info', 'auth', 'login success', { userId: 123 });
注意：不要用字符串模板拼全部内容，否则丢失 console 对对象/数组的可交互展开能力；...args 保证原始值保留可点击性。
生产环境怎么安全关闭 console 输出？
不能靠删代码，也不能只靠 if (process.env.NODE_ENV === 'production') —— 浏览器里没有 process.env。实际做法是启动时检测环境并覆盖原生方法：
立即学习“Java免费学习笔记（深入）”；
- 用 URL 参数判断：
location.search.includes('debug=1') - 检查
window.location.hostname是否为localhost或预设测试域名 - 覆盖时仅重置
console.log/console.warn等，保留console.error（避免掩盖真正异常）
覆盖示例（放在入口 JS 最上方）：
if (['prod.example.com', 'app.example.com'].includes(window.location.hostname)) {
['log', 'info', 'debug', 'warn'].forEach(method => {
console[method] = () => {};
});
}
为什么 console.table 不适合嵌套深的对象？
console.table 对扁平键值对非常友好，但遇到嵌套对象（如 { user: { profile: { name: 'A' } } }）会显示 [object Object]，失去结构信息。此时应改用 console.dir，它支持完整展开且可配置 { depth: 5 } 参数：
console.dir(data, { depth: 4, colors: true });
另外，console.trace() 在定位调用栈时比反复加 console.log 更直接，尤其适合查清某个状态是被哪一层函数修改的。
分级不是为了凑数，而是让日志能被工具识别、被团队约定约束、被自己快速过滤。最常被忽略的是：没统一模块命名规则导致搜索失效，以及把敏感字段（token、密码）直接打进 console.log 后忘了清理。
