登录
项目实战4：奇思妙想console
2025年10月24日 11:08
之前因为项目太多了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"。
-
