1.選取DOM元素
如果熟悉jquery吭露,我們知道jQuery選取元素的方法十分的便利在讶,如 $("#nav"), $("p.paras")...
如果網(wǎng)頁中沒有使用jQuery, chrome提供給我們另一種工具--- $$(), 用法和jQuery 的 $()一致杖玲,比如:
$$(".className"); // 返回所有該類名的元素
$$(".className")[0]; // 返回第一個元素
2.將瀏覽器變?yōu)橐粋€編輯器
document.body.contentEditable = true
3.將瀏覽器變?yōu)樵O(shè)計模式
這個效果挺有意思的
document.designMode = "on"
4.監(jiān)控事件
- monitorEvents($("selector")): 將監(jiān)控與該選擇器元素相關(guān)的事件,如果觸發(fā)改事件,將會記錄在console中憎兽;
- monitorEvents($("selector"), "eventName"):將監(jiān)控該元素指定類型的事件撼泛;
- monitorEvents($("selector"), ["eventName1", "eventName2"...]):將監(jiān)控該元素一系列的事件挠说;
- unmonitorEvents($("selector")): 解除對改元素事件的監(jiān)聽
比如:
monitorEvents($("#firstImage"), "mouseover");
`````````
## 5.代碼執(zhí)行的時長
使用 **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)**
比如一個包含對象的數(shù)據(jù):
```
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.取回最后一次計算結(jié)果
**$_**
```
// console中
> 1 + 2 + 3
< 6
> $_
> 6
```