1.选取DOM元素

如果熟悉jquery，我们知道jQuery选取元素的方法十分的便利，如 $("#nav"), $("p.paras")...

如果网页中没有使用jQuery, chrome提供给我们另一种工具--- $$(), 用法和jQuery 的 $()一致，比如：

$$(".className"); // 返回所有该类名的元素
$$(".className")[0]; // 返回第一个元素

2.将浏览器变为一个编辑器

document.body.contentEditable = true

3.将浏览器变为设计模式

这个效果挺有意思的

document.designMode = "on"

4.监控事件

• monitorEvents($("selector")): 将监控与该选择器元素相关的事件，如果触发改事件，将会记录在console中；
• monitorEvents($("selector"), "eventName"):将监控该元素指定类型的事件；
• monitorEvents($("selector"), ["eventName1", "eventName2"...]):将监控该元素一系列的事件；
• unmonitorEvents($("selector")): 解除对改元素事件的监听

比如：

monitorEvents($("#firstImage"), "mouseover");
`````````
## 5.代码执行的时长

使用 **console.time()** **console.timeEnd()**来记录，比如：

```
console.time('myTime'); //Starts the timer with label - myTime

for(var i=0; i < 100000; i++){
  2+4+5;
}

console.timeEnd('mytime'); //Ends the timer with Label - myTime

//Output - myTime:12345.00 ms
```

## 6.将变量的值写成一个表的形式

使用 **console.table(variable)**
比如一个包含对象的数据：

```
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);
```

![1.jpg](http://upload-images.jianshu.io/upload_images/1203223-aea475fbbcffba42.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## 7.列举一个元素的属性

**dir($("selector"))**

比如：
```
dir($("#container"));
// div#container.site-main.surface-container
```

## 8.取回最后一次计算结果

**$_**

```
// console中
> 1 + 2 + 3
< 6
> $_
> 6
```