測試媚创，你真的會玩Chrome么？（一）--設(shè)備模式
??network：從發(fā)起網(wǎng)頁頁面請求Request后分析HTTP請求后得到的各個(gè)請求資源信息（包括狀態(tài)彤恶、資源類型钞钙、大小、所用時(shí)間等）声离，可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化芒炼；Network面板可以監(jiān)控網(wǎng)站發(fā)出的所有請求，并將響應(yīng)主體术徊、響應(yīng)頭以及請求參數(shù)本刽、請求頭記錄在每個(gè)請求中。通過請求類型或者域名可以過濾請求赠涮。Network是查看失敗請求信息的首要位置子寓。失敗的請求會被標(biāo)注為紅色，并帶有HTTP狀態(tài)碼笋除。如果是POST請求斜友，可以看到請求的表單數(shù)據(jù)。
目錄
1垃它、網(wǎng)絡(luò)面板基礎(chǔ)
2鲜屏、控制器
3、過濾器
4国拇、概覽
5洛史、請求列表
1、網(wǎng)絡(luò)面板基礎(chǔ)
如圖所示贝奇，Chrome的Network面板主要由5個(gè)部分組成虹菲，包括控制器、過濾器掉瞳、概覽毕源、請求列表、概要陕习，下面簡單介紹下這5個(gè)部分的作用霎褐。
控制器：控制面板的外觀與功能
過濾器：過濾請求列表中顯示的資源
按住Command（Mac）或Ctrl（Window/Linux），然后點(diǎn)擊過濾器可以同時(shí)選擇多個(gè)過濾器该镣。
概覽：顯示HTTP請求冻璃、響應(yīng)的時(shí)間軸。
請求列表：默認(rèn)時(shí)間排序，可選擇顯示列省艳。
概要：請求總數(shù)娘纷、總數(shù)據(jù)量、總花費(fèi)時(shí)間等跋炕。
2赖晶、控制器
圖1:是否開啟network的日志功能，如果灰色的辐烂，就代表未開啟遏插，紅色的代表已開啟；
圖2:代表清除network日志
圖3:代表是否開啟過濾選項(xiàng)
圖4:
圖5:是網(wǎng)絡(luò)日志記錄,如果勾上,頁面刷新后,日志也不會消失(這功能很有用,比如頁面跳轉(zhuǎn)后,你想看頁面跳轉(zhuǎn)前發(fā)出的請求有哪些,比如查看別人網(wǎng)站登錄請求,登錄成功返回什么,登錄成功后又發(fā)起了些什么請求,重定向到什么地址)
圖6:緩存開關(guān)纠修，勾選后胳嘲，禁用緩存，每次從服務(wù)器重新加載扣草，可以獲得最新的頁面了牛；
圖7:這列表是網(wǎng)速閥值，可以設(shè)置上傳下載最大網(wǎng)速等德召。一般可以讓網(wǎng)頁在不同網(wǎng)絡(luò)狀態(tài)下顯示白魂；
圖8:設(shè)置按鈕，點(diǎn)擊后顯示詳細(xì)相關(guān)信息上岗；
圖9:選中圖中標(biāo)紅處福荸，可以看到請求表格的每一行都增高了，顯示的信息也更多了肴掷。
圖10:顯示/隱藏 overview敬锐，開始看到這個(gè)圖覺得頭暈，感覺上是顯示加載情況的呆瞻，但又說不出具體什么意思台夺，所以具體研究了下，下面詳細(xì)講解下：
- 刻度：代表時(shí)間
- 一條條水平線：一條水平線代表一項(xiàng)資源痴脾，這條水平線上的不同的顏色代表這項(xiàng)資源在加載過程中處于什么階段颤介；
- 有兩條豎線：前面一條是藍(lán)色，代表DOMContentLoaded 事件被觸發(fā)赞赖；后面一條是紅色滚朵，代表load事件被觸發(fā)。從概覽面板也能看到這兩個(gè)信息（如圖11）
- DOMContentLoaded事件會在頁面上DOM完全加載并解析完畢之后觸發(fā)前域，不會等待CSS辕近、圖片、子框架加載完成匿垄。
-
load事件會在頁面上所有DOM移宅、CSS归粉、JS、圖片完全加載完畢之后觸發(fā)漏峰。
圖11.png -
從垂直方向看糠悼，有些五彩斑斕的水平線有的重疊有的沒有重疊，具有重疊部分說明這些資源是在同一時(shí)間被加載的浅乔。
圖12.png - 如圖（圖12）绢掰，被勾選后，代表開啟截屏模式童擎，即截取網(wǎng)頁在加載過程中的瞬間，這些瞬間顯示了網(wǎng)頁在什么時(shí)間加載出了哪些部分攻晒。在控制面板下面出現(xiàn)了一塊新的面板顾复，用來顯示網(wǎng)頁加載過程中的截屏。當(dāng)鼠標(biāo)懸浮在一張截圖上時(shí)鲁捏，下面的請求表格面板上出現(xiàn)了這張截圖加載時(shí)的時(shí)間芯砸；點(diǎn)擊一張截圖時(shí)，請求表格面板也會顯示相應(yīng)時(shí)間內(nèi)加載的資源及其信息给梅；雙擊一張截圖假丧，可以查看這張截圖的大圖，可通過左右鍵進(jìn)行切換动羽。
過濾器
-（如圖12）Filters控制 request Table 具體顯示哪些內(nèi)容
- 可以進(jìn)行模糊搜索(只搜索url
地址),如果首尾加上/,則表示使用正則匹配(同時(shí)搜索 URL 地址和返回內(nèi)容)舊版本 chrome 可能會在過濾輸入框右邊有個(gè) regexp 選項(xiàng),勾選了正則才會生效 - 篩選框可以實(shí)現(xiàn)很多定制化的篩選包帚，比如字符串匹配，關(guān)鍵詞篩選等运吓，其中關(guān)鍵詞篩選主要有如下幾種：
domain：篩選出指定域名的請求渴邦，不僅支持自動補(bǔ)全，還支持*匹配拘哨。
has-response-header：篩選出包含指定響應(yīng)頭的請求谋梭。
is：通過is:running找出WebSocket請求。
larger-than：篩選出請求大于指定字節(jié)大小的請求倦青，其中1000表示1k瓮床。
method：篩選出指定HTTP方法的請求，比如GET請求产镐、POST請求等隘庄。
mime-type：篩選出指定文件類型的請求。
mixed-content：篩選出混合內(nèi)容的請求（不懂啥意思）磷账。
scheme：篩選出指定協(xié)議的請求峭沦，比如scheme:http、scheme:https逃糟。
set-cookie-domain：篩選出指定cookie域名屬性的包含Set-Cookie的請求吼鱼。
set-cookie-name：篩選出指定cookie名稱屬性的包含Set-Cookie的請求蓬豁。
set-cookie-value：篩選出指定cookie值屬性的包含Set-Cookie的請求。
status-code：篩選出指定HTTP狀態(tài)碼的請求菇肃。
圖13.png
（如圖13）可根據(jù)類別過濾request table顯示的記錄地粪，如果想同時(shí)進(jìn)行多維度的篩選，按住command/ctrl鍵可以同時(shí)選擇多個(gè)篩選條件琐谤。
概覽
-
按時(shí)間顯示各個(gè)請求加載的開始時(shí)間,結(jié)束時(shí)間,可以在overview 中選擇時(shí)間區(qū)域,request table 中只顯示該時(shí)間區(qū)域中加載的請求（如圖15）
圖15.png
請求列表
（如圖16）點(diǎn)擊標(biāo)紅欄里的字段蟆技，可進(jìn)行升序或者降序排序；
name表示資源名稱,點(diǎn)擊名稱可以查看資源的詳細(xì)情況
status http請求狀態(tài)碼
type 請求只有的 mime 類型
mime類型介紹詳見：https://blog.csdn.net/qq_42269433/article/details/87833165
initiator 標(biāo)記請求是由哪個(gè)對象或進(jìn)程發(fā)起的(請求源)
- parser: 請求由 chrome 的 HTML 解析器發(fā)起
- redirect: 請求是由 http 頁面發(fā)起的重定向
- script: 請求是由 script 腳本發(fā)起的
- other: 請求是由其他進(jìn)程發(fā)起的,比如用戶點(diǎn)擊一個(gè)鏈接跳轉(zhuǎn)到另一個(gè)頁面或者在地址欄輸入 URL 地址
size 從服務(wù)器下載的文件和請求的資源大小,如果是從緩存獲取的資源,該列會顯示from cache斗忌；
time 請求或下載的時(shí)間,從發(fā)起 request 到獲取 response 所用的總時(shí)間
timeline 顯示所有網(wǎng)絡(luò)請求的可視化瀑布流(時(shí)間狀態(tài)軸)可以查看該請求的詳細(xì)信息质礼；
點(diǎn)擊timeline表頭,可以對 timeline 進(jìn)行排序，主要有如下幾個(gè)維度： - Timline - Start Time：按請求的發(fā)起時(shí)間排序织阳。
- Timline - Response Time：按請求的響應(yīng)時(shí)間排序眶蕉。
- Timline - End Time：按請求的結(jié)束時(shí)間排序。
- Timline - Total Duration：按請求的總耗時(shí)排序唧躲，可以快捷的找出耗時(shí)最多的資源造挽。
- Timline - Latency：按請求的延遲排序，延遲是指請求發(fā)起的時(shí)間到響應(yīng)開始的時(shí)間弄痹，可以快捷的找出請求等待時(shí)間最長（TTFB）的資源饭入。
