合理使用console.log、console.warn和console.error可提升调试效率：log用于普通调试信息，warn标记潜在问题，error突出真正异常，并支持过滤与清屏等技巧。
在前端开发中，合理使用 console.log、console.warn 和 console.error 能显著提升调试效率，让不同严重程度的信息一目了然。
用 log 输出普通调试信息
console.log() 最适合打印变量值、流程标记、接口返回数据等常规调试内容。它不会干扰页面运行，也不会被浏览器过滤（除非手动关闭日志）。
- 推荐在关键逻辑节点加标记，比如
console.log('用户登录成功') - 可传入多个参数，自动空格分隔：
console.log('用户名:', user.name, '状态:', user.active) - 支持格式化字符串，如
console.log('计数：%d，名称：%s', count, name)
用 warn 标记潜在问题
console.warn() 显示黄色警告图标，适合提示“能运行但可能有隐患”的情况，比如过时 API、非标准用法或边界条件。
- 例如检测到旧版浏览器时提醒：
console.warn('当前浏览器版本较低，部分功能可能受限') - 开发中发现某函数参数未按预期传入，但还能兜底处理，可用 warn 而非 error
- 警告信息在控制台可单独筛选（点击“Warnings”标签），便于集中排查
用 error 突出真正异常
console.error() 显示红色错误图标，带堆栈追踪，适用于程序中断、数据异常、API 调用失败等必须关注的问题。
- 建议配合 try/catch 使用：
catch (e) { console.error('请求失败:', e.message); } - 可传入 Error 对象，获得完整堆栈：
console.error(new Error('配置缺失')) - 浏览器会将 error 与网络错误、语法错误等统一归类，方便定位源头
小技巧：临时禁用或过滤日志
上线前别忘了清理调试语句，但开发中可借助控制台功能快速管理：
- 右键某条日志 → “Hide messages from …” 可临时屏蔽某个脚本的输出
- 在控制台输入
console.clear()清屏，避免干扰 - Chrome/Firefox 支持关键词过滤，比如输入 error 只看错误，输入 warn 只看警告
