Chrome DevTools — Network

記錄網絡請求

默認情況下，只要DevTools在開啟狀態，DevTools會記錄所有的網絡請求，當然，記錄都是在Network面板展示的。
clipboard.png

停止記錄網絡請求

  • 點擊Stop recording network log紅色圖標，當它變為灰色時，表示DevTools不在記錄請求

  • 在Network面板下，Command+E(Mac)或者Ctrl+E(Windows,Linux)

clipboard.png

清除網絡請求

clipboard.png

跨頁面加載時，保留網絡請求記錄

當頁面重載或者頁面跳轉時，默認情況下，Network面板下的網絡請求記錄表也是刷新的。如果想保留之前頁面的網絡請求數據，可以勾選Preserve log。
常用的一個應用場景：登錄/注冊時會調用登錄/注冊API，開發者想查看這個接口返回的情況，但是登錄/注冊成功后一般會跳轉到新的頁面，導致了Network面板的請求記錄被刷新從而看不到登錄/注冊接口返回的情況。此時勾選上Preserve log，無論跳轉到那個頁面，都能在Network網絡請求記錄表中查看到之前接口返回的情況。

clipboard.png

頁面加載時捕獲屏幕截圖

捕獲屏幕截圖可以分析在頁面加載的過程中，用戶在不同的時間段內看到的網頁是什么樣子的。
點擊Capture screenshots圖標開啟捕獲功能，當圖標變為藍色表示已開啟，重載頁面即可看到不同時間的屏幕截圖。

clipboard.png

捕獲屏幕截圖之后，可以進行以下操作：

  • 鼠標懸浮在一張圖片上時，該圖片四周會出現一個黃色的邊框，同時，在Overview和Waterfall窗口里面也分別有一條黃色的豎線，這條黃色的豎線表示這張圖片的捕獲時間

  • 點擊某一張圖片，可以過濾掉在這張圖片捕獲之后發生的所有請求

  • 雙擊圖片，可以放大該圖片

clipboard.png

改變頁面加載時的條件

禁用瀏覽器緩存

在http請求的過程中，有些資源在頁面初次加載之后會被緩存到瀏覽器中，也就是那些狀態碼為304的資源。為了盡可能準確地模擬用戶第一次加載我們網頁時的情景，需要禁用瀏覽器緩存，這樣，每一個請求都是從服務端傳送過來的，較為準確地反應出網頁初次加載的實際情況。
clipboard.png

模擬網速條件

在Network Throttling下拉框中可以選擇不同的網絡條件進行模擬，如2G、3G、4G、WiFi等。
clipboard.png

除了選中已有的網絡選項，也可以自定義網速相關條件：打開Network Throttling菜單，選擇Custom > Add。

另一種模擬情況較為特殊，就是無網絡。利用service workers，PWA(Progressive Web Apps)在無網絡的情況下依然可以使用。模擬這種無網絡環境，直接勾選Offline即可。
clipboard.png

提示：有時候開發者會看到Network左側有個警告圖標，這個圖標就是提示開發者當前處于模擬網絡條件下。
clipboard.png

手動清除瀏覽器緩存、cookies

在網絡請求記錄表里面右鍵，選擇Clear Browser Cache或Clear Browser Cookies。
clipboard.png

覆蓋用戶代理

打開Network抽屜面板：在DevTools下，按Esc鍵即可調出DevTools的抽屜面板，可以選擇、切換不同的Tab選項。
clipboard.png

Network抽屜面板打開以后，不勾選Select automatically復選框，然后選擇一個用戶代理或者自定義一個。
clipboard.png

過濾請求

根據屬性過濾

那個漏斗，對，就是它，點擊漏斗圖標使其顏色變為藍色，然后就可以對網絡請求表中的數據進行進一步的過濾。
clipboard.png

在輸入框中可以輸入一些字符串、域、大小、狀態碼、媒體類型等等，如果業務比較簡單，可能輸入一些字符串就搜索到自己想要的結果了。可輸入的詳細類型可參考官方文檔。

根據類型過濾

clipboard.png

這里是可以多選的：按住Command(Mac)鍵或Ctrl(Windows,Linux)鍵，然后單擊不同的類型，如點擊JS和Img，則過濾出js文件和圖片。顯然，All不與其他類型共存，選擇All的時候不能再選某一個具體類型。

隱藏data URLs

data URLs指一些嵌入到文檔中的小型文件，在請求表里面以data:開頭的文件就是，如較為常見的svg文件。勾選Hide data URLs復選框即可隱藏此類文件。
clipboard.png

根據時間過濾

點擊下圖中綠色方框的圖標，顯示/隱藏Overview窗口。在Overview窗口分別拖動左邊或右邊橙色圓圈中的滑動條，就可過濾出位于兩個滑動條之間這段時間發出的請求，不是在這段時間發出的請求就被隱藏掉了。
clipboard.png

對請求表進行排序

按照列的類型排序

點擊請求表每一列的列頭，即可按照相應的類型進行排序，如，點擊Size，則可按照資源從小到大或者從大到小（點擊Size自動切換）進行排序。
clipboard.png

按照請求的不同階段排序

在請求表的列頭右鍵，然后鼠標移動到Waterfall，然后選擇以下選項，默認按照對應時間從短到長的順序排列：

  • Start Time：請求開始的時間（默認）

  • Response Time：資源開始下載的時間

  • End Time：請求結束的時間

  • Total Duration：請求的整個持續時間（發起至下載結束）

  • Latency 請求等待響應的時間

clipboard.png

比如，選擇了Total Duration，Waterfall如下圖所示：
clipboard.png

注：上圖中的不同顏色代表不同的文件類型，如js、img、css等。每個請求的瀑布流圖像都分為淺色部分和深色部分，淺色部分表示等待時間，深色部分表示下載時間，如上圖中129ms是等待時間，110ms是下載資源所用的時間。

分析請求

查看請求記錄

clipboard.png

請求表默認顯示以下列：

  • Name：文件的名字或者資源的標識符

  • Status：HTTP狀態碼

  • Type：請求資源的MIME類型

  • Initiator：以下對象或處理可以發起一個請求

    • Parse：Chrome的HTML解析器

    • Redirect：HTTP重定向

    • Script：js函數

    • Other：一些別的處理或操作，比如通過鏈接導航到一個頁面，或者是在瀏覽器的地址欄輸入一個地址然后回車

  • Size：響應頭大小+響應體大小

  • Time：總的持續時間，從發起請求到資源下載完成

  • Waterfall：每一個請求活動的不同階段的可視化展示

增加或者刪除列

在請求表的頭部右鍵選擇一個選項使其顯示或隱藏。
clipboard.png

增加自定義的列

在請求表的頭部右鍵，Response Headers > Manage Header Columns
clipboard.png

查看請求時間

在Waterfall查看某個請求相對于其他請求所消耗的時間長短及先后順序。默認是以請求發起的時間排序的，所以，瀑布流中，越靠左的請求，發起的時間越早。
clipboard.png

Headers：查看請求頭、響應頭以及請求參數

在列Name下，點擊某個請求的URL，可以查看到請求、響應的詳細內容。
clipboard.png

默認情況下，請求、響應頭是按照字母表順序顯示的http頭部的名字，如果想按照實際接收的順序顯示，點擊上圖中的view source，反之點擊上圖中的view parsed。
在Headers選項卡中也可查看請求的參數，上圖橙色方框部分。也有view source和view parsed，另外還有參數編碼格式（view URL encoded）和解碼格式（view decoded）。

Preview：查看響應體的預覽

Response：查看響應體

Cookies：查看cookies

Timing：查看請求在各個階段對應的時間

clipboard.png

各個時間段的意思：

  • Queueing：瀏覽器會在以下情況對請求進行排隊：

    • 有更高優先級的請求

    • 在這個域下，已經有6個TCP連接了，達到Chrome最大限制數量。此條規則僅適用在HTTP/1.0和HTTP/1.1

  • Stalled：Queueing中的任何一個因素發生都會導致該請求被拖延

  • Proxy negotiation：瀏覽器與代理服務器協商消耗的時間

  • DNS Lookup：瀏覽器對請求的IP地址進行DNS查找所消耗的時間

  • Initial conncection：發起連接所消耗的時間

  • Request sent：請求發送消耗的時間

  • Waiting (TTFB)：瀏覽器等待響應的時間，TTFB表示 Time To First Byte

  • Content Download：資源下載所消耗的時間

查看請求的發起對象和依賴對象

在請求表的頭部已經做過Initiator的簡單介紹，其表示該條請求是由哪個對象或是處理操作發起的。如果B請求是由A請求發起的，顯然，A是B的發起對象，B是A的依賴對象（B依賴A）。
按住Shift鍵，然后鼠標懸浮在某個請求上，該請求的發起對象由綠色標志，該請求的依賴對象由紅色標志。
clipboard.png

查看加載事件

DevTools在多個地方顯示了DOMContentLoaded和load事件發生時對應的時間。DOMContentLoaded事件對應藍色的線（或者文字），load事件對應紅色的線（或者文字）
clipboard.png

查看請求的總數量和總大小

clipboard.png

注：這里的數據表示DevTools打開以后被記錄的請求所對應的數據，如果有些請求在DevTools打開之前已經發生了，這些請求的數據是不計算在這里面的。

改變Network面板的布局

  • 過濾器的顯示隱藏（已經介紹）

  • Overview窗口的顯示隱藏（已經介紹）

  • 請求表有簡版和詳細版兩種不同的顯示，默認是簡版

點擊下圖中的圖標，可切換兩種顯示方式。圖標為藍色時表示詳細版，為灰色時表示簡版。
clipboard.png

下面我們來看看兩種顯示方式的差異：
clipboard.png

clipboard.png

其實詳細版就是多提供了一部分信息：

  • Name列多了一行灰色的文字，表示該資源的路徑

  • Status列多了一行灰色的文字，表示HTTP狀態碼對應的文本

  • Initiator列多了一行灰色的文字，表示發起對象類型

  • Size列多了一行灰色的文字，表示該資源的實際大小
    Size列的第一行數據表示請求頭和請求體的大小之和，由于HTTP請求的多樣，會導致第一行數據的大小和第二行數據大小的不同，有可能第一行的數據比第二行的數據大，也可能第一行的數據比第二行的數據小，一般有以下幾種原因：

    • 有響應頭，甚至包含cookie（第一行 > 第二行）

    • 請求被緩存了（一般情況下，第一行 < 第二行）

    • 服務端gizp壓縮（一般情況下，第一行 < 第二行）

  • Time列多了一行灰色的文字，表示請求等待響應的時間

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/282803.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/282803.shtml
英文地址，請注明出處：http://en.pswp.cn/news/282803.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Blazor University 中文版網站已上線

Blazor University 中文版網站已上線

在學習 Blazor 的過程中&#xff0c;找到了一個網站 Blazor University&#xff08;https://blazor-university.com&#xff09;。發現網站內容非常詳實&#xff0c;正像首頁所說的&#xff1a;通過瀏覽本網站中的信息&#xff0c;我打算帶您從完全的新手到Blazor的所有方面的專…
閱讀更多...
android:paddingtop 百分比,相對層中的百分比寬度

android:paddingtop 百分比,相對層中的百分比寬度

相對層中的百分比寬度我正在為登錄進行表單布局。Activity在我的Android應用程序中。下面的圖片是我希望它看起來的樣子&#xff1a;我能夠通過以下方式實現這個布局XML..問題是&#xff0c;這有點麻煩。我不得不對主機EditText的寬度進行硬編碼。具體而言&#xff0c;我必須具…
閱讀更多...
MySQL 查看表結構簡單命令

MySQL 查看表結構簡單命令

一、簡單描述表結構&#xff0c;字段類型 desc tabl_name; 顯示表結構&#xff0c;字段類型&#xff0c;主鍵&#xff0c;是否為空等屬性&#xff0c;但不顯示外鍵。 例如&#xff1a;desc table_name 二、查詢表中列的注釋信息 select * from information_schema.columns wher…
閱讀更多...
簡單獲取任意app的URL Schemes

簡單獲取任意app的URL Schemes

簡單說明 最近業務需要&#xff0c;一直在查詢App的scheme相關信息&#xff0c;找到一種比較可靠的方法&#xff0c;分享給大家 步驟如下&#xff1a; 在電腦上使用iTunes下載那個app下載完后&#xff0c;在itunes里點擊這個app&#xff0c;選擇->Show in Finder&#xff0c…
閱讀更多...
Java中short、int、long、float、double的取值范圍

Java中short、int、long、float、double的取值范圍

一、基本數據類型的特點&#xff0c;位數&#xff0c;最大值和最小值。1、基本類型&#xff1a;short 二進制位數&#xff1a;16 包裝類&#xff1a;java.lang.Short 最小值&#xff1a;Short.MIN_VALUE-32768 &#xff08;-2的15此方&#xff09;最大值&#xff1a;Short.MAX_…
閱讀更多...
.Net之接口文檔精度丟失處理

.Net之接口文檔精度丟失處理

目的最近兩天在給朋友講解如何使用ajax調用接口時候&#xff0c;我發現我用swagger調用接口返回的long類型的數據最后幾位都變成了0(例如&#xff1a;6974150586715898000)&#xff0c;本來是以為sqlite數據庫不支持long類型導致我存進去的數據出了問題&#xff0c;然后我使用接…
閱讀更多...
android 訪問sqlite,android中訪問已有的sqlite數據庫

android 訪問sqlite,android中訪問已有的sqlite數據庫

推薦文章每天進步記錄一點點話說經常性的操作svn出現各種問題,而度娘一直幫倒忙,是不是很手足無措.有時問題還是要記錄下來的.說不定還會有驚喜. 昨天遇到個問題,搜索了一下,發現第一條就是自己寫的.驚呆我了,更驚呆我的是,我是在csdn寫的,為什么在別的網站看到,完全一模一樣..…
閱讀更多...
Dnslog在SQL注入中的利用

Dnslog在SQL注入中的利用

參考文獻&#xff1a;www.anquanke.com/post/id/98096https://bbs.pediy.com/thread-223881.htm DNSlog在Web攻擊的利用 在某些無法直接利用漏洞獲得回顯的情況下&#xff0c;但是目標可以發起DNS請求&#xff0c;這個時候就可以通過DNSlog把想獲得的數據外帶出來。 常用情況 S…
閱讀更多...
讓泛型的思維扎根在腦海——深刻理解泛型

讓泛型的思維扎根在腦海——深刻理解泛型

1.前言往往一些剛接觸C#編程的初學者&#xff0c;對于泛型的認識就是直接跳到對泛型集合的使用上&#xff0c;雖然微軟為我們提供了很多內置的泛型類型&#xff0c;但是如果我們只是片面的了解調用方式&#xff0c;這會導致我們對泛型盲目的使用。至于為什么要使用泛型&#xf…
閱讀更多...
fgetcsv()函數

fgetcsv()函數

fgetcsv()函數。fgetcsv()函數可以讀取指定文件的當前行&#xff0c;使用CSV格式解析出字段&#xff0c;并返回一個包含這些字段的數組。語法格式如下&#xff1a;array fgetcsv(resource $handle [, int $length [, string $delimiter [, string $enclosure[,string $escape]]…
閱讀更多...
android 系統ui修改器,分享兩個效果 - Android 系統 UI 管理

android 系統ui修改器,分享兩個效果 - Android 系統 UI 管理

SystemUIManage.gifDimming the System Bars (沉浸模式)知乎 和 Medium 中都使用到了這個效果&#xff0c;作為沉浸式閱讀模式。// This example uses decor view, but you can use any visible view.View decorView getWindow().getDecorView();int uiOptions View.SYSTEM_U…
閱讀更多...
打游戲要存進度-備忘錄模式

打游戲要存進度-備忘錄模式

打游戲要存進度-備忘錄模式 學習自 《大話設計模式》 備忘錄模式漫談 備忘錄的這種設計思想是非常常見的&#xff0c;比如說圍棋游戲的悔棋&#xff0c;繪圖軟件的撤銷功能等等&#xff0c;都或多或少的使用了備忘錄模式來處理對象的狀態。 備忘錄(Memento): 在不破壞封裝性的前…
閱讀更多...
（10.1）Python學習筆記二

（10.1）Python學習筆記二

1、在項目工程中要模塊化測試一個開發的功能&#xff0c;在測試通過后交付給項目組其他人員繼續開發。要保證代碼開發的性能和效率以及可擴展性。 2、項目工程中的文件夾分類要功能模塊明確清晰&#xff0c;在python中引入某一個 文件夾下的文件可以使用如下方式&#xff1a; t…
閱讀更多...
利用lay-ui結合ajax實現分頁功能(不借助框架,簡單易懂)

利用lay-ui結合ajax實現分頁功能(不借助框架,簡單易懂)

效果圖: 1.創建html頁面 01.html(前臺文件) 2.創建index.php(后臺文件) ------------------熱身結束,開始正式分頁之旅------------------ 3.在html頁面中引入layui需要用到的css以及js,還有我們自己額外需要用到的jquery 4.在html文件中,將基本的分頁欄顯示出來 5.好啦,htm…
閱讀更多...
Linux系統壓縮及解壓縮

Linux系統壓縮及解壓縮

Linux系統解壓縮概述&#xff1a;本篇將介紹Linux系統中的壓縮和解壓縮的工具&#xff0c;以及歸檔工具&#xff08;tar&#xff0c;cpio&#xff09;compress/uncompress&#xff1a;對應 .Z 結尾的壓縮格式文件&#xff1b;gzip/gunzip&#xff1a;其對應的是 .gz 結尾的壓縮…
閱讀更多...
酷派手機android版本,系統版本迎來升級

酷派手機android版本,系統版本迎來升級

系統版本迎來升級這個應該是兩個版本之間最大但是卻不那么直觀的不同了&#xff0c;因為從TD版酷派大神F1采用的CoolLife UI 5.0版本&#xff0c;再到聯通版酷派大神F1所搭載的CoolLife UI 5.5版本&#xff0c;它們之間經歷了一個比較不錯的升級。在圖標ICON&#xff0c;功能設…
閱讀更多...
學習RUNOOB.COM進度一

學習RUNOOB.COM進度一

了解MongoDB 由C語言編寫的&#xff0c;是一個基于分布式文件存儲的開源數據庫系統。在高負載的情況下&#xff0c;添加更多的節點&#xff0c;可以保證服務器性能。 特點 面向文檔&#xff0c;操作簡單容易 設置任何索引&#xff0c;實現更快排序 本地或者網絡創建數據鏡像&am…
閱讀更多...
最終用戶計算安全——特權訪問控制

最終用戶計算安全——特權訪問控制

本篇算是系列的第二篇&#xff0c;之前寫了一篇關于勒索軟件攻擊的&#xff0c;坦白說寫這樣的文很費腦子&#xff0c;而且喜歡看的讀者估計也不多…不過我覺得整理一下思路&#xff0c;對于通過最終用戶計算產品或方案來提升組織安全還是有很大的意義的。所以一邊喝著清茶吃著…
閱讀更多...
MVC學習九：MVC 特性本質

MVC學習九：MVC 特性本質

一、特性的本質就是&#xff1a;對屬性、方法、類加特性&#xff0c;本質就是new 一個特性類對象賦值給屬性、方法、類。 可以通過反射的方式取得特性的值&#xff0c;代碼如下&#xff1a; ①自定義特性 public class MyAttribute:Attribute{public string Name { get; set; }…
閱讀更多...
php實現目錄及目錄文件下的遍歷

php實現目錄及目錄文件下的遍歷

效果圖: 代碼:
閱讀更多...
最新文章

Copyright @ 2022~2023