chrome developer tool 調試技巧2

我大概是從 0八、09 年從 Firebug 轉入 Chrome Developer Tool，一直用到如今，越用越喜歡。我平時調錯時經常使用的功能有：

• 代碼格式化
  能夠將被壓縮的代碼自動展開
• 實時代碼編輯
  能夠在運行時動態改變 JS 代碼，而且不須要刷新頁面就能夠看到效果，通常用這個實時的在代碼裏插 console.log
• DOM 事件/XHR 斷點
  能夠針對 DOM 結構改變/屬性改變/鍵盤鼠標事件 等下斷點，直接斷到事件的第一個 listener 函數上。還能夠對 XHR 請求下斷點，斷到發起請求的那一行代碼上
• 調用棧分析
  這個很是經常使用，Scripts 面板下右上角的那一部分
• 自動異常斷點
  當代碼執行出錯時，能夠自動斷到出錯的代碼行上，直接分析出錯時的運行時環境
• 分析 HTTP 請求
  Network 面板下列出了全部的 HTTP 請求，能夠很方便的查看請求內容、HTTP 頭、請求時間等信息

以線上代碼出 Bug 爲例。通常上手第一步是使用代碼格式化功能將被壓縮的線上代碼展開，而後開啓自動異常斷點，嘗試重現 Bug。當 Bug 出現時代碼會自動斷到出錯的那一行。而後經過調用棧分析結合控制檯找到最開始出錯的那個函數上。通常的 Bug 到這裏就算找出來了，可是若是這個 Bug 是在事件回調函數或者 XHR 回調函數上，就得結合 DOM 事件斷點和 XHR 斷點 進一步往上找哪一個函數出錯。另外，若是是發給服務器請求沒有獲得正確的 response，能夠經過 Network 面板查看請求的參數、Cookie、HTTP 頭是否有誤。
另外，還能夠經過 Charles/Nginx/Fiddler 等工具將遠程 js 代碼映射到本身的電腦上，免去了代碼格式化的麻煩，還能夠直接編輯。

還有些比較小的 Tips:

• console.group/console.groupEnd 能夠將 log 信息分組展現，看起來更舒服
• console.warn/console.error 能夠輸出 warning 和 error log
• element 面板右側實時編輯的 css 樣式，能夠在 resource 面板裏保存起來
• 關於樣式還有個技巧，Elements 面板右上角的 styles 欄，右側有三個圖標，功能依次是：根據當前元素建立一個 css 樣式、模擬 :hover/:active 等僞類、顏色值類型選擇。實用
• resource 面板能夠刪除和修改 cookie/localstorage
• scripts 面板下的 ctrl+o 能夠快速跳轉腳本文件，ctrl+shift+o 快速跳轉函數
• 右下角的齒輪圖標裏有個選項是開發者工具和網頁左右分屏（Dock to the right，默認是上下分屏），寬屏必備
• 接上，還有個選項是禁用 Cookit，必點
• 接上，在選項面板裏還能夠手工編輯 user agent 和模擬觸摸事件

最後說說 IE 6 的調試，我是這麼個流程：

1. 首先嚐試在 Chrome 下重現該 Bug，若是能重現，就先把 Chrome 裏能重現的 Bug 修了。肯定 Chrome 裏 OK，可是 IE 6 有問題，再繼續下一步
2. 到 IE 裏首先嚐試高版本 IE，好比 IE 9。E 9 的開發者工具還不錯，也能夠下斷點，調用棧分析、控制檯樣樣都有。若是 IE 9 裏沒問題，那就繼續嘗試 IE8，一直定位到能重現該問題的最高版本的 IE 上。即便是 IE 7，其開發者工具也仍是勉強能用的……若是不幸的碰上一個 IE 6 only 的 Bug，那就只有繼續下一步
3. 到這一步的話通常就是最苦逼的時刻。IE 6 實在是沒有太好用的 JS 調試工具（聽說 Visual Studio 能夠調，我沒用過，歡迎補充）。這時候通常就是二分+alert的土法定位到出錯行，加上耐心和時間，還有一點點運氣。這一步的話強烈推薦開 Fiddler。