🐛 前端 - console.log 开关
ThinkAdmin 提供前端 console.log 调试开关功能，用于控制调试信息的输出，通过重写 console 方法实现调试日志的动态开关。
🚀 主要功能
- 动态开关: 支持动态开启和关闭调试日志
- 本地存储: 使用 localStorage 保存调试状态
- 静默模式: 默认情况下静默所有调试日志
- 性能优化: 避免生产环境输出调试信息
- 开发友好: 提供便捷的调试控制方式
📋 使用场景
开发调试
- 开发阶段: 在开发阶段开启调试日志
- 问题排查: 用于排查前端问题
- 性能监控: 监控前端性能问题
生产环境
- 日志控制: 生产环境关闭调试日志
- 性能优化: 避免不必要的控制台输出
- 用户体验: 保持控制台清洁
⚙️ 使用方法
开启调试
consoleDebug() // 返回 true 表示已开启，false 表示已关闭关闭调试
consoleDebug() // 返回 true 表示已开启，false 表示已关闭下面代码放在所有JS代码之前，建议放到 /public/static/extra/script.js 里面，不影响整体升级
<script>
// 调试控制模块 (放在所有JS代码之前)
(function() {
// 存储原始console方法
const nativeConsole = {
log: console.log
};
// 默认关闭调试输出
let debugMode = localStorage.getItem('console_debug') === 'true';
// 重写console方法
console.log = function() {
if(debugMode) nativeConsole.log.apply(console, arguments);
return null; // 确保不会意外返回值
};
// 调试开关快捷方法
window.consoleDebug = function() {
debugMode = !debugMode;
localStorage.setItem('console_debug', debugMode);
nativeConsole.log(`调试模式 ${debugMode ? '已开启' : '已关闭'}`);
return debugMode;
};
})();
</script>注意事项
- 需要强制刷新(Ctrl+F5)才会完全重置状态
- 仅影响
console.log输出 - 生产环境建议保持关闭状态