我如何打印调试消息在谷歌Chrome JavaScript控制台?
请注意，JavaScript控制台和JavaScript调试器是不一样的;它们有不同的语法AFAIK，所以在JavaScript调试器中的打印命令在这里将不起作用。在JavaScript控制台中，print()会将参数发送给打印机。
当前回答
只需要添加一个许多开发者忽略的功能:
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("");
使用此方法在控制台中以明亮的蓝色打印文本。
下面是一个简短的脚本，用于检查控制台是否可用。如果没有，它会尝试加载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.
}
只需要添加一个许多开发者忽略的功能:
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()。
我在开发人员检入他们的控制台.()语句时遇到了很多问题。而且，我真的不喜欢调试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()语句。这已经帮了我很多次了。
改进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控制台中工作。
推荐文章
- 如何检查Flutter应用程序是否正在调试中运行?
- 如何在Typescript中解析JSON字符串
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中，'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
