Chrome這個瀏覽器贊的不能再贊了，給前端的開發調試工作帶來了極大的效率提升。
Chrome的簡潔、快速吸引了無數人，它的啟動速度、頁面解析速度都很快，同時得益於Google V8的快速，Javascript執行速度也飛快。而且它對HTML5和CSS3的支持也完善，html類的富客戶端應用Chrome上無論是流暢性還是呈現的效果，都是比較出色的，這對於開發者，特別是對於那些喜歡研究前沿技術的前端開發者來說，是很重要的。
樣式調試
普通元素：右鍵選擇審查元素即可查看當前dom元素的樣式
偽類樣式調試：偽類樣式一般不顯示出來，比如像調試元素hover的樣式怎么辦，看圖勾選即可
查看元素盒模型：盒模型對於表現的分析還是挺重要的，而且能看position的各個參數（如果設置了的話）
顏色表示轉換：用顏色的名稱;以十六進制數;以RGB整數設置顏色;以RGB百分數設置顏色。Shift+click即可切換另一格式。或者直接設置使用哪一種格式（點擊右上角齒輪狀的圖標）。
命令斷點調試
使用“debugger;”語句在代碼中加入強制斷點。
需要斷點條件嗎？只需將它包裝它在IF子句中：
|
1
2
3
|
if (somethingHappens) {
debugger;
}
|
只需記住在上線前移除，另外debugger在IE下會報錯。
JS代碼格式化
js 文件在上線前一般都會進行壓縮, 壓縮的 javascript 為一行式幾乎沒有可讀性, 幾乎無法設定斷點. 在 Sources 面板下面（先在Elements打開某個js）有個 Pretty print 按鈕(這種符號 {}), 點擊會將壓縮 js 文件格式化縮進規整的文件, 這時候在設定斷點可讀性就大大提高了。一秒鍾由一行變成人類可讀的多行式代碼，再也不用粘貼到sublime再Jsformt調整格式了。
Chrome 32 的開發者工具支持 CSS 格式化功能 ：http://t.cn/zRUVHXc
查看元素綁定的事件
在 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, $1, $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版本
chrome canary （開發板，最新）： https://www.google.com/intl/zh-CN/chrome/browser/canary.html
chrome（穩定版，常用）：http://www.google.cn/intl/zh-CN/chrome/
其他功能
開發者工具中調試修改js或者css同時自動保存文件
http://isux.tencent.com/chrome-workspace.html
Chrome插件開發中文文檔
http://open.chrome.360.cn/extension_dev/overview.html
參考鏈接