我如何打印调试消息在谷歌Chrome JavaScript控制台?

请注意,JavaScript控制台和JavaScript调试器是不一样的;它们有不同的语法AFAIK,所以在JavaScript调试器中的打印命令在这里将不起作用。在JavaScript控制台中,print()会将参数发送给打印机。


当前回答

我在开发人员检入他们的控制台.()语句时遇到了很多问题。而且,我真的不喜欢调试Internet Explorer,尽管Internet Explorer 10和Visual Studio 2012等有了惊人的改进。

因此,我已经重写了控制台对象本身…我添加了一个__localhost标志,它只允许在localhost上使用控制台语句。我还向Internet Explorer添加了console.()函数(而不是显示alert())。

// Console extensions...
(function() {
    var __localhost = (document.location.host === "localhost"),
        __allow_examine = true;

    if (!console) {
        console = {};
    }

    console.__log = console.log;
    console.log = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__log === "function") {
                console.__log(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__info = console.info;
    console.info = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__info === "function") {
                console.__info(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__warn = console.warn;
    console.warn = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__warn === "function") {
                console.__warn(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__error = console.error;
    console.error = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__error === "function") {
                console.__error(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__group = console.group;
    console.group = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__group === "function") {
                console.__group(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert("group:\r\n" + msg + "{");
            }
        }
    };

    console.__groupEnd = console.groupEnd;
    console.groupEnd = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__groupEnd === "function") {
                console.__groupEnd(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg + "\r\n}");
            }
        }
    };

    /// <summary>
    /// Clever way to leave hundreds of debug output messages in the code,
    /// but not see _everything_ when you only want to see _some_ of the
    /// debugging messages.
    /// </summary>
    /// <remarks>
    /// To enable __examine_() statements for sections/groups of code, type the
    /// following in your browser's console:
    ///       top.__examine_ABC = true;
    /// This will enable only the console.examine("ABC", ... ) statements
    /// in the code.
    /// </remarks>
    console.examine = function() {
        if (!__allow_examine) {
            return;
        }
        if (arguments.length > 0) {
            var obj = top["__examine_" + arguments[0]];
            if (obj && obj === true) {
                console.log(arguments.splice(0, 1));
            }
        }
    };
})();

使用示例:

    console.log("hello");

Chrome和Firefox:

    prints hello in the console window.

Internet Explorer:

    displays an alert with 'hello'.

对于那些仔细观察代码的人来说,您会发现console. inspect()函数。这是我在几年前创建的,这样我就可以在产品的某些区域留下调试代码,以帮助解决QA/客户问题。例如,我会在一些发布的代码中留下以下一行:

    function doSomething(arg1) {
        // ...
        console.examine("someLabel", arg1);
        // ...
    }

然后从发布的产品中,在控制台(或地址栏前缀为'javascript:')中输入以下内容:

    top.__examine_someLabel = true;

然后,我将看到所有已记录的console. inspect()语句。这已经帮了我很多次了。

其他回答

进一步完善Delan和Andru的观点(这就是为什么这个答案是编辑版本);Console.log可能存在,而其他函数可能不存在,因此默认映射到与Console.log ....相同的函数

你可以写一个脚本来创建不存在的控制台函数:

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || console.log;  // defaults to log
console.error = console.error || console.log; // defaults to log
console.info = console.info || console.log; // defaults to log

然后,使用以下任何一种方法:

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

这些函数将记录不同类型的项目(可以根据log, info, error或warn进行过滤),并且在控制台不可用时不会导致错误。这些功能将在Firebug和Chrome控制台中工作。

我个人使用这个,它类似于tarek11011的:

// Use a less-common namespace than just 'log'
function myLog(msg)
{
    // Attempt to send a message to the console
    try
    {
        console.log(msg);
    }
    // Fail gracefully if it does not exist
    catch(e){}
}

主要的一点是,至少有一些日志记录的实践,而不仅仅是将console.log()直接插入到JavaScript代码中,这是一个好主意,因为如果您忘记了它,而它位于生产站点上,它可能会破坏该页面的所有JavaScript代码。

console.debug("");

使用此方法在控制台中以明亮的蓝色打印文本。

尽管这个问题已经很老了,而且已经有了很好的答案,但是我想提供关于其他日志功能的更新。

你也可以打印组:

console.group("Main");
console.group("Feature 1");
console.log("Enabled:", true);
console.log("Public:", true);
console.groupEnd();
console.group("Feature 2");
console.log("Enabled:", false);
console.warn("Error: Requires auth");
console.groupEnd();

打印:

根据本页,所有主要浏览器都支持此功能:

从浏览器地址栏执行以下代码:

javascript: console.log(2);

成功打印消息到“JavaScript控制台”在谷歌Chrome浏览器。