文章目錄

1.簡(jiǎn)介

2. Elements

3. Console

4. Sources

5. Network

6. performances

7. Memory內(nèi)存檢測(cè)工具

8. Application

9. Security

10. Lighthouse

1. 簡(jiǎn)介

Chrome桌面級(jí)瀏覽器，占市場(chǎng)份額的70%左右彬伦，它的開(kāi)發(fā)者工具摧扇，是每個(gè)前端開(kāi)發(fā)工程師必學(xué)工具汞贸。

主要功能如下

1. 觀察/改變 DOM
2. 觀察/改變 頁(yè)面樣式
3. 調(diào)試JS
4. 在控制臺(tái)（console）查看日志/跑腳本
5. 進(jìn)行網(wǎng)頁(yè)性能評(píng)估
6. 監(jiān)聽(tīng)網(wǎng)絡(luò)活動(dòng)
   ...

如何喚起工具

當(dāng)我們按下鍵盤(pán)的F12鍵后敦第，能看到調(diào)試工具中有默認(rèn)的一些常用調(diào)試工具苇经。如下圖所示

image.png

功能劃分

• Elements 元素面板
• Console 控制臺(tái)面板
• Network 網(wǎng)絡(luò)面板
• Sources 源代碼面板
• Performance 性能面板
• Memory 內(nèi)存面板
• Application 應(yīng)用面板
• Security 安全面板
• Lighthouse 性能評(píng)估工具

下面我們就常用功能面板來(lái)介紹下開(kāi)發(fā)者工具的功能和用法:

2. Elements

elements元素面板案淋，如下圖所示仓洼，分為左側(cè)HTML代碼部分介陶，和右側(cè)CSS代碼部分。

在左側(cè)色建，我們能清晰的看到HTML代碼的DOM結(jié)構(gòu)哺呜，當(dāng)我們選中某個(gè)節(jié)點(diǎn)的時(shí)候，按下右鍵會(huì)顯示出功能操作面板箕戳。

HTML代碼區(qū)

image.png

CSS代碼區(qū)

styles

css編輯面板某残，可以通過(guò)點(diǎn)擊樣式屬性直接修改，頁(yè)面會(huì)對(duì)應(yīng)變化

image.png

computed

CSS盒子原型陵吸，能看到BOX的大小邊界玻墅，以及各種屬性，不可編輯

image.png

layout

只能用來(lái)看flex布局和grid布局的盒子

image.png

Event Listeners

事件監(jiān)聽(tīng)器走越，能看到選中的DOM節(jié)點(diǎn)上椭豫，有哪些事件監(jiān)聽(tīng)

image.png

3. Console

console控制臺(tái)面板，主要分為三大部分

• 頂部 工具欄
• 左側(cè) 日志類(lèi)型

• 右側(cè) 日志的顯示/運(yùn)行區(qū)域

  
  
  image.png

工具欄

• 收起/展開(kāi)側(cè)邊欄

  
  
  image.png

• 清除日志

  
  
  image.png

• 創(chuàng)建實(shí)時(shí)運(yùn)行的腳本

image

• 按日志類(lèi)型顯示日志

image

• 運(yùn)行腳本

image

4. Sources

源代碼面板旨指，主要功能查看網(wǎng)頁(yè)的源代碼赏酥，包括js/css/html/圖片等和js斷點(diǎn)調(diào)試。

image.png

主要介紹下js斷點(diǎn)調(diào)試面板

image

• continue：繼續(xù)執(zhí)行代碼谆构，直到遇到另一個(gè)斷點(diǎn)

• step_over：按正常步驟裸扶，應(yīng)該會(huì)一行一行的執(zhí)行相關(guān)代碼，以便深入探索哪些代碼影響著正在更新的變量搬素。如果你的代碼中調(diào)用了另一個(gè)函數(shù)呵晨，點(diǎn)擊此按鈕將不會(huì)進(jìn)入該函數(shù)，而是直接略過(guò)熬尺，將焦點(diǎn)留在當(dāng)前函數(shù)上摸屠。

• step_into：進(jìn)入被調(diào)用的函數(shù)并且調(diào)試器將將其執(zhí)行到該函數(shù)定義中的第一行。

• step_out：在已進(jìn)入一個(gè)函數(shù)后粱哼，單擊此按鈕將導(dǎo)致函數(shù)定義的其余部分的運(yùn)行季二，調(diào)試器將將其執(zhí)行到父函數(shù)。

• step: 僅下一步操作。

• disable-breakpoints：控制斷點(diǎn)開(kāi)/關(guān)的按鈕胯舷。

• pause-gray：在異常處產(chǎn)生斷點(diǎn)刻蚯。

5. Network

image.png

工具欄

image.png

每個(gè)按鈕對(duì)應(yīng)的功能依照從左到右的順序：

• 停止/開(kāi)啟網(wǎng)絡(luò)監(jiān)聽(tīng)
• 清除當(dāng)前的網(wǎng)絡(luò)日志
• 篩選開(kāi)關(guān)，關(guān)鍵詞篩選
• 日志保留桑嘶，一般用于保留跨域頁(yè)面跳轉(zhuǎn)前的請(qǐng)求日志
• 緩存開(kāi)關(guān)炊汹，禁止緩存靜態(tài)資源
• 網(wǎng)絡(luò)設(shè)置，可模擬WiFi逃顶，4G讨便，3G，2G網(wǎng)絡(luò)環(huán)境
• 上傳網(wǎng)絡(luò)日志口蝠，可上傳他人的網(wǎng)絡(luò)日志文件查看
• 下載網(wǎng)絡(luò)日志器钟，將當(dāng)前觀測(cè)到的網(wǎng)絡(luò)情況，以文件形式保存下來(lái)

網(wǎng)絡(luò)資源類(lèi)型

image

• XHR 接口請(qǐng)求
• JS js文件
• CSS css文件
• Img 圖片資源
• Media 媒體資源妙蔗，一般是音樂(lè)視頻】
• Font 自定義字體
• DOC 文檔文件，比較少見(jiàn)
• WS websocket
• Manifest manifest文件
• Other 其他資源

時(shí)序圖

image

頂部是時(shí)間疆瑰，實(shí)心綠線(xiàn)代表網(wǎng)絡(luò)請(qǐng)求眉反，長(zhǎng)度越長(zhǎng)，代表網(wǎng)絡(luò)請(qǐng)求間隔越長(zhǎng)穆役。

具體網(wǎng)絡(luò)請(qǐng)求

image

左側(cè)是網(wǎng)絡(luò)請(qǐng)求列表寸五，點(diǎn)擊它，會(huì)顯示右側(cè)具體請(qǐng)求的信息耿币。

• headers梳杏，網(wǎng)絡(luò)請(qǐng)求信息，包含完整的URL信息淹接，http請(qǐng)求頭十性，響應(yīng)頭，請(qǐng)求參數(shù)塑悼，請(qǐng)求方式等
• Preview 接口響應(yīng)的預(yù)覽
• Response 接口響應(yīng)劲适，和上面區(qū)別就是沒(méi)有被瀏覽器格式化。本質(zhì)上是一樣的
• Initiator 來(lái)解釋請(qǐng)求的發(fā)起過(guò)程
• Timing 請(qǐng)求耗時(shí)

加載總覽

image

解釋下這張圖的意思厢蒜，該網(wǎng)絡(luò)日志的檢測(cè)記錄了

• 101個(gè)請(qǐng)求
• 網(wǎng)絡(luò)請(qǐng)求傳輸了221KB
• 一共有1.5MB的資源霞势，包括js,css,html,等等
• 耗時(shí)1.61S
• DOMContentLoaded 指的是HTML文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā)斑鸦，而無(wú)需等待樣式表愕贡、圖像和子框架的完成加載。
• Load 指的是僅用于檢測(cè)一個(gè)完全加載的頁(yè)面巷屿，頁(yè)面的html固以、css、js攒庵、圖片等資源都已經(jīng)加載完之后才會(huì)觸發(fā) load 事件嘴纺。

6.Performance

網(wǎng)頁(yè)性能檢測(cè)工具败晴，可以用查看網(wǎng)頁(yè)的FPS，CPU栽渴，根據(jù)FPS尖坤，CPU的異常，借此判斷網(wǎng)絡(luò)是哪方面出現(xiàn)了問(wèn)題闲擦，動(dòng)畫(huà)卡頓慢味，還是DOM創(chuàng)建過(guò)于頻繁，內(nèi)存泄漏等情況墅冷。

image.png

下面演示下如何啟動(dòng)性能檢測(cè)工具

image.png

工具欄

image

從左到右功能依次是

• 開(kāi)啟/停止錄制
• 刷新
• 清除記錄
• 上傳性能檢測(cè)文件
• 下載觀測(cè)到的記錄纯路，保存為一份文件
• Screenshots 開(kāi)啟截圖
• Memory 開(kāi)啟/關(guān)閉內(nèi)存觀測(cè)

簡(jiǎn)略圖

image.png

看右側(cè)有三個(gè)指標(biāo)，F(xiàn)PS寞忿，CPU驰唬，NET分別代表頁(yè)面幀率，頁(yè)面CPU使用率腔彰，網(wǎng)絡(luò)請(qǐng)求叫编。

• FPS過(guò)大時(shí)，會(huì)顯示紅色的長(zhǎng)條霹抛，代表有個(gè)長(zhǎng)幀搓逾。
• CPU欄
• 黃色：js的操作所占內(nèi)存(js代碼評(píng)估及函數(shù)調(diào)用)
• 藍(lán)色：html操作所占的內(nèi)存(主要是html編譯)
• 紫色：css操作所占的內(nèi)存(css樣式計(jì)算等)
• 灰色：其他操作所占的內(nèi)存

詳情圖

image.png

• network 網(wǎng)絡(luò)請(qǐng)求，跟network面板的時(shí)序圖使用差別不大
• Frames 每一個(gè)時(shí)間點(diǎn)的頁(yè)面截圖
• Interactions 動(dòng)畫(huà)杯拐，主要用來(lái)觀看頁(yè)面動(dòng)效
• Main js主線(xiàn)程霞篡，這個(gè)是常用的工具，在這里可以觀察到整個(gè)周期js執(zhí)行了哪些函數(shù)和方法端逼，調(diào)用棧

主要給講一下main這個(gè)火焰圖

image.png

• 從上往下朗兵，上一層級(jí)任務(wù)是下一層級(jí)的總集合
• 函數(shù)是從左往右執(zhí)行的
• 層數(shù)越多，說(shuō)明調(diào)用棧越多

概覽圖

image

• Summary 監(jiān)測(cè)時(shí)間段的總覽

• Loading 加載時(shí)間

• Scripting js執(zhí)行時(shí)間

• Rendering 渲染時(shí)間

• painting 繪畫(huà)時(shí)間

• Bottom Up 事件列表裳食，從底到上
  當(dāng)我們?cè)趍ain火焰圖里面矛市，選擇某一個(gè)函數(shù)的時(shí)候，可以看到任務(wù)的執(zhí)行棧诲祸，是從哪里開(kāi)始到哪里結(jié)束的浊吏，以及每一步的耗時(shí)

image.png

• Call Tree 函數(shù)調(diào)用棧
  和Bottom-UP類(lèi)似，當(dāng)在main選中某一個(gè)函數(shù)的時(shí)候救氯， 這里會(huì)自動(dòng)顯示函數(shù)棧

image

7.Memory內(nèi)存檢測(cè)工具

image

• Heap snapshot - 用以打印堆快照找田，堆快照文件顯示頁(yè)面的 javascript 對(duì)象和相關(guān) DOM 節(jié)點(diǎn)之間的內(nèi)存分配
• Allocation instrumentation on timeline - 在時(shí)間軸上記錄內(nèi)存信息，隨著時(shí)間變化記錄內(nèi)存信息
• Allocation sampling - 內(nèi)存信息采樣着憨，使用采樣的方法記錄內(nèi)存分配墩衙。此配置文件類(lèi)型具有最小的性能開(kāi)銷(xiāo)，可用于長(zhǎng)時(shí)間運(yùn)行的操作。它提供了由 javascript 執(zhí)行堆棧細(xì)分的良好近似值分配漆改。

8.Application

image

用來(lái)查看/修改/刪除本地緩存心铃，包括

• localstorage
• cookies
• session Storage

image.png

還有

• IndexDB 本地?cái)?shù)據(jù)庫(kù)，允許儲(chǔ)存大量數(shù)據(jù)（加強(qiáng)版LS）
• WebSQL 本地?cái)?shù)據(jù)庫(kù)挫剑，僅有Chrome支持

9.Security

用來(lái)查看SSL證書(shū)

拿百度首頁(yè)舉例子去扣，左側(cè)是網(wǎng)站來(lái)源，右側(cè)網(wǎng)站的證書(shū)信息

image

10.Lighthouse

頁(yè)面性能打分工具

較為簡(jiǎn)單樊破，直接點(diǎn)擊使用即可愉棱，會(huì)生成一份頁(yè)面評(píng)估報(bào)告

image