序言
开头讨论了事物的一般运作方式。如果您只关心代码，请跳过Introduction并滚动到Solution标题。
简介
问题：
Web 应用程序中有很多控制台噪音。很大一部分噪音来自我们无法访问的第三方代码。一些日志噪音也可能来自我们的代码。
要求：
通过停止日志来减少噪音。 一些 日志仍应保留，并且有关这些日志的决定应与执行日志记录的代码分离。所需的粒度是“每个文件”。我们应该能够选择哪些文件添加或不添加日志消息。最后，这将不会在生产代码中使用。
假设：这将在开发人员控制的浏览器中运行。在这种情况下，我不会关注向后兼容性。
之前的工作：
首先可以使用此全局启用/禁用日志记录
(function (original) {
console.enableLogging = function () {
console.log = original;
};
console.disableLogging = function () {
console.log = function () {};
};
})(console.log);
（问题中发布的代码，但也可供参考）
- 但是，这不允许任何粒度。
- 这可以修改为仅适用于特定模块，但不能用于第三方代码。
- 一种混合方法是全局禁用日志记录，但在我们的每个模块中启用它。问题是我们必须修改每个我们的文件，我们不会得到一些可能有用的外部消息。
可以使用日志框架，但它可能有点过头了。虽然，老实说，我认为这就是我想要的，但它可能需要与产品进行一些集成。
所以，我们需要一些轻量级的东西，它有一些配置并且不需要漂亮。
建议：
登录者（标题可能会更改）
让我们从基础开始——我们已经知道我们可以覆盖全局日志功能。我们会接受它并与之合作。但首先，让我们认识到console 对象不仅仅支持.log。可以使用各种日志记录功能。 So-o-o，让我们禁用所有这些。
静默
//shorthand for further code.
function noop() {}
const savedFunctions = Object.keys(console)
.reduce((memo, key) => {
if(typeof console[key] == "function") {
//keep a copy just in case we need it
memo[key] = console[key];
//de-fang any functions
console[key] = noop;
}
return memo;
},
{});
console.log("Hello?");
console.info("Hello-o-o-o?");
console.warn("Can anybody hear me?");
console.error("I guess there is nobody there...");
savedFunctions.log("MUAHAHAHA!")
这显然可以改进，但它展示了如何停止 any 和 ll 日志记录。实际上，console.error 可能应该被留下，console.warn 也可能有用。但这不是万能的解决方案。
接下来，既然我们可以覆盖控制台功能...为什么不提供我们自己的？
自定义日志记录
const originalLog = console.log;
console.log = function selectiveHearing() {
if (arguments[0].indexOf("die") !== -1) {
arguments[0] = "Have a nice day!";
}
return originalLog.apply(console, arguments)
}
console.log("Hello.");
console.log("My name is Inigo Montoya.");
console.log("You killed my father.");
console.log("Prepare to die.");
这就是我们推出自己的迷你日志框架所需的所有工具。
如何进行选择性日志记录
唯一缺少的是确定某些内容来自哪个文件。我们只需要a stack trace。
// The magic
console.log(new Error().stack);
/* SAMPLE:
Error
at Object.module.exports.request (/home/vagrant/src/kumascript/lib/kumascript/caching.js:366:17)
at attempt (/home/vagrant/src/kumascript/lib/kumascript/loaders.js:180:24)
at ks_utils.Class.get (/home/vagrant/src/kumascript/lib/kumascript/loaders.js:194:9)
at /home/vagrant/src/kumascript/lib/kumascript/macros.js:282:24
at /home/vagrant/src/kumascript/node_modules/async/lib/async.js:118:13
at Array.forEach (native)
at _each (/home/vagrant/src/kumascript/node_modules/async/lib/async.js:39:24)
at Object.async.each (/home/vagrant/src/kumascript/node_modules/async/lib/async.js:117:9)
at ks_utils.Class.reloadTemplates (/home/vagrant/src/kumascript/lib/kumascript/macros.js:281:19)
at ks_utils.Class.process (/home/vagrant/src/kumascript/lib/kumascript/macros.js:217:15)
*/
（相关部分复制到这里。）
的确，有一些更好的方法可以做到这一点，但不是很多。它要么需要一个框架，要么是特定于浏览器的 - 官方不支持错误堆栈，但它们可以在 Chrome、Edge 和 Firefox 中使用。另外，拜托 - 它实际上是一条线 - 我们想要简单并且不介意肮脏，所以我很高兴权衡。
解决方案
把它们放在一起。 警告：不要在生产中使用它
(function(whitelist = [], functionsToPreserve = ["error"]) {
function noop() {}
//ensure we KNOW that there is a log function here, just in case
const savedFunctions = { log: console.log }
//proceed with nuking the rest of the chattiness away
Object.keys(console)
.reduce((memo, key) => {
if(typeof console[key] == "function" && functionsToPreserve.indexOf(key) != -1 ) {
memo[key] = console[key];
console[key] = noop;
}
return memo;
},
savedFunctions); //<- it's a const so we can't re-assign it. Besides, we don't need to, if we use it as a seed for reduce()
console.log = function customLog() {
//index 0 - the error message
//index 1 - this function
//index 2 - the calling function, i.e., the actual one that did console.log()
const callingFile = new Error().stack.split("\n")[2];
if (whitelist.some(entry => callingFile.includes(entry))) {
savedFunctions.log.apply(console, arguments)
}
}
})(["myFile.js"]) //hey, it's SOMEWHAT configurable
或者黑名单
(function(blacklist = [], functionsToPreserve = ["error"]) {
function noop() {}
//ensure we KNOW that there is a log function here, just in case
const savedFunctions = {
log: console.log
}
//proceed with nuking the rest of the chattiness away
Object.keys(console)
.reduce((memo, key) => {
if (typeof console[key] == "function" && functionsToPreserve.indexOf(key) != -1) {
memo[key] = console[key];
console[key] = noop;
}
return memo;
},
savedFunctions); //<- it's a const so we can't re-assign it. Besides, we don't need to, if we use it as a seed for reduce()
console.log = function customLog() {
//index 0 - the error message
//index 1 - this function
//index 2 - the calling function, i.e., the actual one that did console.log()
const callingFile = new Error().stack.split("\n")[2];
if (blacklist.some(entry => callingFile.includes(entry))) {
return;
} else {
savedFunctions.log.apply(console, arguments);
}
}
})(["myFile.js"])
所以，这是一个自定义记录器。当然，它不是完美，但它会完成这项工作。而且，嘿，由于白名单有点松散，它可以转化为优势：
- 将一组共享子字符串的文件列入白名单，例如，所有
myApp 都可以包括myApp1.js、myApp2.js 和myApp3.js。
- 虽然如果你想要特定的文件，你可以只传递全名，包括扩展名。我怀疑会有一堆重复的文件名。
- 最后，堆栈跟踪将包括调用函数的名称（如果有的话），因此您实际上可以直接传递它，然后将按函数列入白名单。但是，它依赖于具有名称的函数，并且函数名称更有可能发生冲突，因此请谨慎使用
除此之外，当然还有改进，但这是它的基础。例如，info/warn 方法也可以被覆盖。
所以，如果使用，它应该只在开发版本中。有很多方法可以使它不投入生产，所以我不会讨论它们，但我可以提一件事：如果你将它保存为书签，你也可以在任何地方使用它
javascript:!function(){function c(){}var a=arguments.length<=0||void 0===arguments[0]?[]:arguments[0],b=arguments.length<=1||void 0===arguments[1]?["error"]:arguments[1],d={log:console.log};Object.keys(console).reduce(function(a,d){return"function"==typeof console[d]&&b.indexOf(d)!=-1&&(a[d]=console[d],console[d]=c),a},d),console.log=function(){var c=(new Error).stack.split("\n")[2];a.some(function(a){return c.includes(a)})&&d.log.apply(console,arguments)}}(["myFile.js"]);
这是缩小的（尽管我首先通过 Babel 传递它，使用 ES5 缩小）并且在一定程度上仍然是可配置的，因为您可以更改可以传递白名单的最后。但除此之外，它的工作原理相同，并且与代码库完全解耦。它不会在页面加载时运行，但如果需要，您可以将其用作用户脚本（仍然解耦）或在其他 JS 文件之前包含它仅在 dev/debug 构建中。
请注意 - 这适用于 Chrome、Edge 和 Firefox。这些都是最新的浏览器，所以我假设开发人员至少会使用其中一个。该问题被标记为 Chrome，但我决定扩大支持范围。仅 Chrome 的解决方案可能工作得稍微好一些，但功能上的损失并不大。