我如何打印调试消息在谷歌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()语句。这已经帮了我很多次了。
其他回答
只需要添加一个许多开发者忽略的功能:
console.log("this is %o, event is %o, host is %s", this, e, location.host);
这是JavaScript对象的可点击和深度浏览内容的神奇%o转储。%s只是一个记录。
这个也很酷:
console.log("%s", new Error().stack);
它提供到新的Error()调用点的类似java的堆栈跟踪(包括文件路径和行号!)
%o和new Error()。堆栈可用在Chrome和Firefox!
在Firefox中也可以使用堆栈跟踪:
console.trace();
正如https://developer.mozilla.org/en-US/docs/Web/API/console所说。
黑客快乐!
更新:一些库是由坏人编写的，他们为了自己的目的重新定义了控制台对象。要在加载库后恢复原始的浏览器控制台，请使用:
delete console.log;
delete console.warn;
....
参见堆栈溢出问题恢复console.log()。
console.debug("");
使用此方法在控制台中以明亮的蓝色打印文本。
我在开发人员检入他们的控制台.()语句时遇到了很多问题。而且，我真的不喜欢调试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()语句。这已经帮了我很多次了。
从浏览器地址栏执行以下代码:
javascript: console.log(2);
成功打印消息到“JavaScript控制台”在谷歌Chrome浏览器。
进一步完善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控制台中工作。
推荐文章
- 如何使用Jest测试对象键和值是否相等?
- 将长模板文字行换行为多行，而无需在字符串中创建新行
- Chrome:网站使用HSTS。网络错误……这个页面稍后可能会工作
- 如何在JavaScript中映射/减少/过滤一个集?
- 什么是“升级-不安全-请求”HTTP报头?
- 如何验证一个XPath表达式在Chrome开发工具或Firefox的Firebug?
- Bower: ENOGIT Git未安装或不在PATH中
- 为什么Android工作室说“等待调试器”如果我不调试?
- 添加javascript选项选择
- 在Node.js中克隆对象
- 如何删除所有断点在谷歌Chrome一步?
- 为什么在JavaScript的Date构造函数中month参数的范围从0到11 ?
- 使用JavaScript更改URL参数并指定默认值
- 在window.setTimeout()发生之前取消/终止
- 如何删除未定义和空值从一个对象使用lodash?
