如何在Google Chrome JavaScript控制台中打印调试消息?


466

如何在Google Chrome JavaScript控制台中打印调试消息?

请注意,JavaScript控制台与JavaScript调试器不同;它们具有不同的语法AFAIK,因此JavaScript Debugger中的print命令将在此处不起作用。在JavaScript控制台中,print()会将参数发送到打印机。

Answers:


597

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

javascript:console.log(2);

成功将消息打印到Google Chrome中的“ JavaScript控制台”。


13
刚意识到,console.log()这对于js调试来说真是棒极了……我经常忘记在实践中使用它。
伊什

这些“输出”之一能持续多久?顺便说一下,这真的很有帮助
nbura

3
@dbrin这对于开发来说是很好的,但是console.log()在部署之前,应从生产代码中删除所有代码。
塞缪尔·麦克拉克伦

2
Console.Log部署之前,应从生产代码中删除@Sebas,因为如果不这样做,这些消息将记录到用户的JavaScript控制台中。尽管他们不太可能看到它,但它占用了设备上的内存空间。另外,根据日志的内容,您可能会告诉人们如何对您的应用程序进行黑客入侵/反向工程。
塞缪尔·麦克拉克伦

166

为了改进Andru的想法,您可以编写一个脚本来创建控制台函数(如果不存在):

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

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

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

这些功能将记录不同类型的项目(可以根据日志,信息,错误或警告进行过滤),并且在控制台不可用时不会导致错误。这些功能可在Firebug和Chrome控制台中使用。


感谢那。如果您运行过一次“ if”(例如if (!window.console) {,然后将所有内容都放在方括号中),代码会不会更严格?现在,您正在评估相同的内容四次。
丹·罗森斯塔克2011年

不,b / c仅拥有window.console并不能保证您拥有window.console.log或.warn&c
Paul Paul

18
请小心,因为如果此脚本随页面一起加载并且未打开控制台窗口,它将创建“虚拟”控制台,如果您加载页面打开控制台,则可能会阻止实际的控制台工作。(至少在旧版本的firefox / firebug和chrome中是这种情况)
cwd

1
我对此有补充,请参见下面的答案
TimBüthe12年

1
不,这不会导致Chrome因TypeError中止。上面的链接问题是关于与此相关的。上面的代码无法做到这一点,并且可以在Chrome中正常运行
gman

47

只需添加一个很酷的功能,许多开发人员就会错过:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

这是可点击且可深入浏览的神奇%o转储 JavaScript对象内容。%s被显示只是为了记录。

这也很酷:

console.log("%s", new Error().stack);

它提供了类似于Java的堆栈跟踪到new Error()调用点(包括文件路径和行号!)。

%onew Error().stack在Chrome和Firefox提供!

对于Firefox中的堆栈跟踪,也可以使用:

console.trace();

https://developer.mozilla.org/en-US/docs/Web/API/console

骇客入侵!

更新:一些库是由坏人编写的console,它们出于自己的目的重新定义对象。要console在加载库后还原原始浏览器,请使用:

delete console.log;
delete console.warn;
....

请参阅堆栈溢出问题恢复console.log()


3
我刚刚发现的另一个:console.dir developer.mozilla.org/en-US/docs/Web/API/console.dir
dbrin

17

只是一个快速警告-如果您想在Internet Explorer中进行测试而不删除所有console.log(),则需要使用Firebug Lite,否则会得到一些不是特别友好的错误。

(或创建您自己的console.log(),它仅返回false。)


2
我避免了类似这样的跨浏览器错误:if(console)console.log()
Craig Wohlfeil 2012年

如果在IE(F12)中打开开发人员工具,则该console对象将创建并存在,直到关闭该浏览器实例为止。
TimBüthe2014年

17

这是一个简短的脚本,用于检查控制台是否可用。如果不是,它将尝试加载Firebug,如果Firebug不可用,它将加载Firebug Lite。现在,您可以console.log在任何浏览器中使用。请享用!

if (!window['console']) {

    // Enable console
    if (window['loadFirebugConsole']) {
        window.loadFirebugConsole();
    }
    else {
        // No console, use Firebug Lite
        var firebugLite = function(F, i, r, e, b, u, g, L, I, T, E) {
            if (F.getElementById(b))
                return;
            E = F[i+'NS']&&F.documentElement.namespaceURI;
            E = E ? F[i + 'NS'](E, 'script') : F[i]('script');
            E[r]('id', b);
            E[r]('src', I + g + T);
            E[r](b, u);
            (F[e]('head')[0] || F[e]('body')[0]).appendChild(E);
            E = new Image;
            E[r]('src', I + L);
        };
        firebugLite(
            document, 'createElement', 'setAttribute', 'getElementsByTagName',
            'FirebugLite', '4', 'firebug-lite.js',
            'releases/lite/latest/skin/xp/sprite.png',
            'https://getfirebug.com/', '#startOpened');
    }
}
else {
    // Console is already available, no action needed.
}

14

除了Delan Azabani的回答外,我还喜欢分享自己的console.js,并且出于相同的目的使用。我使用一系列函数名创建了一个noop控制台,我认为这是一种非常方便的方法,并且我照顾了Internet Explorer,它具有一个console.log函数,但没有console.debug

// Create a noop console object if the browser doesn't provide one...
if (!window.console){
  window.console = {};
}

// Internet Explorer has a console that has a 'log' function, but no 'debug'. To make console.debug work in Internet Explorer,
// We just map the function (extend for info, etc. if needed)
else {
  if (!window.console.debug && typeof window.console.log !== 'undefined') {
    window.console.debug = window.console.log;
  }
}

// ... and create all functions we expect the console to have (taken from Firebug).
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

for (var i = 0; i < names.length; ++i){
  if(!window.console[names[i]]){
    window.console[names[i]] = function() {};
  }
}


7

这是我的控制台包装器类。它也为我提供了范围输出,使工作更轻松。注意在调用类的范围内运行的localConsole.debug.call()so 的使用localConsole.debug,提供对其toString方法的访问。

localConsole = {

    info: function(caller, msg, args) {
        if ( window.console && window.console.info ) {
            var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
            if (args) {
                params = params.concat(args);
            }
            console.info.apply(console, params);
        }
    },

    debug: function(caller, msg, args) {
        if ( window.console && window.console.debug ) {
            var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
            if (args) {
                params = params.concat(args);
            }
            console.debug.apply(console, params);
        }
    }
};

someClass = {

    toString: function(){
        return 'In scope of someClass';
    },

    someFunc: function() {

        myObj = {
            dr: 'zeus',
            cat: 'hat'
        };

        localConsole.debug.call(this, 'someFunc', 'myObj: ', myObj);
    }
};

someClass.someFunc();

这样在Firebug中提供了这样的输出:

In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}

或Chrome:

In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object

6

我个人使用它,这类似于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代码该页面。


为什么不if(windows.console) console.log(msg)呢?
CJStuart 2013年

window.console你的意思是。唯一有用的尝试是因为重新定义了控制台后引发了错误(如果console.log不是函数)。这样做window.console && window.console.log instanceof Function会更有用。
Aram Kocharyan

4

console.log()如果您在使用的哪种编程软件编辑器中调试过代码,就可以使用,您将看到输出很可能是最适合我的编辑器(Google Chrome)。只需按F12,然后按“控制台”选项卡。您将看到结果。快乐的编码。:)


4

开发人员在检查console。()语句时遇到了很多问题。而且,尽管Internet Explorer 10Visual Studio 2012进行了重大改进,但我确实不喜欢调试Internet Explorer 。

因此,我已经覆盖了控制台对象本身...我添加了一个__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.

IE浏览器:

    displays an alert with 'hello'.

对于那些仔细查看代码的人,您会发现console.examine()函数。我是在几年前创建的,以便可以将调试代码保留在产品的某些区域中,以帮助解决质量检查 /客户问题。例如,我将在某些已发布的代码中保留以下行:

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

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

    top.__examine_someLabel = true;

然后,我将看到所有记录的console.examine()语句。很多次都是很棒的帮助。


谢谢你这个好主意。很鼓舞人心。从您的检查功能中,我不经意间转到了调试php范围的想法。mydebug_on('somescope'),mydebug('somescope',$ data)等。现在,我可以打开/关闭主题选择性调试和php代码日志记录。就像常规linux程序一样,它可以登录标准的常规详细信息等版本。确实是个好主意!
Johan

3

简单的Internet Explorer 7及以下版本的shim,可为其他浏览器保留行号:

/* Console shim */
(function () {
    var f = function () {};
    if (!window.console) {
        window.console = {
            log:f, info:f, warn:f, debug:f, error:f
        };
    }
}());


1

进一步改进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(...);

这些功能将记录不同类型的项目(可以根据日志,信息,错误或警告进行过滤),并且在控制台不可用时不会导致错误。这些功能可在Firebug和Chrome控制台中使用。

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.