我应该从生产代码中删除console.log吗？

Question

我目前在我的代码中到处都有这个JS语句:

window.console && console.log("Foo");

我想知道这是否成本高昂,或者在生产中是否有任何负面影响.

我可以自由离开客户端登录,还是应该离开？

编辑:最后,我认为我(以及其他任何人？)能够提出的最佳论点是,通过留下记录消息,在服务器和客户端之间传输的额外数据可能是不可忽略的.如果生产代码将被完全优化,必须删除日志记录以减少发送到客户端的javascript的大小.

Answer 1

处理此问题的另一种方法是在未定义控制台对象时将其"存根",以便在没有控制台的上下文中不会抛出任何错误,即

if (!window.console) {
  var noOp = function(){}; // no-op function
  console = {
    log: noOp,
    warn: noOp,
    error: noOp
  }
}

你明白了...在控制台的各种实现上定义了很多功能,所以你可以将它们全部或只是你使用的那些(例如,如果你只使用console.log和从未使用过console.profile,console.time等等).

这对我来说是一个更好的选择,而不是在每个调用前添加条件,或者不使用它们.

另请参阅:在您的producton JavaScript代码中调用"console.log()"调用是不是一个坏主意？

Answer 2

你应该不开发工具添加到生产页面.

回答另一个问题:代码不能产生负面的副作用:

• window.console如果console没有定义,将评估为false
• console.log("Foo")将在定义时将消息打印到控制台(前提是页面不会console.log被非功能覆盖).

Answer 3

UglifyJS2

如果您使用此缩小器,则可以设置drop_console选项:

传递true以丢弃对console.*函数的调用

所以我建议保留 console.log调用,因为它们是代码库中最棘手的部分.

Answer 4

如果缩小是构建过程的一部分,您可以使用它去除调试代码,如此处使用Google闭包编译器所述:在缩小过程中排除调试JavaScript代码

if (DEBUG) {
  console.log("Won't be logged if compiled with --define='DEBUG=false'")
}

如果使用高级优化进行编译,则此代码甚至会被识别为已死并完全删除

Answer 5

不要让事情过于复杂化！我个人在开发过程中一直使用console.log，它非常节省时间。对于生产，我只需添加一行代码（在我的例子中的“生产配置文件”中）即可禁用所有日志：

window.console.log = () => {};

完成;)这只猴子修补了window.console并将日志函数替换为空函数，从而禁用输出。

在大多数情况下，这对我来说已经足够了。如果您想“一路”并从代码中删除 console.logs 以减少捆绑包大小，则必须更改 js 的捆绑方式（例如使用 minifier 或其他方式删除 console.logs ）

另外，我认为你实际上可以充分表明将它们留在其中 - 即使在生产中也是如此。对于普通用户来说，它不会改变任何东西，但确实可以加快理解奇怪的“异国浏览器”问题。它不像可能包含关键信息的后端日志。无论如何，您甚至可以通过 console.log 显示的所有内容显然都已经在前端可用了！不显示日志消息，因为您害怕透露安全详细信息或类似的东西，这实际上只是“默默无闻的安全”，并且应该让您思考为什么这些信息甚至可以在前端上使用！只是我的观点。

Answer 6

是.console.log将在不支持它的浏览器中抛出异常(将找不到控制台对象).

Answer 7

通常是的，在生产代码中公开日志消息不是一个好主意。

理想情况下，您应该在部署之前使用构建脚本删除此类日志消息；但是许多（大多数）人不使用构建过程（包括我）。

这是我最近用来解决这个困境的一些代码的一小段。它修复了由console旧 IE 中的 undefined 引起的错误，以及在“development_mode”中禁用日志记录。

// fn to add blank (noOp) function for all console methods
var addConsoleNoOp =  function (window) {
    var names = ["log", "debug", "info", "warn", "error",
        "assert", "dir", "dirxml", "group", "groupEnd", "time",
        "timeEnd", "count", "trace", "profile", "profileEnd"],
        i, l = names.length,
        noOp = function () {};
    window.console = {};
    for (i = 0; i < l; i = i + 1) {
        window.console[names[i]] = noOp;
    }
};

// call addConsoleNoOp() if console is undefined or if in production
if (!window.console || !window.development_mode) {
    this.addConsoleNoOp(window);
}

我很确定我addConsoleNoOp从 SO 的另一个答案中获取了上面的大部分内容，但现在找不到。如果我找到它，我会在以后添加参考。

编辑：不是我想到的帖子，但这里有一个类似的方法：https : //github.com/paulmillr/console-polyfill/blob/master/index.js