Chrome(F12開發(fā)者工具)是非常實(shí)用的開發(fā)輔助工具，對(duì)于前端開發(fā)者簡(jiǎn)直就是神器，但苦于開發(fā)者工具是英文界面，且沒有中文，這讓很多朋友都不知道怎么用。安下小編為大家?guī)��?lái)Chrome開發(fā)者工具基礎(chǔ)功能和高級(jí)性能分析器(Timeline、Profiles)的圖文詳解教程，下面是基礎(chǔ)功能篇。

提示：右鍵點(diǎn)擊圖片選擇在新窗口或新標(biāo)簽頁(yè)中打開可查看大圖。

一、Elements

在Element中主要分兩塊大的部分：HTML結(jié)構(gòu)面板（A）和操作dom樣式、結(jié)構(gòu)、時(shí)間的顯示面板（B）。

1.在A中,每當(dāng)你的鼠標(biāo)移動(dòng)到任何一個(gè)元素上,對(duì)應(yīng)的html視圖中會(huì)給該元素藍(lán)色的背景。

2.如果你單擊選中一個(gè)元素,在A部分的底部,會(huì)顯示該元素在html結(jié)構(gòu)中的位置關(guān)系

3.然后在B部分的styles選項(xiàng)中編輯該元素的樣式,并且看到html結(jié)構(gòu)的實(shí)時(shí)更新。

4.在B界面中切換到Event Listeners選項(xiàng),觀察該元素綁定的事件。

click 是事件名稱

.div1 事件是索引名稱(也就是通過什么綁定的)

attachment 事件來(lái)源

handler里面包含事件的毀掉主體內(nèi)容

useCapture表示該事件是否向上冒泡

5.選中一個(gè)元素,右擊鼠標(biāo),你會(huì)看到有一個(gè)彈出窗口出現(xiàn),里面有若干選項(xiàng)。

Break on:為該元素添加dom操作事件監(jiān)聽。包含三個(gè)選項(xiàng)(樹結(jié)構(gòu)改變、屬性改變、節(jié)點(diǎn)移除)。這個(gè)選項(xiàng)的作用是幫助我們監(jiān)控和定位操作元素的代碼。請(qǐng)參看下圖事例:

6.在A界面的彈出選項(xiàng)窗口中選擇node removal,在B界面切換到DOM Breakpoints 選項(xiàng),可以看到有注冊(cè)信息。然后我們點(diǎn)擊click me按鈕觸發(fā)刪除div3的事件,可以看到瀏覽器自動(dòng)為我們定位刪除該元素的代碼部分,并且停止執(zhí)行js代碼:

7.在B界面中切換到Properties選項(xiàng),可以看到選中元素的各種信息(英文單詞里面的介紹比較簡(jiǎn)單,就不一一介紹了)。

8.點(diǎn)擊A界面的任意地方,按快捷鍵ctrl+F可以看到底部有輸入框,在輸入框中輸入你想要查找的任何內(nèi)容,如果匹配到了,都回在A面板中高亮顯示

9.或者你可以點(diǎn)擊左上角的問號(hào)圖標(biāo),然后把鼠標(biāo)移動(dòng)到視圖界面中,對(duì)準(zhǔn)元素按下鼠標(biāo)左鍵,對(duì)應(yīng)的A界面會(huì)定位到選擇的元素。

二、Network

1.Network是一個(gè)監(jiān)控當(dāng)前網(wǎng)頁(yè)所有的http請(qǐng)求的面版,它主體部分展示的是每個(gè)http請(qǐng)求,每個(gè)字段表示著該請(qǐng)求的不同屬性和狀態(tài)

Timeline:該鏈接在發(fā)送過程中的時(shí)間狀態(tài)軸(我們可以把鼠標(biāo)移動(dòng)到這些紅紅綠綠的時(shí)間軸上,對(duì)應(yīng)的會(huì)有它的詳細(xì)信息:開始下載時(shí)間,等待加載時(shí)間,自身下載耗時(shí))

2.單擊面板中的任意一條http信息,會(huì)在底部彈出一個(gè)新的面板,其中記錄了該條http請(qǐng)求的詳細(xì)參數(shù)header(表頭信息、返回信息、請(qǐng)求基本狀態(tài)－－-請(qǐng)參看http1.1協(xié)議內(nèi)容對(duì)號(hào)入座)、Preview(返回的格式化轉(zhuǎn)移后文本信息)、response(轉(zhuǎn)移之前的原始信息)、Cookies(該請(qǐng)求帶的cookies)、Timing(請(qǐng)求時(shí)間變化)

3.在主面板的頂部,有一些按鈕從左到右它們的功能分別是:是否啟用繼續(xù)http監(jiān)控(默認(rèn)高亮選中過)、清空主面板中的http信息、是否啟用過濾信息選項(xiàng)(啟用后可以對(duì)http信息進(jìn)行篩選)、列出多種屬性、只列出name和time屬性、preserve log(目前不清楚啥用)、Dishable cahe(禁用緩存,所有的304返回會(huì)和fromm cahe都回變成正常的請(qǐng)求忽視cache conctrol 設(shè)定);

4.最后在主面板的底部有記錄了整體網(wǎng)絡(luò)請(qǐng)求狀態(tài)的一些基本信息

三、Resources

Resources部分較簡(jiǎn)單,主要向我們展示了本界面所加載的資源列表。還有cookie和local storage 、SESSION 等本地存儲(chǔ)信息,在這里,我們可以自由地修改、增加、刪除本地存儲(chǔ)。