项目实战4：奇思妙想console

之前因为项目太多了console的打印，所以我直接在webpack上面进行配置，因为去掉的事一整个console而不是单纯的log导致，云服务器直接崩掉，我猜测原因是react内部有很多这种，如果直接全部去掉会太复杂，索性我后面改成log就好了，不过，最近鸡哥又给我出了一个新点子：

console全局控制：在原本状态下是不会显示log的，但是当你在控制台输入__enableLog() 的时候，他就会开始显示原本的log，这样就可以实现想要查看的时候就查看，不想查看的时候就不查看，但是这样还是有一个问题，就是刷新之后每次都要重新输入，唉，不过还是学一下：

    <Script
            id="console-log-override"
            strategy="beforeInteractive"
            dangerouslySetInnerHTML={{
                __html: `
                    (function() {
                        const originalConsoleLog = console.log;
                        let logEnabled = false;
                        console.log = function(...args) {
                            if (logEnabled) {
                                originalConsoleLog.apply(console, args);
                            }
                        };
                        window.__enableLog = function() {
                            logEnabled = true;
                            originalConsoleLog('Console logging enabled');
                        };
                        window.__disableLog = function() {
                            logEnabled = false;
                            originalConsoleLog('Console logging disabled');
                        };
                    })();
                `,
            }}
        />
        
        
        
        这段代码的核心作用是**重写浏览器的`console.log`方法**，实现日志输出的开关控制，默认关闭日志，可通过全局函数手动启用 / 禁用。下面分部分详细解释：

• id="console-log-override"：给脚本标签定义唯一标识，方便后续通过 DOM 操作定位该脚本。
• strategy="beforeInteractive"：这是 Next.js 等框架中的脚本加载策略，指定脚本在页面 "可交互前" 执行（优先于其他交互相关脚本），确保日志重写在其他代码调用console.log之前生效。
• dangerouslySetInnerHTML={{ __html: '...' }}：React 中用于直接插入 HTML/JavaScript 代码的属性（因为 React 默认会转义文本，避免 XSS 风险，而dangerouslySetInnerHTML会跳过转义，直接执行内容，因此命名带 "dangerously" 提醒风险）。这里用于插入一段自定义的 JavaScript 逻辑。

2. 内部 JavaScript 逻辑（自执行函数）

代码核心是一个立即执行函数表达式（IIFE） ：(function() { ... })()。IIFE 的作用是创建一个私有作用域，避免内部变量（如logEnabled）污染全局环境。

（1）保存原始console.log方法

const originalConsoleLog = console.log;

先将浏览器原生的console.log方法保存到originalConsoleLog变量中，目的是后续需要时仍能调用原始的日志输出功能（避免重写后丢失原生能力）。

（2）定义日志开关变量

let logEnabled = false;

声明一个私有变量logEnabled（初始为false），用于控制日志是否输出：true表示启用，false表示禁用。

（3）重写console.log方法

console.log = function(...args) {
  if (logEnabled) {
    originalConsoleLog.apply(console, args);
  }
};

• 用自定义函数覆盖原生的console.log。
• 新函数接收任意参数（...args，支持console.log(a, b, c)这样的多参数调用）。
• 逻辑：只有当logEnabled为true时，才通过originalConsoleLog.apply(console, args)调用原生日志方法输出内容；否则不执行任何操作（日志被 "屏蔽"）。

（4）暴露全局控制函数

window.__enableLog = function() {
  logEnabled = true;
  originalConsoleLog('Console logging enabled');
};

window.__disableLog = function() {
  logEnabled = false;
  originalConsoleLog('Console logging disabled');
};

• 向全局window对象挂载两个函数，用于手动控制日志开关：

  • __enableLog：将logEnabled设为true（启用日志），并通过原生console.log输出提示信息 "Console logging enabled"。

  • __disableLog：将logEnabled设为false（禁用日志），并输出提示 "Console logging disabled"。