chrome developer tools小技巧

最喜歡用的瀏覽器是chrome瀏覽器，沒有之一。不僅僅因為簡潔、輕巧、速度快，更是因為其內置的強大的F12 developer tools開發者工具。

技巧1:Elements面板

1）這個是最基本的，如果想查看頁面的元素，直接點擊鼠標右鍵，inspect elements（審查元素），chrome就會自動呼出developer tools面板中的第一個標簽Elements，同時會定位到所選擇的DOM元素節點（如圖1），這樣我們就可以點擊右鍵編輯DOM節點的內容。

2）除了Elements面板左側匹配的DOM節點，右側的Style面板也很有用，其中element.style表示DOM元素的行內（inline）樣式，現在不推薦使用行內樣式，提倡寫到CSS中，所以大部分情況是空的；下面的Matched CSS Rules是寫在CSS文件中的並且匹配當前DOM節點元素的CSS樣式，用刪除線划掉的是和當前元素相關但是被后來的樣式覆蓋的；再往下灰色背景的區域不是我們自己寫的樣式，而是瀏覽器自帶的，叫做user agent stylesheet；

3）有一點需要注意：鼠標的active、hover等屬性是默認看不到的，需要點擊Toggle Element Style顯示或隱藏。

4）Metrics

用來查看塊元素的結構。如margin和padding的區別等。

 

 

 

技巧2：Source面板

1）Local modifications

最驚艷的一個技巧是修改了本地文件，developer tools會自動進行版本控制，方便查看和比較我們做過的修改。

2）debugger

單步執行、跨函數執行，step into這些功能都有。

 

3）Pretty print

代碼格式化功能，把壓縮成1行的js和css文件格式化，更美觀，易於調試。

 

技巧3：強大的console控制台

1）接受firebug的命令行API

http://getfirebug.com/wiki/index.php/Command_Line_API

如常用的$0,表示當前選中的元素。

2）使用console記錄日志

console.log()

console.warn()

console.info()

console.error()

 

技巧4：resource面板

包含了與當前頁面相關的幾乎所有資源，包括document、js、css、image等，還包括比較新潮的html5的local strage等。

 

技巧5：network面板

1）記錄了所有http request

2）還可以查看每個request的報文頭和內容等。

 

完。