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

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

javascript: console.log(2);

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

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

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

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

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

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

这是我的控制台包装类。它还提供了范围输出，使工作更简单。注意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...}

或铬:

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

或者使用这个函数:

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

我个人使用这个，它类似于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.log()，你会看到输出很可能是我最好的编辑器(谷歌Chrome)。只需按F12并按控制台选项卡。您将看到结果。快乐的编码。：）

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

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

因此，我已经重写了控制台对象本身…我添加了一个__localhost标志，它只允许在localhost上使用控制台语句。我还添加了console.()函数到Internet Explorer(反而显示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()函数。我在几年前创建了这个，这样我就可以在产品周围的某些区域留下调试代码，以帮助解决质量保证/客户问题。例如，我会在一些发布的代码中留下以下一行:

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

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

    top.__examine_someLabel = true;

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

简单的Internet  Explorer  7及以下垫片，为其他浏览器保留行号:

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

只需要添加一个许多开发者忽略的功能:

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

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

这个也很酷:

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

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

%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() .log。

进一步完善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控制台中工作。

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

打印: