Chrome調(diào)試工具developer tool技巧

偷心無痕 2015-12-11

展開全文

Chrome這個瀏覽器贊的不能再贊了，給前端的開發(fā)調(diào)試工作帶來了極大的效率提升。

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

樣式調(diào)試

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

偽類樣式調(diào)試：偽類樣式一般不顯示出來，比如像調(diào)試元素hover的樣式怎么辦，看圖勾選即可

查看元素盒模型：盒模型對于表現(xiàn)的分析還是挺重要的，而且能看position的各個參數(shù)（如果設(shè)置了的話）

顏色表示轉(zhuǎn)換：用顏色的名稱;以十六進制數(shù);以RGB整數(shù)設(shè)置顏色;以RGB百分數(shù)設(shè)置顏色。Shift+click即可切換另一格式?；蛘咧苯釉O(shè)置使用哪一種格式（點擊右上角齒輪狀的圖標）。

命令斷點調(diào)試

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

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

if (somethingHappens) {

debugger;

}

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

JS代碼格式化

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

Chrome 32 的開發(fā)者工具支持 CSS 格式化功能：http:///zRUVHXc

查看元素綁定的事件

在 Elements 面板, 選中一個元素, 然后在右側(cè)的 Event Listeners（被隱藏時點擊箭頭可展開）下面會按類型出這個元素相關(guān)的事件, 也就是在事件捕獲和冒泡階段會經(jīng)過的這個節(jié)點的事件。

在 Event Listeners 右側(cè)下拉按鈕中可以選擇 Selected Node Only 只列出這個節(jié)點上的事件展開事件后會顯示出這個事件是在哪個文件中綁定的, 點擊文件名會直接跳到綁定事件處理函數(shù)所在行, 如果 js 是壓縮了的, 可以先 Pretty print 下, 然后再查看綁定的事件。

Ajax 時中斷

在 Scripts 面板右側(cè)有個 XHR Breakpoints, 點右側(cè)的 + 會添加一個 xhr 斷點, 斷點是根據(jù) xhr 的 url 匹配中斷的, 如果不寫匹配規(guī)則會在所有 ajax, 這個匹配只是簡單的字符串查找, 發(fā)送前中斷, 在中斷后再在 Call Stack 中查看時那個地方發(fā)起的 ajax 請求。

頁面事件中斷

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

Javascript 異常時中斷

Pretty print 左側(cè)的按鈕是開啟 js 拋異常時中斷的開關(guān), 有兩種模式：在所有異常處中斷, 在未捕獲的異常處中斷. 在異常處中斷后就可以查看為什么拋出異常了

所有 js 文件中搜索&查找 js 函數(shù)定義

在 chrome developer tool 打開的情況下, 按 ctrl + shift + F, 在通過 js 鉤子查找代碼位置時很有用
查找函數(shù)定義: ctrl + shift + 0 (在 Source panel 下)
查找文件: ctrl + o (在 Source panel 下)

更多快捷鍵: 在 chrome developer tool 中點擊右下角設(shè)置圖標，選擇shortcuts

command line api

$(id_selector) 這個與頁面是否有 jQuery 無關(guān)
$$(css_selector)
$0, $1, $2, $3, $4
- Elements 面板中最近選中的 5 個元素, 最后選擇的是 $0
- 這個 5 個變量時先進先出的
copy(str) 復(fù)制 str 到剪切板, 在斷點時復(fù)制變量時有用
monitorEvents(object[, types])/unmonitorEvents(object[, types])
- 當 object 上 types 事件發(fā)生時在 console 中輸出 event 對象
更多 console api 請 console.log(console) 或點擊
更多 command line api 點擊

實時修改 js 代碼生效

頁面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 會立即生效，一般用這個實時的在代碼里插 console.log
注意
- 經(jīng)測試不支持 html 頁面中 js 修改
- 經(jīng)過 Pretty print 格式化的腳本不支持修改

console 中執(zhí)行的代碼可斷點

在 console 中輸入代碼的最后一行加上 //@ sourceURL=filename.js, 會在 Scripts 面板中有個叫 filename.js 的文件, 然后他就和外部 js 文件一樣了，又可以斷點調(diào)試了（如果沒發(fā)現(xiàn)，可以再調(diào)試面板中CTRL+O，輸入文件名即可）。

sdgsdf

調(diào)用棧分析

這個非常常用，Sources 面板下右上角的那一部分，可以試試查看變量的內(nèi)容，結(jié)合斷點調(diào)試最佳。方法是在source面板中，選擇某個變量，右鍵選擇“Add to watch”。（點擊JS代碼的左側(cè)行數(shù)可添加和刪除斷點）

分析 HTTP 請求

Network 面板下列出了所有的 HTTP 請求，可以很方便的查看請求內(nèi)容、HTTP 頭、請求時間等信息。常用于分析ajax請求等

尋找bug

以線上代碼出 Bug 為例。一般上手第一步是使用代碼格式化功能將被壓縮的線上代碼展開，然后開啟自動異常斷點，嘗試重現(xiàn) Bug。當 Bug 出現(xiàn)時代碼會自動斷到出錯的那一行。然后通過調(diào)用棧分析結(jié)合控制臺找到最開始出錯的那個函數(shù)上。一般的 Bug 到這里就算找出來了，但是如果這個 Bug 是在事件回調(diào)函數(shù)或者 XHR 回調(diào)函數(shù)上，就得結(jié)合 DOM 事件斷點和 XHR 斷點進一步往上找哪個函數(shù)出錯。另外，如果是發(fā)給服務(wù)器請求沒有得到正確的 response，可以通過 Network 面板查看請求的參數(shù)、Cookie、HTTP 頭是否有誤。
另外，還可以通過 Charles/Nginx/Fiddler 等工具將遠程 js 代碼映射到自己的電腦上，免去了代碼格式化的麻煩，還可以直接編輯。