JavaScript console对象与控制台


/**
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语句时,就会暂停运行,自动打开脚本源码界面。
}