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