🐛 Console 调试

ThinkAdmin 提供前端 console.log 调试开关功能，用于控制调试信息的输出，通过重写 console 方法实现调试日志的动态开关。

🚀 主要功能

动态开关: 支持动态开启和关闭调试日志
本地存储: 使用 localStorage 保存调试状态
静默模式: 默认情况下静默所有调试日志
性能优化: 避免生产环境输出调试信息
开发友好: 提供便捷的调试控制方式

📋 使用场景

开发调试

开发阶段: 在开发阶段开启调试日志
问题排查: 用于排查前端问题
性能监控: 监控前端性能问题

生产环境

日志控制: 生产环境关闭调试日志
性能优化: 避免不必要的控制台输出
用户体验: 保持控制台清洁

⚙️ 使用方法

切换调试模式

consoleDebug() 是一个切换函数，每次调用都会切换调试模式的开启/关闭状态：

// 在浏览器控制台中执行
consoleDebug();  // 第一次调用：开启调试模式，返回 true
consoleDebug();  // 第二次调用：关闭调试模式，返回 false
consoleDebug();  // 第三次调用：再次开启调试模式，返回 true

检查调试状态

// 检查当前调试状态
const isDebug = localStorage.getItem('console_debug') === 'true';
console.log('调试模式：', isDebug ? '已开启' : '已关闭');

🔧 实现代码

下面代码放在所有JS代码之前，建议放到 /public/static/extra/script.js 里面，不影响整体升级：

	// 调试控制模块 (放在所有JS代码之前)
	(function() {
		// 存储原始console方法
		const nativeConsole = {
        log: console.log,
        warn: console.warn,
        error: console.error,
        info: console.info
		};
		
		// 默认关闭调试输出
		let debugMode = localStorage.getItem('console_debug') === 'true';
		
    // 重写console.log方法
		console.log = function() {
        if(debugMode) {
            nativeConsole.log.apply(console, arguments);
        }
			return null; // 确保不会意外返回值
		};
    
    // 可选：同时控制其他console方法
    console.warn = function() {
        if(debugMode) nativeConsole.warn.apply(console, arguments);
    };
    
    console.info = function() {
        if(debugMode) nativeConsole.info.apply(console, arguments);
    };
    
    // console.error 始终显示，不受调试模式控制
    // console.error = function() {
    //     if(debugMode) nativeConsole.error.apply(console, arguments);
    // };
		
		// 调试开关快捷方法
		window.consoleDebug = function() {
			debugMode = !debugMode;
			localStorage.setItem('console_debug', debugMode);
			nativeConsole.log(`调试模式 ${debugMode ? '已开启' : '已关闭'}`);
			return debugMode;
		};
    
    // 初始化时显示当前状态（可选）
    if (debugMode) {
        nativeConsole.log('调试模式已开启，可在控制台执行 consoleDebug() 切换');
    }
	})();

完整实现示例

<!-- 在 /public/static/extra/script.js 文件中 -->
<script>
// 调试控制模块
(function() {
    const nativeConsole = {
        log: console.log,
        warn: console.warn,
        error: console.error,
        info: console.info,
        debug: console.debug
    };
    
    let debugMode = localStorage.getItem('console_debug') === 'true';
    
    // 重写所有console方法
    ['log', 'warn', 'info', 'debug'].forEach(method => {
        console[method] = function() {
            if(debugMode) {
                nativeConsole[method].apply(console, arguments);
            }
        };
    });
    
    // console.error 始终显示
    // console.error = nativeConsole.error;
    
    // 全局调试开关
    window.consoleDebug = function() {
        debugMode = !debugMode;
        localStorage.setItem('console_debug', debugMode);
        nativeConsole.log(`调试模式 ${debugMode ? '已开启' : '已关闭'}`);
        return debugMode;
    };
})();
</script>

注意事项

需要强制刷新(Ctrl+F5)才会完全重置状态
仅影响 console.log 输出
生产环境建议保持关闭状态