/**
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
console.log(
'%cThis text is styled!',
'color: red; background: yellow; font-size: 24px;' // 输出的内容将显示为黄底红字 This text is styled!
)
console.log(' %s + %s ', 1, 1, '= 2') // 1 + 1 = 2
// 如果参数是一个对象,console.log会显示该对象的值
console.log({foo: 'bar'}) // Object {foo: "bar"}
console.log(Date) // function Date() { [native code] } 结果为一个构造函数
// console.info是console.log方法的别名,用法完全一样。只不过console.info方法会在输出信息的前面,加上一个蓝色图标。
// console.debug方法与console.log方法类似,会在控制台输出调试信息。但是,默认情况下,console.debug输出的信息不会显示,只有在打开显示级别在verbose的情况下,才会显示。
// console.warn()输出信息时,在最前面加一个黄色三角,表示警告;
// console.error方法输出信息时,在最前面加一个红色的叉,表示出错。同时,还会高亮显示输出文字和错误发生的堆栈。
// log方法是写入标准输出(stdout),warn方法和error方法是写入标准错误(stderr)
// 自定义 console 方法,增加时间显示
['log', 'info', 'warn', 'error'].forEach(function(method) {
console[method] = console[method].bind(
console,
new Date().toISOString()
);
});
console.log("出错了!"); // 2014-05-18T09:00.000Z 出错了!
// console.table() 将某些复合类型数据,转为表格显示
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);
var languages = {
csharp: { name: "C#", paradigm: "object-oriented" },
fsharp: { name: "F#", paradigm: "functional" }
};
console.table(languages);
// console.count() 计数,输出被调用了多少次
function greet(user) {
console.count();
return 'hi ' + user;
}
greet('bob')// : 1 // "hi bob"
greet('alice')// : 2 // "hi alice"
greet('bob')// : 3 // "hi bob"
function greet(user) {
console.count(user);
return "hi " + user;
}
greet('bob')// bob: 1 // "hi bob"
greet('alice')// alice: 1 // "hi alice"
greet('bob')// bob: 2 // "hi bob"
// console.dir()用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示
// console.dirxml()
console.dir({f1: 'foo', f2: 'bar'}) // 比log方法更易读,信息也更丰富
// Object
// f1: "foo"
// f2: "bar"
// __proto__: Object
console.dir(document.body) // 显示 DOM 对象的所有属性
console.dirxml(document.body) // 以目录树的形式显示 DOM 对象的所有属性
// console.assert()主要用于程序运行过程中,进行条件判断,如果不满足条件,就显示一个错误,但不会中断程序执行。
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
// console.group和console.groupEnd这两个方法用于将显示的信息分组,只在输出大量信息时有用,分在一组的信息,可以用鼠标折叠/展开。
// console.groupCollapsed方法与console.group方法很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。
// console.trace()显示当前执行的代码在堆栈中的调用路径
// console.clear()用于清除当前控制台的所有输出,将光标回置到第一行
/**
* 控制台命令行API
* 浏览器命令行控制台自带的命令行方法。
*/
// $_ :属性返回上一个表达式的值
2 + 2 // 4
$_ // 4
// $0 - $4 :控制台保存了最近5个在 Elements 面板选中的 DOM 元素,$0代表倒数第一个(最近一个),$1代表倒数第二个,以此类推直到$4。
// $(selector):等同于document.querySelector(),返回第一个匹配的元素
// $$(selector):返回选中的 DOM 对象,等同于document.querySelectorAll
// $x(path):方法返回一个数组,包含匹配特定 XPath 表达式的所有 DOM 元素
$x("//p[a]") //返回所有包含a元素的p元素
// inspect(object):打开相关面板,并选中相应的元素,显示它的细节
// getEventListeners(object):返回一个对象,该对象的成员为object登记了回调函数的各种事件(比如click或keydown),每个事件对应一个数组,数组的成员为该事件的回调函数
// keys(object)方法返回一个数组,包含object的所有键名
// values(object)方法返回一个数组,包含object的所有键值
var o = {'p1': 'a', 'p2': 'b'};
keys(o) // ["p1", "p2"]
values(o) // ["a", "b"]
// monitorEvents(object[, events])方法监听特定对象上发生的特定事件
// unmonitorEvents方法用于停止监听
// debugger语句主要用于除错,作用是设置断点。如果有正在运行的除错工具,程序运行到debugger语句时会自动停下。如果没有除错工具,debugger语句不会产生任何结果,JavaScript 引擎自动跳过这一句。
for(var i = 0; i < 5; i++){
console.log(i);
if (i === 2) debugger; // Chrome 浏览器中,当代码运行到debugger语句时,就会暂停运行,自动打开脚本源码界面。
}