Chrome的簡潔、快速吸引了無數人，它的啟動速度、頁面解析速度都很快，同時得益於Google V8的快速，Javascript執行速度也飛快。而且它對HTML5和CSS3的支援也完善，html類的富客戶端應用Chrome上無論是流暢性還是呈現的效果，都是比較出色的，這對於開發者，特別是對於那些喜歡研究前沿技術的前端開發者來說，是很重要的。

樣式除錯

普通元素：右鍵選擇審查元素即可檢視當前dom元素的樣式

偽類樣式除錯：偽類樣式一般不顯示出來，比如像除錯元素hover的樣式怎麼辦，看圖勾選即可

檢視元素盒模型：盒模型對於表現的分析還是挺重要的，而且能看position的各個引數（如果設定了的話）

顏色表示轉換：用顏色的名稱;以十六進位制數;以RGB整數設定顏色;以RGB百分數設定顏色。Shift+click即可切換另一格式。或者直接設定使用哪一種格式（點選右上角齒輪狀的圖示）。

命令斷點除錯

使用“debugger;”語句在程式碼中加入強制斷點。

需要斷點條件嗎？只需將它包裝它在IF子句中：

只需記住在上線前移除，另外debugger在IE下會報錯。

JS程式碼格式化

js 檔案在上線前一般都會進行壓縮, 壓縮的 javascript 為一行式幾乎沒有可讀性, 幾乎無法設定斷點. 在 Sources 面板下面（先在Elements開啟某個js）有個 Pretty print 按鈕(這種符號 {}), 點選會將壓縮 js 檔案格式化縮排規整的檔案, 這時候在設定斷點可讀性就大大提高了。一秒鐘由一行變成人類可讀的多行式程式碼，再也不用貼上到sublime再Jsformt調整格式了。

檢視元素繫結的事件

在 Elements 面板, 選中一個元素, 然後在右側的 Event Listeners（被隱藏時點選箭頭可展開） 下面會按型別出這個元素相關的事件, 也就是在事件捕獲和冒泡階段會經過的這個節點的事件。

在 Event Listeners 右側下拉按鈕中可以選擇 Selected Node Only 只列出這個節點上的事件展開事件後會顯示出這個事件是在哪個檔案中繫結的, 點選檔名會直接跳到繫結事件處理函式所在行, 如果 js 是壓縮了的, 可以先 Pretty print 下, 然後再檢視繫結的事件。

Ajax 時中斷

在 Scripts 面板右側有個 XHR Breakpoints, 點右側的 + 會新增一個 xhr 斷點, 斷點是根據 xhr 的 url 匹配中斷的, 如果不寫匹配規則會在所有 ajax, 這個匹配只是簡單的字串查詢, 傳送前中斷, 在中斷後再在 Call Stack 中檢視時那個地方發起的 ajax 請求。

頁面事件中斷

除了給設定常規斷點外, 還可以在某一特定事件發生時中斷(不針對元素) , 在 Scripts 面板右側, 有個 Event Listener Breakpoints, 這裡列出了支援的所有事件, 不僅 click, keyup 等事件, 還支援 Timer(在 setTimeout setInterval 處理函式開始執行時中斷), onload, scroll 等事件。

Javascript 異常時中斷

Pretty print 左側的按鈕是開啟 js 拋異常時中斷的開關, 有兩種模式：在所有異常處中斷, 在未捕獲的異常處中斷. 在異常處中斷後就可以檢視為什麼丟擲異常了

所有 js 檔案中搜索&查詢 js 函式定義

• 在 chrome developer tool 開啟的情況下, 按 ctrl + shift + F, 在通過 js 鉤子查詢程式碼位置時很有用
• 查詢函式定義: ctrl + shift + 0 (在 Source panel 下)
• 查詢檔案: ctrl + o (在 Source  panel 下)

• 更多快捷鍵: 在 chrome developer tool 中點選右下角設定圖示，選擇shortcuts

command line api

• $(id_selector) 這個與頁面是否有 jQuery 無關
• $$(css_selector)
• 0,$0,$1, 2,$2,$3, $4
  • Elements 面板中最近選中的 5 個元素, 最後選擇的是 $0
  • 這個 5 個變數時先進先出的
• copy(str) 複製 str 到剪下板, 在斷點時複製變數時有用
• monitorEvents(object[, types])/unmonitorEvents(object[, types])
  • 當 object 上 types 事件發生時在 console 中輸出 event 物件
• 更多 console api 請 console.log(console) 或 點選
• 更多 command line api 點選

實時修改 js 程式碼生效

• 頁面外部 js 檔案在 Scripts 面板中可以直接修改, 改完後按 ctrl + S 儲存, 會立即生效，一般用這個實時的在程式碼裡插 console.log
• 注意
  • 經測試不支援 html 頁面中 js 修改
  • 經過 Pretty print 格式化的指令碼不支援修改

console 中執行的程式碼可斷點

在 console 中輸入程式碼的最後一行加上 //@ sourceURL=filename.js, 會在 Scripts 面板中有個叫 filename.js 的檔案, 然後他就和外部 js 檔案一樣了，又可以斷點除錯了（如果沒發現，可以再除錯面板中CTRL+O，輸入檔名即可）。

呼叫棧分析

這個非常常用，Sources 面板下右上角的那一部分，可以試試檢視變數的內容，結合斷點除錯最佳。方法是在source面板中，選擇某個變數，右鍵選擇“Add to watch”。（點選JS程式碼的左側行數可新增和刪除斷點）

分析 HTTP 請求

Network 面板下列出了所有的 HTTP 請求，可以很方便的檢視請求內容、HTTP 頭、請求時間等資訊。常用於分析ajax請求等

尋找bug

以線上程式碼出 Bug 為例。一般上手第一步是使用程式碼格式化功能將被壓縮的線上程式碼展開，然後開啟自動異常斷點，嘗試重現 Bug。當 Bug 出現時程式碼會自動斷到出錯的那一行。然後通過呼叫棧分析結合控制檯找到最開始出錯的那個函式上。一般的 Bug 到這裡就算找出來了，但是如果這個 Bug 是在事件回撥函式或者 XHR 回撥函式上，就得結合 DOM 事件斷點和 XHR 斷點 進一步往上找哪個函數出錯。另外，如果是發給伺服器請求沒有得到正確的 response，可以通過 Network 面板檢視請求的引數、Cookie、HTTP 頭是否有誤。另外，還可以通過 Charles/Nginx/Fiddler 等工具將遠端 js 程式碼對映到自己的電腦上，免去了程式碼格式化的麻煩，還可以直接編輯。

關於效能

Profiles

可以記錄JS函式和CSS選擇器對CPU的佔用，以及記憶體佔用時間線。用來找出影響效能的瓶頸非常有幫助。

 Timeline

可以記錄瀏覽器渲染的每一幀裡發生了什麼，從js執行，css reflow到畫面repaint，各自佔用多少時間。可以幫助你定位是什麼導致動態效果的幀數不流暢。

關於Chrome版本

其他功能

開發者工具中除錯修改js或者css同時自動儲存檔案

Chrome外掛開發中文文件

參考連結