关于javascript:JavaScript-教程学习补遗八

（1）console对象是 JavaScript 的原生对象，能够输入各种信息到控制台
（2）console 的常见用处有两个。

调试程序，显示网页代码运行时的错误信息。
提供了一个命令行接口，用来与网页代码互动。

（1）console.log办法用于在控制台输入信息。它能够承受一个或多个参数，将它们连接起来输入。console.log办法会主动在每次输入的结尾，增加换行符。

console.log('Hello World')
// Hello World
console.log('a', 'b', 'c')
// a b c

（2）如果第一个参数是格局字符串（应用了格局占位符），console.log办法将顺次用前面的参数替换占位符，而后再进行输入。

console.log('%s + %s = %s', 1, 1, 2)
//  1 + 1 = 2

（3）console.log办法反对以下占位符，不同类型的数据必须应用对应的占位符。

%s 字符串
%d 整数
%i 整数
%f 浮点数
%o 对象的链接
%c CSS 格局字符串

（4）应用 %c 占位符时，对应的参数必须是 CSS 代码，用来对输入内容进行 CSS 渲染。

// 输入的内容将显示为黄底红字。console.log(
  '%cThis text is styled!',
  'color: red; background: yellow; font-size: 24px;'
)

（5）如果参数是一个对象，console.log会显示该对象的值。

console.log({foo: 'bar'})
// Object {foo: "bar"}
console.log(Date)
// function Date() { [native code] }

（6）console.info办法会在输入信息的后面，加上一个蓝色图标。
（7）console.debug输入的信息不会显示，只有在关上显示级别在 verbose 的状况下，才会显示。
（8）console对象的所有办法，都能够被笼罩。因而，能够依照本人的须要，定义 console.log 办法。

['log', 'info', 'warn', 'error'].forEach(function(method) {console[method] = console[method].bind(
    console,
    new Date().toISOString()
  );
});

console.log("出错了！");
// 2014-05-18T09:00.000Z 出错了！

（9）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)

（10）能够这样了解，log办法是写入规范输入（stdout），warn办法和 error 办法是写入规范谬误（stderr`）。
（11）对于某些复合类型的数据，console.table办法能够将其转为表格显示。

var languages = [{ name: "JavaScript", fileExtension: ".js"},
  {name: "TypeScript", fileExtension: ".ts"},
  {name: "CoffeeScript", fileExtension: ".coffee"}
];

console.table(languages);

（12）count办法用于计数，输入它被调用了多少次。

function greet(user) {console.count();
  return 'hi' + user;
}

greet('bob')
//  : 1
// "hi bob"

greet('alice')
//  : 2
// "hi alice"

greet('bob')
//  : 3
// "hi bob"

（13）count办法能够承受一个字符串作为参数，作为标签，对执行次数进行分类。

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"

（14）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

（15）显示 DOM 对象的所有属性。

console.dir(document.body)

（16）dirxml办法次要用于以目录树的模式，显示 DOM 节点。

console.dirxml(document.body)

（17）如果参数不是 DOM 节点，而是一般的 JavaScript 对象，console.dirxml等同于console.dir。

console.dirxml([1, 2, 3])
// 等同于
console.dir([1, 2, 3])

（18）console.assert办法次要用于程序运行过程中，进行条件判断，如果不满足条件，就显示一个谬误，但不会中断程序执行。

console.assert(false, '判断条件不成立')
// Assertion failed: 判断条件不成立

// 相当于
try {if (!false) {throw new Error('判断条件不成立');
  }
} catch(e) {console.error(e);
}

（19）console.time()，console.timeEnd()这两个办法用于计时，能够算出一个操作所破费的精确工夫。time办法示意计时开始，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

（20）console.group和 console.groupEnd 这两个办法用于将显示的信息分组。它只在输入大量信息时有用，分在一组的信息，能够用鼠标折叠 / 开展。

console.group('一级分组');
console.log('一级分组的内容');

console.group('二级分组');
console.log('二级分组的内容');

console.groupEnd(); // 二级分组完结
console.groupEnd(); //

（21）console.groupCollapsed办法与 console.group 办法很相似，惟一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是开展的。

console.groupCollapsed('Fetching Data');

console.log('Request Sent');
console.error('Error: Server not responding (500)');

console.groupEnd();

（22）console.trace办法显示以后执行的代码在堆栈中的调用门路。

console.trace()
// console.trace()
//   (anonymous function)
//   InjectedScript._evaluateOn
//   InjectedScript._evaluateAndWrap
//   InjectedScript.evaluate

（23）console.clear办法用于革除以后控制台的所有输入，将光标回置到第一行。如果用户选中了控制台的“Preserve log”选项，console.clear办法将不起作用。

（1）$_

$_属性返回上一个表达式的值。

2 + 2
// 4
$_
// 4

（2）$0 – $4

控制台保留了最近 5 个在 Elements 面板选中的 DOM 元素，$0代表倒数第一个（最近一个），$1代表倒数第二个，以此类推直到$4。

（3）$(selector)

$(selector)返回第一个匹配的元素，等同于 document.querySelector()。留神，如果页面脚本对$ 有定义，则会笼罩原始的定义。比方，页面外面有 jQuery，控制台执行 $(selector) 就会采纳 jQuery 的实现，返回一个数组。
（4）$$(selector)

$$(selector)返回选中的 DOM 对象，等同于document.querySelectorAll。

（5）$x(path)

$x(path)办法返回一个数组，蕴含匹配特定 XPath 表达式的所有 DOM 元素。

$x("//p[a]")

（6）inspect(object)

inspect(object)办法关上相干面板，并选中相应的元素，显示它的细节。DOM 元素在 Elements 面板中显示，比方 inspect(document) 会在 Elements 面板显示 document 元素。JavaScript 对象在控制台面板 Profiles 面板中显示，比方inspect(window)。

（7）getEventListeners(object)

getEventListeners(object)办法返回一个对象，该对象的成员为 object 注销了回调函数的各种事件（比方 click 或keydown），每个事件对应一个数组，数组的成员为该事件的回调函数。
keys(object)，values(object)

keys(object)办法返回一个数组，蕴含 object 的所有键名。

values(object)办法返回一个数组，蕴含 object 的所有键值。

var o = {'p1': 'a', 'p2': 'b'};

keys(o)
// ["p1", "p2"]
values(o)
// ["a", "b"]

（8）monitorEvents(object[, events])办法监听特定对象上产生的特定事件。事件产生时，会返回一个 Event 对象，蕴含该事件的相干信息。unmonitorEvents办法用于进行监听。

monitorEvents(window, "resize");
monitorEvents(window, ["resize", "scroll"])

下面代码别离示意单个事件和多个事件的监听办法。

monitorEvents($0, 'mouse');
unmonitorEvents($0, 'mousemove'); // 进行监听。

monitorEvents($0, 'mouse');
unmonitorEvents($0, 'mousemove'); // 进行监听。

（9）monitorEvents容许监听同一大类的事件。所有事件能够分成四个大类。

mouse：”mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”
key：”keydown”, “keyup”, “keypress”, “textInput”
touch：”touchstart”, “touchmove”, “touchend”, “touchcancel”
control：”resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”

monitorEvents($("#msg"), "key");  // 监听所有 `key` 大类的事件。

（10）其余

clear()：革除控制台的历史。
copy(object)：复制特定 DOM 元素到剪贴板。
dir(object)：显示特定对象的所有属性，是 console.dir 办法的别名。
dirxml(object)：显示特定对象的 XML 模式，是 console.dirxml 办法的别名。

debugger语句次要用于除错，作用是设置断点。如果有正在运行的除错工具，程序运行到 debugger 语句时会主动停下。如果没有除错工具，debugger语句不会产生任何后果，JavaScript 引擎主动跳过这一句。

for(var i = 0; i < 5; i++){console.log(i);
  if (i === 2) debugger;
}

打印出 0，1，2 当前，就会暂停，主动关上源码界面，期待进一步解决。

关于javascript:JavaScript-教程学习补遗八

Console 对象

console 对象的静态方法

控制台命令行 API

debugger 语句