前言

在測試人員測試過程中經常需要通過抓包來區分一些前后端的Bug，特別是Web端的測試，利用瀏覽器中的F12開發者選項，就能進行網站界面測試、調試，分析網頁所出現的問題，查看html元素、查看響應事件等方面。

F12開發者工具面板

用Google打開一個頁面，點擊鍵盤右上方的F12按鈕，彈出F12開發者工具面板。如下：

元素****（Elements）：****查找網頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋。

****控制臺（Console）：****控制臺一般用于執行一次性代碼，查看JavaScript對象，查看調試日志信息或異常信息。

****源代碼（Sources）：****該頁面用于查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調試JavaScript源代碼，可以給JS代碼添加斷點等。

****網絡（Network）：****從發起網頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），測試人員重點要掌握該功能模塊。

Network面板

窗格功能

• ：點擊后進入選擇元素模式，然后從頁面中選擇需要查看的元素，然后可以在開發者工具元素（Elements）一欄中定位到該元素源代碼的具體位置。
• ：默認開啟，會在面板進行網絡連接的信息記錄，關閉后則不會記錄。
• ：點擊清除網絡請求列表。
• ：過濾網絡請求，點擊打開Filters控制Requests Table具體顯示哪些內容。
• ：重新加載當前頁面的時候，之前的請求資源信息將會保留。
• ：是否進行緩存。啟動開關時頁面資源不會存入緩存，可從Status欄的狀態碼看文件請求狀態。
• ：網絡連接開關，可設置限速模擬各種網絡環境下的不同用戶訪問本頁的情況。

2.請求資源面板

• Name：資源名稱的URL路徑。

點擊某個資源的Name可查看該資源的詳細信息，根據選擇的資源類型顯示的信息也不太一樣。

Headers：該資源的HTTP頭信息。

General

• Request URL：資源的請求url****（URL和域名的區別：域名就是到.com .net .org就結束了；URL就是除了域名 還有右面的/asl;dajs;dlfsdf.html 一長串）****
• Request Method：HTTP請求方法
• Status Code：響應狀態碼****——200（狀態碼） OK（原因短語）、301 - 資源（網頁等）被永久轉移到其它URL、404 - 請求的資源（網頁等）不存在、500 - 內部服務器錯誤。****
• Remote address：請求的遠程地址
• Referrer policy: Referrer-Policy首部用來監管哪些訪問來源信息****，****會在Referer中發送應該被包含在生成的請求當中。

Response Headers

Connection：keep-alive ——維護客戶端和服務端的連接關系

Content-Encoding：gzip ——壓縮編碼類型

Content-Type：text/html ——服務端發送的類型及采用的編碼方式

Date：Tue, 14 Feb 202103:38:28 GMT ——客戶端請求服務端的時間

Server：nginx/1.2.4 ——服務端的Web服務端名

Transfer-Encoding：chunked ——分塊傳遞數據到客戶端

Vary：告訴下游代理是使用緩存響應還是從原始服務器相應

Request Headers

• Accept:text/html ——客戶端能接收的資源類型
• Accept-Encoding:gzip, deflate ——客戶端能接收的壓縮數據的類型
• Accept-Language:en-US,zh;q=0.9——客戶端接收的語言類型
• Connection:keep-alive ——維護客戶端和服務端的連接關系
• Cookie: ——客戶端暫存服務端的信息
• Host:www.jnshu.com ——連接的目標主機和端口號
• Referer:http://www.jnshu.com/daily/15052 ——來于哪里

2.Preview：根據所選的資源類型（JSON、圖片、文本）顯示相應的預覽

3.Response：顯示HTTP的Response信息

****4.Cookies：****顯示資源HTTP的Request和Response過程中的Cookies信息。

5.Timing：顯示資源在整個請求生命周期過程中各部分花費的時間

• status：Http的狀態碼。
• Type：請求資源的MIME類型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)。
• Initiator：標記請求是由哪個對象或者進程發起的（請求源）。
• Size：從服務器下載的文件和請求的資源大小，若是從緩存中取得資源則該列會顯示“from cache”。
• Time：請求或下載的時間，從發起Request到獲取到Response所用的總時間。
• Waterfall：顯示所有網絡請求的可視化瀑布流（時間狀態軸），點擊時間軸，可查看該請求的詳細信息。

定位前后端Bug

定位前端的問題

• 點擊頁面上的某個按鈕無反應時，在Console處看到js報錯，并在Network中沒看到前端對后端的功能接口發起調用，點擊按鈕無返回數據，一般為前端的Bug。

• 紅色方框圈出來的地方是參數，若要求參數不能為空，但上圖中如name字段的參數為空，那就是前端傳參的錯誤，如果這里的參數錯誤，那也是前端的問題。

• 和接口文檔對比一下參數是否一致，如若不一致，request url錯誤，就是前端的BUG，若接口文檔有這個數據，但實際為空，也是前端的錯誤。

2.定位后端的問題

preview和response都可以定位后端bug，但是preview更加直觀，可以看到所有數據的返回值。而response只會返回你選中的那條數據的返回值。

• 在網頁點擊某個按鈕無反應時，在Console處看到js沒有報錯，并在Network中看到請求返回的狀態碼是500，那么這個BUG就是由后端導致的。

• 上圖response和preview的返回值內容如果為空或者返回值不對，那就是后端的Bug。

總結

以上是生活随笔為你收集整理的测试人员必备技能——如何利用F12快速定位前后端BUG的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。