谷歌瀏覽器F12基本用法

本文轉載自查看原文 2019-01-21 15:06 766 功能測試基礎知識

第一步：打開你想進行調試的頁面，並按F12進入到調試模式

此處以百度頁面為例進行功能展示

這是關於最右側“元素選擇器”的功能展示

關於第二個功能的使用，這個功能是將頁面適應成手機屏幕大小，

elements:點擊這個功能后出現的是當前頁面的html文件，在你想實時修改的那個元素處雙擊，可以暫時修改，不過並沒有同步到后台，這個功能通常和第一個功能元素選擇器搭配使用

console:控制台，用來打印錯誤信息和你在后台寫的console.log("顯示信息")

network:網絡功能，用於查看相關的ajax請求，詳情請看圖片（順序：從左到右，從上到下）

Network詳細介紹

那我就按照從左到右的順序來寫啦~

記錄按鈕處於打開狀態時會在此面板進行網絡連接的信息記錄，關閉后則不會記錄。
清除按鈕清除當前的網絡連接記錄信息。（點擊一下就能清空）
捕獲截屏記錄頁面加載過程中一些時間點的頁面渲染情況，截圖根據可視窗口截取，如下圖所示。
過濾器能夠自定義篩選條件，找到自己想要資源信息，如下圖所示。
指定條件有哪些？

domain：資源所在的域，即url中的域名部分。如 domain:api.github.com

has-response-header：資源是否存在響應頭，無論其值是什么。如 has-response-header：Access-Control-Allow-Origin

is：當前時間點在執行的請求。當前可用值：running

larger-than：顯示大於指定值大小規格的資源。單位是字節(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

method：使用何種HTTP請求方式。如 GET

mime-type：也寫作content-type，是資源類型的標識符。如 text/html

scheme：協議規定。如 HTTPS

set-cookie-name：服務器設置的cookies名稱

set-cookie-value：服務器設置的cookies的值

set-cookie-domain：服務器設置的cookies的域

status-code：HTTP響應頭的狀態碼
- 顯示詳細信息
- 顯示時間流
  - 是否保留日志
    當選擇保留日志，重新加載url當前界面時，之前請求顯示的資源信息，會保留下來，不會清空的喲~
  - 是否進行緩存
    
    當打開開發者工具時生效，打開這個開關，則頁面資源不會存入緩存，可以從Status欄的狀態碼看文件請求狀態。
  - 設置模擬限速，如下圖所示。
- 設置限速可以模擬處於各種網絡環境下的不同用戶訪問本頁面的情況。
- Network主題內容介紹

下列介紹中，前者為名詞解釋，后者為舉例

Name/Pat：資源名稱以及URL路徑（main.css）
Method：Http請求方法 (GET或者POST)
status/Text：Http狀態碼/文字解釋（200，ok）
Type ：請求資源的MIME類型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)
Initiator：解釋請求是怎么發起的，有四種可能的值
1.Parser ：請求是由頁面的html解析時發送
2.Redirect：請求是由頁面重定向發送
3.script ：請求是由script腳本處理發送
4.other ：請求是由其他過程發送的，比如頁面里的Link鏈接點擊