共计 5393 个字符，预计需要花费 14 分钟才能阅读完成。
Console 对象
（1）console对象是 JavaScript 的原生对象，能够输入各种信息到控制台
（2）console 的常见用处有两个。
- 调试程序，显示网页代码运行时的错误信息。
- 提供了一个命令行接口，用来与网页代码互动。
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对象的链接%cCSS 格局字符串
（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办法将不起作用。
控制台命令行 API
（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 语句时会主动停下。如果没有除错工具，debugger语句不会产生任何后果，JavaScript 引擎主动跳过这一句。
for(var i = 0; i < 5; i++){console.log(i);
if (i === 2) debugger;
} 打印出 0，1，2 当前，就会暂停，主动关上源码界面，期待进一步解决。
