Chrome 的開(kāi)發(fā)者工具分為 8 個(gè)大模塊，每個(gè)模塊及其主要功能為：

• Element 標(biāo)簽頁(yè)： 用于查看和編輯當(dāng)前頁(yè)面中的 HTML 和 CSS 元素,。
• Network 標(biāo)簽頁(yè)：用于查看 HTTP 請(qǐng)求的詳細(xì)信息,，如請(qǐng)求頭、響應(yīng)頭及返回內(nèi)容等,。
• Source 標(biāo)簽頁(yè)：用于查看和調(diào)試當(dāng)前頁(yè)面所加載的腳本的源文件,。
• TimeLine 標(biāo)簽頁(yè)： 用于查看腳本的執(zhí)行時(shí)間、頁(yè)面元素渲染時(shí)間等信息,。
• Profiles 標(biāo)簽頁(yè)：用于查看 CPU 執(zhí)行時(shí)間與內(nèi)存占用等信息,。
• Resource 標(biāo)簽頁(yè)：用于查看當(dāng)前頁(yè)面所請(qǐng)求的資源文件，如 HTML,，CSS 樣式文件等,。
• Audits 標(biāo)簽頁(yè)：用于優(yōu)化前端頁(yè)面，加速網(wǎng)頁(yè)加載速度等,。
• Console 標(biāo)簽頁(yè)：用于顯示腳本中所輸出的調(diào)試信息,，或運(yùn)行測(cè)試腳本等。

1.代碼格式化

一般情況下上線前 js 文件在都會(huì)壓縮一下, 壓縮的 javascript 幾乎沒(méi)有可讀性, 幾乎無(wú)法設(shè)定斷點(diǎn). 在 Sourse 面板下面打開(kāi)一個(gè)壓縮的js文件,，會(huì)有個(gè) Pretty print 按鈕(這種符號(hào) {}), 點(diǎn)擊會(huì)將壓縮 js 文件格式化, 方便設(shè)斷點(diǎn),，提高可讀性。

2.查看元素綁定事件

在 Elements 面板, 選中一個(gè)元素, 然后在右側(cè)的 Event Listeners 下面會(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ù)所在行,。

3.Ajax 時(shí)中斷

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

4.頁(yè)面事件中斷

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

5.Javascript 異常時(shí)中斷

在 Chrome 開(kāi)發(fā)者工具中，可以開(kāi)啟運(yùn)行時(shí)錯(cuò)誤自動(dòng)暫停這一功能,，從而使開(kāi)發(fā)者工具能在發(fā)現(xiàn)運(yùn)行時(shí)腳本異常時(shí),，在異常腳本處暫停運(yùn)行，跳轉(zhuǎn)至調(diào)試頁(yè)面,，供開(kāi)發(fā)人員進(jìn)一步查找該運(yùn)行時(shí)異常產(chǎn)生的原因,。

自動(dòng)暫停按鈕的下方有一個(gè)選項(xiàng)，Pause On Caught Exceptions，如果勾選上,，則即使所發(fā)生運(yùn)行時(shí)異常的代碼在 try/catch 范圍內(nèi),，Chrome 開(kāi)發(fā)者工具也能夠在錯(cuò)誤代碼處停住。

6.DOM Level 3 Event 事件中斷

在 Elements 面板, 選中一個(gè)元素右鍵, Break on 有兩個(gè)選項(xiàng)：subtree modifications, attributes modifications, 這兩個(gè)對(duì)應(yīng) DOM Level 3 Event 中的DOMSubtreeModified , DOMSubtreeModified 事件 在 Scripts 面板 DOM Breakpoints 處會(huì)列出所有 level3 的 event 中斷,。

7.在 js 文件中搜索&查找 js 函數(shù)定義

• 在 chrome developer tool 打開(kāi)的情況下, 按 ctrl + shift + F, 在通過(guò) js 鉤子查找代碼位置時(shí)很有用, 查找可以支持正則表達(dá)式
• 查找函數(shù)定義: ctrl + shift + 0 (在 Sources panel 下)
• 查找文件: ctrl + o (在 Sources panel 下)
• 更多快捷鍵: 在 chrome developer tool 中按 ? 查看幫助

8.command line api

兩種類型的命令行：
1. 單行模式,。單行模式是chrome的默認(rèn)命令行模式，它允許我們一次輸入一行代碼,。單行模式的優(yōu)點(diǎn)是支持自動(dòng)完成,。
這個(gè)很強(qiáng)大的，就像在終端中一樣,，你還可以使用上下鍵來(lái)調(diào)入最近使用過(guò)的命令,。
2. 多行模式。多行模式是單行模式的加強(qiáng)版,，它允許我們一次輸入多行代碼并且馬上執(zhí)行,。

例子：

• console.group()和console.groupEnd() 分組顯示
• console.dir()可以顯示一個(gè)對(duì)象所有的屬性和方法
• console.dirxml()用來(lái)顯示網(wǎng)頁(yè)的某個(gè)節(jié)點(diǎn)（node）所包含的html/xml代碼。
• console.trace()用來(lái)追蹤函數(shù)的調(diào)用軌跡,。
• console.time()和console.timeEnd(),，用來(lái)顯示代碼的運(yùn)行時(shí)間。

控制臺(tái)詳解

更多 command line api

chrome developer tool doc