Chrome F12 谷歌開發者工具解析


 

 

一、工具簡單介紹

  • F12可用於網站界面、性能測試,bug定位等

以 www.baidu.com 為例:

 

 

 

Elements:查看頁面元素屬性(多用於自動化元素定位)

Console:記錄日志信息(用於定位前后端問題)

Sources:頁面所有資源(測試不常用)

Network:類比抓包獲取的信息,可以查看請求報文和響應報文以及加載時間等(常用)

Performance:頁面性能工具

Memory:后續補充(測試暫未用過)

Application:后續補充

Security:后續補充

Audits:后續補充

 

二、Network 詳解(常用)

  • 查看Network基本信息,請求了哪些地址及每個URL的網絡相關請求信息都可以看的到URL,響應狀態碼,響應數據類型,響應數據大小,響應時間等

 

 

 

  • 網絡請求時部分相關可用於測試的功能

 

 

 

Preserve log:當選擇保留日志,重新加載url當前界面時,之前請求顯示的資源信息,會保留下來,不會清空

Disable cache:當打開開發者工具時生效,打開這個開關,則頁面資源不會存入緩存,可以從Status欄的狀態碼看文件請求狀態

Online:設置模擬限速,如上圖所示。設置限速可以模擬處於各種網絡環境下的不同用戶訪問本頁面的情況

 

  • Waterfall能分割重要的請求耗時,查看具體請求耗時在哪個地方

 

 

 

我們具體分析下里面每個各代表什么意思,分別耗時多少,通過這個來分析服務器到底是哪個環節出了問題:

Queueing 是排隊的意思

Stalled 是阻塞  請求訪問該URL的主機是有並發和連接數限制的,必須要等之前的執行才能執行之后的,這段時間的耗時

DNS Lookup 是指域名解析所耗時間

Initial connection 初始化連接時間,這里一般是TCP 3次連接握手時間

SSL https特有,是一種協議

Request sent 發送請求所消耗的時間

Waiting 等待響應時間,這里一般是最耗時的

Content Download 下載內容所需要消耗的時間

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM