目录
console 对象与控制台
console
console对象是 JavaScript 的原生对象,它有点像 Unix 系统的标准输出stdout和标准错误stderr,可以输出各种信息到控制台,并且还提供了很多有用的辅助方法。
console的常见用途有两个。
调试程序,显示网页代码运行时的错误信息。
提供了一个命令行接口,用来与网页代码互动。
console 对象的静态方法
console对象提供的各种静态方法,用来与控制台窗口互动。
console.log(),console.info(),console.debug()
console.log()
用于在控制台输出信息。它可以接受一个或多个参数,将它们连接起来输出。
console.log('Hello World')
// Hello World
console.log('a', 'b', 'c')
// a b c
console.log()
会自动在每次输出的结尾,添加换行符。
console.log(1);
console.log(2);
console.log(3);
// 1
// 2
// 3
格式占位符
如果第一个参数是格式字符串(使用了格式占位符),console.log方法将依次用后面的参数替换占位符,然后再进行输出。
console.log(' %s + %s = %s', 1, 1, 2)
// 1 + 1 = 2
console.log()
支持以下占位符,不同类型的数据必须使用对应的占位符。
%s
字符串%d
整数%i
整数%f
浮点数%o
对象的链接%c
CSS 格式字符串
var number = 11 * 9;
var color = 'red';
console.log('%d %s balloons', number, color);
// 99 red balloons
- css 样式
console.log(
'%cThis text is styled!',
'color: red; background: yellow; font-size: 24px;'
)
上面代码运行后,输出的内容将显示为黄底红字。
console.info 是 console.log() 的别名,用法完全一样。只不过console.info() 会在输出信息的前面,加上一个蓝色图标。
console.debug 方法与 console.log() 类似,会在控制台输出调试信息。
但是,默认情况下,console.debug 输出的信息不会显示,只有在打开显示级别在 verbose
的情况下,才会显示。
- 方法的覆盖
['log', 'info', 'warn', 'error'].forEach(function(method) {
console[method] = console[method].bind(
console,
new Date().toISOString()
);
});
console.log("出错了!");
// 2014-05-18T09:00.000Z 出错了!
console.warn(),console.error()
warn方法和error方法也是在控制台输出信息,它们与log方法的不同之处在于,
warn方法输出信息时,在最前面加一个黄色三角,表示警告;
error方法输出信息时,在最前面加一个红色的叉,表示出错。
同时,还会高亮显示输出文字和错误发生的堆栈。其他方面都一样。
console.error('Error: %s (%i)', 'Server is not responding', 500)
// Error: Server is not responding (500)
console.warn('Warning! Too few nodes (%d)', document.childNodes.length)
// Warning! Too few nodes (1)
console.table()
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);
console.count()
count方法用于计数,输出它被调用了多少次。
function greet(user) {
console.count();
return 'hi ' + user;
}
greet('bob')
// : 1
// "hi bob"
greet('alice')
// : 2
// "hi alice"
greet('bob')
// : 3
// "hi bob"
console.dir(),console.dirxml()
dir 方法用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。
console.log({f1: 'foo', f2: 'bar'})
// Object {f1: "foo", f2: "bar"}
console.dir({f1: 'foo', f2: 'bar'})
// Object
// f1: "foo"
// f2: "bar"
// __proto__: Object
上面代码显示dir方法的输出结果,比log方法更易读,信息也更丰富。
console.assert()
console.assert()
方法主要用于程序运行过程中,进行条件判断,如果不满足条件,就显示一个错误,但不会中断程序执行。
这样就相当于提示用户,内部状态不正确。
它接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会提示有错误,在控制台输出第二个参数,否则不会有任何结果。
console.assert(false, '判断条件不成立')
// Assertion failed: 判断条件不成立
// 相当于
try {
if (false) {
throw new Error('判断条件不成立');
}
} catch(e) {
console.error(e);
}
console.time(),console.timeEnd()
这两个方法用于计时,可以算出一个操作所花费的准确时间。
console.time('Array initialize');
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd('Array initialize');
// Array initialize: 1914.481ms
time方法表示计时开始,timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后,控制台会显示“计时器名称: 所耗费的时间”。
console.group(),console.groupEnd(),console.groupCollapsed()
console.group和console.groupEnd这两个方法用于将显示的信息分组。它只在输出大量信息时有用,分在一组的信息,可以用鼠标折叠/展开。
console.group('一级分组');
console.log('一级分组的内容');
console.group('二级分组');
console.log('二级分组的内容');
console.groupEnd(); // 一级分组结束
console.groupEnd(); // 二级分组结束
console.groupCollapsed()
与 console.group()
很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。
console.trace(),console.clear()
console.trace()
显示当前执行的代码在堆栈中的调用路径。
console.trace()
// console.trace()
// (anonymous function)
// InjectedScript._evaluateOn
// InjectedScript._evaluateAndWrap
// InjectedScript.evaluate
debugger 语句
debugger语句主要用于除错,作用是设置断点。
如果有正在运行的除错工具,程序运行到debugger语句时会自动停下。如果没有除错工具,debugger语句不会产生任何结果,JavaScript 引擎自动跳过这一句。
Chrome 浏览器中,当代码运行到debugger语句时,就会暂停运行,自动打开脚本源码界面。
for(var i = 0; i < 5; i++){
console.log(i);
if (i === 2) debugger;
}
上面代码打印出0,1,2以后,就会暂停,自动打开源码界面,等待进一步处理。
控制台命令行 API
浏览器控制台中,除了使用console对象,还可以使用一些控制台自带的命令行方法。
$_
$_
属性返回上一个表达式的值。
2 + 2
// 4
$_
// 4
$0 - $4
控制台保存了最近5个在 Elements 面板选中的 DOM 元素,$0
代表倒数第一个(最近一个),$1
代表倒数第二个,以此类推直到$4。
$(selector)
$(selector)
返回第一个匹配的元素,等同于 document.querySelector()
。
注意,如果页面脚本对 $
有定义,则会覆盖原始的定义。
比如,页面里面有 jQuery,控制台执行 $(selector)
就会采用 jQuery 的实现,返回一个数组。
$$(selector)
$$(selector)
返回选中的 DOM 对象,等同于 document.querySelectorAll()
$x(path)
$x(path)
方法返回一个数组,包含匹配特定 XPath 表达式的所有 DOM 元素。
$x("//p[a]")
上面代码返回所有包含 a 元素的 p 元素。
inspect(object)
inspect(object)
打开相关面板,并选中相应的元素,显示它的细节。
DOM 元素在Elements面板中显示,比如inspect(document)会在 Elements 面板显示document元素。
JavaScript 对象在控制台面板Profiles面板中显示,比如inspect(window)。
keys(object),values(object)
keys(object)
方法返回一个数组,包含 object 的所有键名。
values(object)
方法返回一个数组,包含 object 的所有键值。
var o = {'p1': 'a', 'p2': 'b'};
keys(o)
// ["p1", "p2"]
values(o)
// ["a", "b"]
monitorEvents(object[, events]) ,unmonitorEvents(object[, events])
monitorEvents(object[, events])
方法监听特定对象上发生的特定事件。
事件发生时,会返回一个Event对象,包含该事件的相关信息。unmonitorEvents()
用于停止监听。
monitorEvents(window, "resize");
monitorEvents(window, ["resize", "scroll"])
其他
命令行 API 还提供以下方法。
clear():清除控制台的历史。
copy(object):复制特定 DOM 元素到剪贴板。
dir(object):显示特定对象的所有属性,是console.dir方法的别名。
dirxml(object):显示特定对象的 XML 形式,是console.dirxml方法的别名。
原文地址
本教程采用知识共享 署名-相同方式共享 3.0协议