較早接觸前端的人可能最開始使用的都是Firebug除錯工具，不過後來由於Chrome的強勢逆襲以及移動端開發的興起，大部分開發者開始轉戰使用Chrome自帶的開發者工具(F12或Ctrl+Shift+I)，本文接下來就會介紹一些你平常開發中也許沒有注意到的關於Chrome Dev Tools的奇技淫巧。

剛才說了通過Ctrl+Shift+I可以開啟開發者工具，但是你知道嗎？在開發者工具中繼續按Ctrl+Shift+I還可以繼續開啟開發者工具的開發者工具，所以實際上這個開發者工具也是通過Web來構建的。

DevTools能給我們帶來什麼

通過開發者工具可以檢查、除錯以及優化你的應用程式，讓你的程式執行地更加順暢，如果你可以很好地使用它，甚至可以把開發者工具變成一個所見即所得的編輯器，同時，作為一個優秀的前端工程師，嫻熟地使用開發者工具必定會為你的工作提供一臂之力。

說了這麼多，我們究竟能用開發者工具做什麼呢？下面分別按照開發者工具的幾個面板一一介紹大家平常不怎麼注意到的一些訣竅。

強大的console

大家最常用的應該就是console.log了，但是console還有很多其它的方法如

console.warn('warningtext');//警告提示
console.info('infotext');//資訊提示
console.error('errortext');//錯誤提示
console.dir(document.body);//顯示物件的所有屬性和方法
console.dirxml(document.body);//用XML的表達方式列印指定物件
console.assert(false, 'text');//當第一個引數為false時列印錯誤資訊
console.table([{name: 'Adam', age: '10'}, {name: 'Eric', age: '20'}]);//將陣列格式化輸出
console.group('分組');
console.log('something');
console.groupEnd('分組');

console.log還可以使用字串替換以及格式化輸出，這個經常能在一些網站上看到在控制檯中列印招聘廣告，那是怎麼做到的呢？

其實很簡單就可以實現了：

console.log("I'm %s, I'm %d years %cold.", "Adam Lu", 10, "color: red");//I'm Adam Lu, I'm 10 years old. 

如果你想看你某段程式碼執行的時間，可以使用console.time和console.timeEnd，

console.time("Array initialize");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array initialize");

控制檯還有一些額外的命令，例如，你可以在裡面執行一些JavaScript表示式，操作當前頁面的DOM，監聽當前頁面的事件等。使用$0-$4可以選擇最近的5個DOM元素或JavaScript物件，使用$(選擇器)可以選擇元素，等價於document.querySelector()以及$$(選擇器)等價於document.querySelectorAll()，$x(xpath)命令可以執行一個xpath查詢，如$x(‘//img’);會找出頁面中所有的圖片，你也可以右鍵點選元素選擇“在Elements面板顯示”看對應的DOM，也可以通過inspect命令切換到審查元素模式

$_可以訪問最近的控制檯結果，清除控制檯可以使用clear()或console.clear()命令。
當你訪問新頁面時如果不想清除控制檯的資訊可以點選右鍵，選擇“Preserve Log upon Navigation”

console.profile和console.profileEnd可以檢測JavaScript佔用的CPU資訊

在控制檯中有用的快捷鍵有：
Ctrl+L 清除控制檯
Shift+Enter 多行輸入

Elements面板

Elements面板讓你可以看到DOM樹中所有的東西，並可以讓你實時編輯DOM樹，平常大家用的比較多，這裡不多做介紹，有幾個技巧如下。

移動元素

你可以直接拖拽元素來放置到DOM樹中

刪除元素

直接選擇元素然後按delete鍵

滾動到檢視內

想要把頁面滾動到檢視內，右鍵點選元素，選擇”Scroll into View”

設定DOM斷點

DOM斷點和Source面板的斷點類似，當指定的DOM屬性、子元素髮生變化時可以觸發斷點，在Elements面板的擴充套件面板裡的DOM Breakpoints裡可以看到設定斷點的元素。

檢視事件監聽器

Elements面板的擴充套件面板裡的Event Listeners裡可以檢視繫結在DOM節點的JavaScript事件監聽器。

Style擴充套件面板

可以通過Ctrl+Click CSS屬性來檢視原始碼的位置，還可以新增和觸發偽類如滑鼠滑過時的CSS。

在Elements中有用的快捷鍵有：
F2 以HTML格式來編輯切換
Esc 停止修改DOM
Ctrl+Z 撤銷上一個操作
Up/Down CSS屬性值增加1/-1
Alt + Up/Down CSS屬性值增加0.1/-0.1
Shift+Up/Down CSS屬性值增加10/-10
Shift+PageUp/PageDown CSS屬性值增加100/-100

Network面板

XHRs

你可以右擊XHR請求選擇“Replay XHR”來重新執行一個XHR請求，還可以點選preview來預覽資源的內容，如果響應是json格式的話比較有用。

清除網路快取或cookie

在Network面板右擊選擇“Clear Browser Cache/Network Cache”來清除快取或cookie

匯出瀑布流

在空白處右擊，選擇“Save as HAR with content”儲存為一個HAR檔案，然後可以在一些第三方工具網站如http://ericduran.github.io/chromeHAR/匯入這個檔案重現網路瀑布流情況。

檢視WebSocket

在網路面板，還可以使用filters按鈕來檢視WebSocket訊息結構

在Network中有用的快捷鍵有：
Ctrl+F 根據關鍵詞查詢你想要的請求
chrome://net-internals/ 可以檢視網路狀況

Source面板

格式化JavaScript

選擇你想要格式化的指令碼檔案，點選按鈕就可以了。

除錯XHR

開啟Source面板的debugger，在“XHR Breakpoints”下指定XHR的URL或URL部分，當發生XHR請求時會開啟斷點除錯。

SourceMap

點選設定->通用裡的“Enable javascript source maps”或“Enable css source maps”可以除錯
JavaScipt原始碼、CoffeeScript，甚至Sass，只需要在你的原始碼加入類似 //@ sourceMappingURL=/path/to/file.js.map即可。

Workspace

想讓本地的資料夾在Source面板下可以編輯，右鍵單擊Source面板選擇“Add Folder to Workspace”，之後就可以直接編輯該目錄下的任何檔案，把Chrome當做一個編輯器來用。

Snippets

有時你想儲存小段的指令碼、書籤或是你在瀏覽器中除錯時經常用到的，都可以使用Snippets，你可以在Source面板裡建立、儲存和執行這些Snippets.

在Source中有用的快捷鍵有：
Ctrl+F 根據關鍵詞查詢你想要的請求
Ctrl+Shift+F 在所有載入的檔案下查詢
chrome://net-internals/ 可以檢視網路狀況

Timeline面板

Timeline有三種模式來觀察記錄：
* Events 根據事件分類顯示所有記錄的事件
* Frames 顯示頁面的渲染效能
* Memory 顯示頁面隨時間的記憶體使用情況

佈局是Chrome計算頁面中所有元素的位置和尺寸的過程。一般來說，Chrome會“懶惰的”進行佈局以響應你應用中的CSS和DOM更新,這允許Chrome批量處理樣式和佈局的變化而不是一次響應一個變化。然而，應用可以強制Chrome通過查詢特定的佈局獨立元素屬性（如element.offsetWidth）來立刻非同步的實現佈局。如果重複的太頻繁或者對大型DOM樹進行操作的話，這種所謂的“強制同步佈局”是影響頁面效能的一大瓶頸，當你的應用引起強制非同步佈局時，Timeline面板會識別出來並在旁邊標記一個警告按鈕（）。當你選中這條記錄時，細節面板將會包含這段突兀程式碼的棧追蹤資訊。

你還可以通過console.timeStamp()方法在Timeline記錄中加入註釋，這可以幫助你把你的程式碼和其它瀏覽器事件或活動聯絡起來。

在Timeline中有用的快捷鍵有：
Ctrl+E 開始/結束錄製

Profile面板

Profile裡面提供了三種類型，通過這三種分析可以檢視記憶體洩露和佔用情況。
* 收集JavaScript的CPU佔用資訊
* 獲取堆的快照
* 錄製堆的分配情況

上面的Bottom UP檢視列表通過對效能的影響列出了函式，它同時也允許你檢查這些函式的呼叫路徑。

在Profile中有用的快捷鍵有：
Ctrl+E 開始/結束錄製

Resources面板

Resources可以讓你檢查應用的本地資料資源，包括indexedDB/WebSql DB，localStorage/sessionStorage，cookie以及AppCache，你還可以檢查應用的視覺資源，包括圖片、字型和樣式等。
比如AppCache中，你可以檢查Chrome已經快取了當前文件的哪些資源以及AppCache的狀態和瀏覽器連線情況。

圖上快取的資源包括以下屬性：
* Resource – 資源的URL
* Type – 快取資源的型別，可能是下面值的一種
* >Master – 這個資源的manifest屬性表明這是它的快取，這個資源也被加到了快取中
* >Explicit – 這個資源被列在manifest檔案中
* >Network – 這個資源被列在manifest檔案中作為network訪問
* >Fallback – 資源不可用時該資源被指定為fallback
* Size – 快取資源的大小

其它

Drawer

通用裡設定
可以在控制檯顯示Drawer
或者按Esc可以顯示或隱藏Drawer，

Drawer提供了一些適合移動除錯的工具，可以模擬裝置、模擬Touch事件以及GEO等相關資訊。

Drawer裡的History面板還會顯示最近的修改記錄，在source面板裡選擇“Local modifications”就會在history中顯示

要想看瀏覽器的一些渲染特性，在Rendering面板可以勾選相應選項

設定

點選開啟設定面板。
設定中有一個workspace選項，可以讓你選擇你的工作目錄，之後就可以在Source面板中編輯，步驟如下：

還有一個Shortcuts選項包含了更多快捷鍵操作。

Dock

控制檯右上角的按鈕用於切換開發者工具在頁面的位置是在右側還是底部，長按會出現供選擇新視窗開啟。

其它設定中有用的快捷鍵有：
Esc 隱藏/顯示Drawler
Ctrl+[/] 在不同面板間切換
? 開啟設定面板
chrome://appcache-internals 看哪些頁面有appcache以及他們的詳細資訊

結語

當然Chrome Dev Tools遠不止這些，它還可以用來做android遠端除錯或NodeJs除錯等，只要你去仔細探索，會發現它是多麼地強大，一定會讓你的開發效率大大提升。

參考資源