前言

在測(cè)試人員測(cè)試過程中經(jīng)常需要通過抓包來區(qū)分一些前后端的Bug，特別是Web端的測(cè)試，利用瀏覽器中的F12開發(fā)者選項(xiàng)，就能進(jìn)行網(wǎng)站界面測(cè)試、調(diào)試，分析網(wǎng)頁所出現(xiàn)的問題，查看html元素、查看響應(yīng)事件等方面。

F12開發(fā)者工具面板

用Google打開一個(gè)頁面，點(diǎn)擊鍵盤右上方的F12按鈕，彈出F12開發(fā)者工具面板。如下：

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

****控制臺(tái)（Console）：****控制臺(tái)一般用于執(zhí)行一次性代碼，查看JavaScript對(duì)象，查看調(diào)試日志信息或異常信息。

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

****網(wǎng)絡(luò)（Network）：****從發(fā)起網(wǎng)頁頁面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)、資源類型、大小、所用時(shí)間等），測(cè)試人員重點(diǎn)要掌握該功能模塊。

Network面板

窗格功能

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

2.請(qǐng)求資源面板

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

點(diǎn)擊某個(gè)資源的Name可查看該資源的詳細(xì)信息，根據(jù)選擇的資源類型顯示的信息也不太一樣。

Headers：該資源的HTTP頭信息。

General

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

Response Headers

Connection：keep-alive ——維護(hù)客戶端和服務(wù)端的連接關(guān)系

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

Content-Type：text/html ——服務(wù)端發(fā)送的類型及采用的編碼方式

Date：Tue, 14 Feb 202103:38:28 GMT ——客戶端請(qǐng)求服務(wù)端的時(shí)間

Server：nginx/1.2.4 ——服務(wù)端的Web服務(wù)端名

Transfer-Encoding：chunked ——分塊傳遞數(shù)據(jù)到客戶端

Vary：告訴下游代理是使用緩存響應(yīng)還是從原始服務(wù)器相應(yīng)

Request Headers

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

2.Preview：根據(jù)所選的資源類型（JSON、圖片、文本）顯示相應(yīng)的預(yù)覽

3.Response：顯示HTTP的Response信息

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

5.Timing：顯示資源在整個(gè)請(qǐng)求生命周期過程中各部分花費(fèi)的時(shí)間

• status：Http的狀態(tài)碼。
• Type：請(qǐng)求資源的MIME類型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)。
• Initiator：標(biāo)記請(qǐng)求是由哪個(gè)對(duì)象或者進(jìn)程發(fā)起的（請(qǐng)求源）。
• Size：從服務(wù)器下載的文件和請(qǐng)求的資源大小，若是從緩存中取得資源則該列會(huì)顯示“from cache”。
• Time：請(qǐng)求或下載的時(shí)間，從發(fā)起Request到獲取到Response所用的總時(shí)間。
• Waterfall：顯示所有網(wǎng)絡(luò)請(qǐng)求的可視化瀑布流（時(shí)間狀態(tài)軸），點(diǎn)擊時(shí)間軸，可查看該請(qǐng)求的詳細(xì)信息。

定位前后端Bug

定位前端的問題

• 點(diǎn)擊頁面上的某個(gè)按鈕無反應(yīng)時(shí)，在Console處看到j(luò)s報(bào)錯(cuò)，并在Network中沒看到前端對(duì)后端的功能接口發(fā)起調(diào)用，點(diǎn)擊按鈕無返回?cái)?shù)據(jù)，一般為前端的Bug。

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

• 和接口文檔對(duì)比一下參數(shù)是否一致，如若不一致，request url錯(cuò)誤，就是前端的BUG，若接口文檔有這個(gè)數(shù)據(jù)，但實(shí)際為空，也是前端的錯(cuò)誤。

2.定位后端的問題

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

• 在網(wǎng)頁點(diǎn)擊某個(gè)按鈕無反應(yīng)時(shí)，在Console處看到j(luò)s沒有報(bào)錯(cuò)，并在Network中看到請(qǐng)求返回的狀態(tài)碼是500，那么這個(gè)BUG就是由后端導(dǎo)致的。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。