01你所不知道的chrome实用功能

• 获取DOM元素并以数组展示

• 秒变所见即所得的编辑器

• 获取某个DOM元素所有绑定的事件

• 监测DOM元素触发的事件

• 用计时器来获取某段代码块的运行时间

• 以表格的形式输出数组

• 列出某个元素所有属性、清理控制台和内存

注：以下引用的代码均在控制台下输入
1.获取DOM元素并以数组展示

 $$("ID");$$("className");$$("tagName");

2.秒变所见即所得的编辑器

document.body.contentEditable=true;

3.获取某个DOM元素所有绑定的事件

genEventlisteners($("obj"));

4.监测DOM元素触发的事件

 monitorEvents($("obj"));  //检测元素上所有事件，在控制台显示被触发的事件

5.用计时器来获取某段代码块的运行时间

console.time('myTime'); //开始计时 - myTime
    var num=0;
    for(var i=0; i < 10000; i++){
         num+=i;
        }
console.timeEnd('myTime'); //结束并输出计时时长 - myTime 
 注：myTime可以为任意字符串，但前后必须一致

6.以表格的形式输出数组

var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}];
console.table(myArray);

效果如下：

| a | b | C | d | j | k |
| :----: |:---------:|:-----:|:-----:|:-----:|:-----:|
| 1 | 2 | 3 | | | |
| 1 | 2 | 3 | 4 | | |
| | | | |11 | 22 |
| 1 | 2 | 3 | | | | |

7.列出某个元素所有属性、清理控制台和内存

dir($("obj"));//输出所有属性
clear();//清理控制台和内存