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

Question

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

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

Answer 1

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

javascript: console.log(2);

成功将消息打印到Google Chrome中的"JavaScript控制台".

Answer 2

改进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控制台.

Answer 3

只需添加许多开发人员错过的很酷的功能:

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

这是JavaScript对象的神奇%o转储可点击和深度可浏览内容.%s只是为了记录而被展示.

这也很酷:

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

这给出了类似Java的堆栈跟踪到new Error()调用点(包括文件路径和行号!).

双方%o并new 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().

Answer 4

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

(或者创建自己的console.log(),它只返回false.)

Answer 5

这是一个简短的脚本,用于检查控制台是否可用.如果不是,它会尝试加载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.
}

Answer 6

除了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() {};
  }
}

Answer 7

或者使用此功能:

function log(message){
    if (typeof console == "object") {
        console.log(message);
    }
}

Answer 8

这是我的控制台包装类.它还为我提供了范围输出,使生活更轻松.注意使用,localConsole.debug.call()以便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

Answer 9

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