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


How do I print debug messages in the Google Chrome JavaScript Console?

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

请注意，javascript控制台与javascript调试器不同；它们的afaik语法不同，因此javascript调试器中的print命令在这里不起作用。在javascript控制台中，print()将参数发送到打印机。

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

1
javascript: console.log(2);

成功地将消息打印到Google Chrome中的"javascript控制台"。

相关讨论

改进了andru的想法，您可以编写一个脚本，如果控制台函数不存在，则可以创建这些函数：

1
2
3
4
5
if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};

然后，使用以下任何一种方法：

1
2
3
4
console.log(...);
console.error(...);
console.info(...);
console.warn(...);

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

相关讨论

只需添加一个很酷的特性，很多开发人员都会错过：

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

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

这也很酷：

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

它给出了一个类似Java的堆栈跟踪到EDCOX1调用2调用的点(包括路径到文件和行号！).

%o和new Error().stack都可以在Chrome和Firefox中使用！

对于firefox中的堆栈跟踪，也可以使用：

1
console.trace();

正如https://developer.mozilla.org/en-us/docs/web/api/console所说。

快乐黑客！

更新：有些库是由坏人编写的，他们为自己的目的重新定义了console对象。要在加载库后恢复原始浏览器console，请使用：

1
2
3
delete console.log;
delete console.warn;
....

请参阅堆栈溢出问题还原console.log()。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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.
}

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

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

相关讨论

除了德拉恩·阿扎巴尼的回答之外，我喜欢分享我的console.js，我也是为了同样的目的。我使用一系列函数名创建了一个noop控制台，我认为这是一种非常方便的方法，我负责Internet Explorer，它具有console.log功能，但没有console.debug功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 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() {};
  }
}

或使用此功能：

1
2
3
4
5
function log(message){
    if (typeof console =="object") {
        console.log(message);
    }
}
相关讨论

这是我的控制台包装类。它给了我范围输出，也使生活更容易。注意使用localConsole.debug.call()使localConsole.debug在调用类的范围内运行，提供对其toString方法的访问。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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中提供了类似的输出：

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

或铬：

1
2
3
4
5
In scope of someClass.someFunc(), obj:
Object
cat:"hat"
dr:"zeus"
__proto__: Object

我个人使用这个，类似于tarek11011：

1
2
3
4
5
6
7
8
9
10
11
// 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代码。

相关讨论

我对开发人员签入控制台()语句有很多问题。而且，我真的不喜欢调试Internet Explorer，尽管Internet Explorer 10和Visual Studio 2012等的改进非常出色。

所以，我重写了控制台对象本身…我添加了一个本地主机标志，它只允许在本地主机上使用console语句。我还向Internet Explorer添加了console()函数(改为显示alert())。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
// 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] +"

";
                }
                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] +"

";
                }
                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] +"

";
                }
                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] +"

";
                }
                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] +"

";
                }
                alert("group:

" + 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] +"

";
                }
                alert(msg +"

}");
            }
        }
    };

    /// <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));
            }
        }
    };
})();

实例使用：

1
    console.log("hello");

铬/火狐：

1
    prints hello in the console window.

Internet Explorer:

1
    displays an alert with 'hello'.

对于仔细观察代码的人，您将发现console.examine()函数。我在几年前创建了这个代码，这样我就可以在产品的某些方面保留调试代码，以帮助解决QA/客户问题。例如，我将在一些已发布的代码中留下以下行：

1
2
3
4
5
    function doSomething(arg1) {
        // ...
        console.examine("someLabel", arg1);
        // ...
    }

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

1
    top.__examine_someLabel = true;

然后，我将看到所有记录的console.examine()语句。这是一个非常好的帮助很多次。

相关讨论

你可以使用console.log()，如果你有一个调试过的代码在什么样的编程软件编辑器，你会看到输出最有可能是我最好的编辑器(google chrome)。只需按f12，然后按控制台选项卡。您将看到结果。快乐编码。：)

简单的Internet Explorer 7及以下填充程序，可保留其他浏览器的行号：

1
2
3
4
5
6
7
8
9
/* Console shim */
(function () {
    var f = function () {};
    if (!window.console) {
        window.console = {
            log:f, info:f, warn:f, debug:f, error:f
        };
    }
}());
1
console.debug("");

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

enter image description here

进一步改进了delan和andru的想法(这就是为什么这个答案是一个编辑版本)；console.log可能存在，而其他功能可能不存在，因此将默认映射到console.log的相同功能….

如果控制台函数不存在，则可以编写创建这些函数的脚本：

1
2
3
4
5
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

然后，使用以下任何一种方法：

1
2
3
4
console.log(...);
console.error(...);
console.info(...);
console.warn(...);

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