chrome's developer console

原文链接： https://medium.freecodecamp.org/10-tips-to-maximize-your-javascript-debugging-experience-b69a75859329；

一、 选取DOM 元素
1. $(“tagName”/“.class”/“#id”)： 返回匹配的第一个元素；
2. $$(“tagName”/“.class”)： 以数组形式返回所有匹配的元素（$$(“input”)[2]）；

二、将浏览器转换为编辑器
1. document.body.contentEditable = true;

三、找出元素对应的事件
1. getEventListeners($(“selector”))： 返回对象数组；
2. getEventListeners($(“selector”)).eventName[0].listener： 返回指定元素的特定事件；
for example： getEventListeners($(“input”)).click[0].listener；

四、监听事件
1. monitorEvents($(“selector”))： 监听指定元素的所有事件；
2. monitorEvents($(“selector”), “eventName”)： 监听指定元素的特定事件；
for example: monitorEvents($(“input”), “focus”/ [“click”, “focus”]);
3. unmonitorEvents($(“selector”))： 停止监听；

五、计算某段代码的运行时间
for example:
console.time(‘myTime’);
for (var i = 0; i < 10; i++) {
//do something
}
console.timeEnd(‘myTime’);
会输出该循环的耗时；

六、将变量的值以表格的形式展现
for example:
var arr = [{a: 1, b: 2, c: 3}, {a: 1, b: 4, c: 5, d: 6}, {f: 3, k: 9}];
console.table(arr);
输出：

七、检查DOM元素，并跳转到该element所在的位置
1. inspect($(“selector”)) 
for example: inspect($(“a”)[3])将会跳到第四个a元素
2. $0, $1, $2, etc. 将会跳到最近检查的元素上；

八、列出元素属性
1. dir($(“selector”)): 返回包含元素所有属性的对象；

九、获取上一次输出的结果
for example:
3 + 3 + 3;
//the answer is 9;

$_
//9;

十、clear the console and the memory
clear()