文章插圖
最近打算寫一寫Chrome教程文檔，不知道大家最感興趣的是什么內(nèi)容呢？
1.如何打開
無論是在Windows還是Mac，都可以使用（FN）+F12鍵打開Chrome的Network面板 。
2.面板組成
如圖所示，Chrome的Network面板主要由5個部分組成，包括控制器、過濾器、概覽、請求列表、概要，下面簡單介紹下這5個部分的作用 。
控制器：控制面板的外觀與功能
過濾器：過濾請求列表中顯示的資源

• 按住Command（Mac）或Ctrl（Window/Linux），然后點擊過濾器可以同時選擇多個過濾器 。

概覽：顯示HTTP請求、響應(yīng)的時間軸 。
請求列表：默認時間排序，可選擇顯示列 。
概要：請求總數(shù)、總數(shù)據(jù)量、總花費時間等 。
image-20190522114020527
3.控制器
image-20190523101125138
模擬慢速網(wǎng)絡(luò)
image-20190523102954487
還可以自定義，點擊Add…
image-20190523103103402
4.過濾器
如何對請求進行過濾呢？
4.1按字符串
1.鍵入png到過濾文本框 。僅顯示包含文本的文件png 。在這種情況下，與過濾器匹配的唯一文件是PNG圖像 。
image-20190524112336773
2.類型/.*.[cj]s+$/ 。DevTools過濾掉任何資源，其文件名不以a j或c后跟1個或多個s字符結(jié)尾 。
image-20190524112320315
3.類型-main.css 。DevTools過濾掉了main.css 。如果任何其他文件與模式匹配，它們也將被過濾掉 。
image-20190524112259664
4.2按類型
image-20190523102734525

• XHR、JS、CSS、Img、Media、Font、Doc、WS（WebSocket）、Manifest或Other（此處為列出的任何其他類型）
• 多個類型，按住Command（Mac）或Ctrl（Windows、Linux）
• 按時間過濾：概覽面板，拖動滾動條
• 隱藏Data URLs：CSS圖片等小文件以 BASE64 格式嵌入HTML中，以減少HTTP請求數(shù) 。

4.3屬性過濾
下面演示使用Filter過濾器，如圖所示：
image-20190523114458965

• domain:僅顯示來自指定域的資源 。您可以使用通配符字符（*）納入多個域
• has-response-header：顯示包含指定HTTP響應(yīng)標頭的資源
• is：使用 is:running 可以查找 WebSocket 資源，is:from-cache 可查找緩存讀出的資源
• Larget-than：顯示大于指定大小的資源（以字節(jié)為單位） 。將值設(shè)為1000等同于設(shè)置為1k
• method：顯示通過指定 HTTP 方法類型檢索的資源
• mime-type：顯示指定 MIME 類型的資源
• mixed-content：顯示所有混合內(nèi)容資源（mixed-content:all）,或者僅顯示當(dāng)前顯示的資源（mixed-content:displayed）
• scheme：顯示通過未保護HTTP（scheme:http）或受保護 HTTPS（scheme:https）檢索的資源 。
• set-cookie-domain：顯示具有 Set-Cookie 標頭并且 Domain 屬性與指定值匹配的資源 。
• set-cookie-name：顯示具有 Set-Cookie 標頭并且名稱與指定值匹配的資源 。
• set-cookie-value：顯示具有 Set-Cookie 標頭并且值與指定值匹配的資源 。
• status-code：僅顯示 HTTP 狀態(tài)代碼與指定代碼匹配的資源 。

多屬性間通過空格實現(xiàn) AND 操作 。
5.請求列表的排序

1. 時間排序，默認
2. 按列排序
3. 按活動時間排序

• Start Time：發(fā)出的第一個請求位于頂部
• Response Time：開始下載的第一個請求位于頂部
• End Time：完成的第一個請求位于頂部
• Total Duration：連接設(shè)置時間和請求/響應(yīng)時間最短的請求位于頂部
• Latency：等待最短響應(yīng)時間的請求位于頂部
  • 上一頁
  • 1
  • 2
  • 3
  • 下一頁
  
  

  以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導(dǎo)!

  「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：

  
  

  • 瀏覽器工作原理簡單說明 瀏覽器工作原理詳解
  • 電腦調(diào)試麥克風(fēng)的圖文步驟 臺式電腦話筒怎么設(shè)置
  • 瀏覽器小內(nèi)存推薦 內(nèi)存小的瀏覽器是哪個
  • 瀏覽器安全證書過期 瀏覽器打開出現(xiàn)證書錯誤是怎么回事
  • 2021北斗超清衛(wèi)星地圖 谷歌實時在線街景地圖怎么看
  • google瀏覽器截圖步驟 谷歌瀏覽器截圖快捷鍵哪個鍵
  • 蘋果電腦chrome打不開網(wǎng)頁的原因 google瀏覽器mac打不開
  • 投影融合調(diào)試教程 融合投影重疊怎么處理
  • qql
  • 教你如何解決全家桶和惡意篡改瀏覽器的問題