在生产JavaScript代码中留下“ console.log()”调用的坏主意?


77

console.log()我的JavaScript中有很多电话。

在部署到生产环境之前,是否应该将它们注释掉?

我只想把它们留在那儿,所以如果我需要进行更多的调试,那么以后不必再添加注释了。这是一个坏主意吗?


1
对于那些寻找角度的版本这个问题:stackoverflow.com/questions/42307317/...
rmcsharry

Answers:


119

它将导致Javascript错误,从而终止包含该错误的Javascript块的执行。

但是,您可以定义一个伪函数,当Firebug处于非活动状态时,该伪函数是无操作的:

if(typeof console === "undefined") {
    console = { log: function() { } };
}

如果您使用以外的任何其他方法log,则也需要将其存根。


谢谢。看起来是一个不错的解决方法。让我看看我是否理解。您是在说控制台是否未定义,然后将控制台设置为空函数。我不了解'log'之后的冒号语法。这样做是什么?为什么在“ console =”之后的括号内的所有内容?
查理·科特

2
花括号定义了一个对象文字:developer.mozilla.org/en/Core_JavaScript_1.5_Guide/…,而“ function(){}”位则定义了一个不带参数且不执行任何操作的匿名函数。(使用参数调用“ console.log(foo)”仍然有效,因为JS不在乎是否调用带有太多或更少参数的函数。)
Jason Creighton

明白了 也感谢您的链接。
查理·科特

1
优秀的解决方案人!:-)前几天我刚遇到这个问题。仅在打开FireBug时,我的页面才能在FF中工作,并且它会随机停止IE中的某些操作。我就像WTF!?!然后,我意识到我仍然有console.log调用,我必须仔细检查并删除它们。我现在可能会将您的解决方案添加到我的主要JS文件中,而不必再担心这种不幸的情况了。
KyleFarris

6
我有一个小项目(已测试单元),可以帮助您使用各种不同的控制台方法以尽可能少的代码来完成此任务。它位于这里:github.com/andyet/ConsoleDummy.js
Henrik Joreteg 2011年

38

正如其他人已经指出的那样,将其保留在某些浏览器中会导致错误,但是可以通过放入一些存根来解决这些错误。

但是,我不仅会注释掉它们,还会直接删除这些行。否则似乎显得草率。也许我正在做书,但是我不认为“生产”代码根本不应该包括“调试”代码,即使是注释形式也是如此。如果您完全不加注释,则这些注释应描述代码的作用或背后的原因-而不是禁用代码块。(尽管,大多数注释应在缩小过程中自动删除。您正在将其最小化,对吧?)

另外,在使用JavaScript的几年中,我不记得曾经回到过一个函数并说“ Gee,我希望我将那些console.log留在这里!” 总的来说,当我“完成”一个函数的工作,而后来又不得不重新使用它时,我会回来解决其他问题。不管新问题是什么,如果上一轮工作的console.logs都可以帮上忙,那么我会在第一时间发现问题。换句话说,如果我回到某件事上,则可能不需要与之前几次完全相同的调试信息。

只是我的两分钱...好运!


1
问题通常发生在生产周期中,因为某些东西正在调试或测试中,人们在没有开发控制台的开发团队外部查看它。我个人的喜好是不要让应用程序死于它们,因此我们不会收到像“您的新代码对我没有任何帮助”这样的呼叫。
Dimitar Christoff 2010年

10
永久调试行很棒。它们意味着您通常不必四处寻找错误的来源,但可以立即看到正在发生的事情。在代码的许多部分中,日志语句不会对性能产生任何重大影响。
Casebash

4
良好的日志记录应该对多种目的有用。说log()语句仅对调试一个问题有用,这让我想起了不知道如何编写正确日志记录的人进行Java日志记录。
Thomas W

7
简而言之:记录主要(高层)决策和事件处理,因此可以遵循业务,高层UI和主要事件处理流程。这些对于永久性地对应用程序进行工程设计很有价值。记录“输入方法A”,“离开方法A”,“ param1 77”是OTOH不好的记录。
Thomas W

10

如果有部署脚本,则可以使用它来删除对console.log的调用(并缩小文件)。

在使用时,可以通过JSLint抛出JS并记录违规情况以进行检查(或阻止部署)。

这是为什么要自动化部署的一个很好的例子。如果你的程序允许你发布在它console.logs一个js文件,在某些时候,你做到这一点。


9

据我所知,没有console.log比以下45个字符更短的存根方法了:

window.console||(console={log:function(){}});

这是3种不同版本中的第一种,具体取决于您要淘汰的控制台方法很小,并且都已在IE6 +和现代浏览器中进行了测试。

其他两个版本涵盖各种其他控制台方法。一个涵盖了四个基础知识,另一个涵盖了所有已知的Firebug和Webkit控制台方法。再次,最小的文件大小。

该项目在github上:https : //github.com/andyet/ConsoleDummy.js

如果您想出任何进一步减少代码的方法,欢迎您提供帮助。

-编辑-2012年5月16日

此后,我对此代码进行了改进。它仍然很小,但是增加了打开和关闭控制台输出的功能:https : //github.com/HenrikJoreteg/andlog

在The Changelog Show上展出


5

您至少应该创建一个假人 console.log如果对象不存在对象,这样在未安装Firebug的情况下,代码不会在用户的计算机上引发错误。

另一种可能性是仅在“调试模式”下触发日志记录,即如果设置了某个标志:

if(_debug) console.log('foo');
_debug && console.log('foo');

同意克里斯托夫(Cristoph)的观点,对于Safari而言,这不是问题,但在其他浏览器中,它将引发错误,并且可能会阻止javascript继续运行。总的来说,这不是一个好主意……
思南2009年

5

希望它能对某人有所帮助-不久前,我为此写了一个包装,它比公认的解决方案稍微灵活一些。

显然,如果您使用其他方法,例如console.info等,则可以复制效果。在您的登台环境中完成操作后,只需将默认的C.debug更改为false即可进行生产,而无需更改任何其他代码/删除行等。稍后很容易返回并进行调试。

var C = {
    // console wrapper
    debug: true, // global debug on|off
    quietDismiss: false, // may want to just drop, or alert instead
    log: function() {
        if (!C.debug) return false;

        if (typeof console == 'object' && typeof console.log != "undefined") {
            console.log.apply(this, arguments); 
        }
        else {
            if (!C.quietDismiss) {
                var result = "";
                for (var i = 0, l = arguments.length; i < l; i++)
                    result += arguments[i] + " ("+typeof arguments[i]+") ";

                alert(result);
            }
        }
    }
}; // end console wrapper.

// example data and object
var foo = "foo", bar = document.getElementById("divImage");
C.log(foo, bar);

// to surpress alerts on IE w/o a console:
C.quietDismiss = true;
C.log("this won't show if no console");

// to disable console completely everywhere:
C.debug = false;
C.log("this won't show ever");

4

这似乎对我有用...

if (!window.console) {
    window.console = {
        log: function () {},
        group: function () {},
        error: function () {},
        warn: function () {},
        groupEnd: function () {}
    };
}


2

我同意控制台存根是一种好方法。我尝试了各种控制台插件,代码片段,包括一些相当复杂的插件。他们都在至少一个浏览器中遇到了一些问题,因此我最终使用了以下类似的简单内容,这是我所见过的其他代码片段以及YUI团队的一些建议的结合。它似乎可以在IE8 +,Firefox,Chrome和Safari(适用于Windows)中运行。

// To disable logging when posting a production release, just change this to false.
var debugMode = false;

// Support logging to console in all browsers even if the console is disabled. 
var log = function (msg) {
    debugMode && window.console && console.log ? console.log(msg) : null;
};

注意:它支持通过标志禁用登录到控制台。也许您也可以通过构建脚本来自动执行此操作。或者,您可以公开UI或其他机制在运行时翻转此标志。当然,您可以通过日志记录级别,基于日志阈值的Ajax提交日志(例如,所有错误级别语句都传输到服务器进行存储等)来变得更加复杂。

关于日志的许多这些线程/问题似乎都将日志语句视为调试代码,而不是代码工具。。因此,希望删除日志语句。当一个应用程序在野外使用时,工具化非常有用,它不再像附加调试器那样容易,或者从用户或通过支持向您提供信息。无论将敏感内容记录到何处,都永远不要记录任何敏感内容,以免损害隐私/安全性。一旦您将日志记录视为工具,它现在就变成了生产代码,应该以相同的标准编写。

对于使用越来越复杂的javascript的应用程序,我认为检测至关重要。


1

正如其他人提到的那样,它将在大多数浏览器中引发错误。在Firefox 4中,它不会引发错误,该消息记录在Web开发人员控制台中(Firefox 4中的新增功能)。

一种我真正喜欢的错误的解决方法是de && bug

var de = true;
var bug = function() { console.log.apply(this, arguments); }

// within code
de&&bug(someObject);

0

一个好的单线:

(!console) ? console.log=function(){} : console.log('Logging is supported.');
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.