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

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

樣式調(diào)試

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

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

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

顏色表示轉(zhuǎn)換：用顏色的名稱;以十六進(jìn)制數(shù);以RGB整數(shù)設(shè)置顏色;以RGB百分?jǐn)?shù)設(shè)置顏色。Shift+click即可切換另一格式。或者直接設(shè)置使用哪一種格式(點(diǎn)擊右上角齒輪狀的圖標(biāo))。

命令斷點(diǎn)調(diào)試

使用“debugger;”語(yǔ)句在代碼中加入強(qiáng)制斷點(diǎn)。

需要斷點(diǎn)條件嗎？只需將它包裝它在IF子句中：

1

2

3

if(somethingHappens){

debugger;

}

只需記住在上線前移除，另外debugger在IE下會(huì)報(bào)錯(cuò)。

JS代碼格式化

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

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

查看元素綁定的事件

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

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

Ajax 時(shí)中斷

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

頁(yè)面事件中斷

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

Javascript 異常時(shí)中斷

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

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

在 chrome developer tool 打開(kāi)的情況下, 按 ctrl + shift + F, 在通過(guò) js 鉤子查找代碼位置時(shí)很有用

查找函數(shù)定義: ctrl + shift + 0 (在 Source panel 下)

查找文件: ctrl + o (在 Source ?panel 下)

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

command line api

$(id_selector) 這個(gè)與頁(yè)面是否有 jQuery 無(wú)關(guān)

$$(css_selector)

$0, $1, $2, $3, $4

Elements 面板中最近選中的 5 個(gè)元素, 最后選擇的是 $0

這個(gè) 5 個(gè)變量時(shí)先進(jìn)先出的

copy(str) 復(fù)制 str 到剪切板, 在斷點(diǎn)時(shí)復(fù)制變量時(shí)有用

monitorEvents(object[, types])/unmonitorEvents(object[, types])

當(dāng) object 上 types 事件發(fā)生時(shí)在 console 中輸出 event 對(duì)象

更多 console api 請(qǐng) console.log(console) 或?點(diǎn)擊

更多 command line api?點(diǎn)擊

實(shí)時(shí)修改 js 代碼生效

頁(yè)面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 會(huì)立即生效，一般用這個(gè)實(shí)時(shí)的在代碼里插 console.log

注意

經(jīng)測(cè)試不支持 html 頁(yè)面中 js 修改

經(jīng)過(guò) Pretty print 格式化的腳本不支持修改

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

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

調(diào)用棧分析

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

分析 HTTP 請(qǐng)求

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

尋找bug

以線上代碼出 Bug 為例。一般上手第一步是使用代碼格式化功能將被壓縮的線上代碼展開(kāi)，然后開(kāi)啟自動(dòng)異常斷點(diǎn)，嘗試重現(xiàn) Bug。當(dāng) Bug 出現(xiàn)時(shí)代碼會(huì)自動(dòng)斷到出錯(cuò)的那一行。然后通過(guò)調(diào)用棧分析結(jié)合控制臺(tái)找到最開(kāi)始出錯(cuò)的那個(gè)函數(shù)上。一般的 Bug 到這里就算找出來(lái)了，但是如果這個(gè) Bug 是在事件回調(diào)函數(shù)或者 XHR 回調(diào)函數(shù)上，就得結(jié)合 DOM 事件斷點(diǎn)和 XHR 斷點(diǎn) 進(jìn)一步往上找哪個(gè)函數(shù)出錯(cuò)。另外，如果是發(fā)給服務(wù)器請(qǐng)求沒(méi)有得到正確的 response，可以通過(guò) Network 面板查看請(qǐng)求的參數(shù)、Cookie、HTTP 頭是否有誤。

另外，還可以通過(guò) Charles/Nginx/Fiddler 等工具將遠(yuǎn)程 js 代碼映射到自己的電腦上，免去了代碼格式化的麻煩，還可以直接編輯。

關(guān)于性能

Profiles

可以記錄JS函數(shù)和CSS選擇器對(duì)CPU的占用，以及內(nèi)存占用時(shí)間線。用來(lái)找出影響性能的瓶頸非常有幫助。

Timeline

可以記錄瀏覽器渲染的每一幀里發(fā)生了什么，從js執(zhí)行，css reflow到畫面repaint，各自占用多少時(shí)間。可以幫助你定位是什么導(dǎo)致動(dòng)態(tài)效果的幀數(shù)不流暢。

關(guān)于Chrome版本

其他功能

開(kāi)發(fā)者工具中調(diào)試修改js或者css同時(shí)自動(dòng)保存文件

Chrome插件開(kāi)發(fā)中文文檔

參考鏈接

總結(jié)

以上是生活随笔為你收集整理的chrome切换前端模式_Chrome调试工具developer tool技巧 - 轩枫阁的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。