想快速定位Bug？先學習一下F12抓包吧！

前言

測試過程中經常會進行抓包來檢視一些錯誤內容，判斷是前端的問題還是後端的問題，常見的抓包工具有Fiddler、Charles，還有Web端的F12。今天安靜來介紹下如何透過F12進行抓包檢視請求內容。加我VX：atstudy-js 回覆“測試”，進入軟體測試學習交流裙~~

F12抓包

開啟百度按下鍵盤F12或者郵件選擇檢查，這裡可以看到有一些選項：Elements、Console、Sources、Network、performance、Memory、Application、Secutity、Lighthouse，那麼這些選擇都是幹什麼的呢?對於我們測試來說能給我們提供什麼資訊呢?安靜一個個進行介紹。

Elements

表示當前頁面的HTML內容，一些擋圈頁面上的元素屬性，都可以在這裡進行檢視到。

我們也可以進行修改一些引數變成我們想要的內容。比如：我們想要將"百度一下"變成“測試-安靜”，直接雙擊HTML頁面上的文字"百度一下"進行修改。加我VX：atstudy-js 回覆“測試”，進入軟體測試學習交流裙~~

Console

這裡使用到JaveScript中的定位方法。

那麼對於我們測試來說有什麼用呢?我們可以在Console中透過JS語法檢視元素是否唯一性，以及確定我們的定位是否正確，這裡的支援語法比較多，如：xpath、css、id、name、class、tag。

具體的我們舉例來簡單說明。

xpath語法

xpath需要在前面加入$x，後面跟xpath正常語法，語法：$x("//*[@id='xx']") 安靜還是拿百度來舉例，這裡length=1表示只有一個元素符合我們輸入的語法，也確保了我們的元素唯一性。

CSS語法

Css在前面加入$$,後面正常跟Css寫法。語法：$$('#xx') 這裡寫的是css的定位語法。

ID語法

ID語法書寫：document.getElementById("xx")。

name語法

name語法書寫：document.getElementsByName("xx")。

class語法

class語法書寫：document.getElementsByClassName("xx")。

Sources

這裡主要介紹了一些JS,css等一些渲染檔案，對於我們測試來說可能不是特別重要，除非有特定需求，可以瞭解下。

Network

Network用來檢視網路請求內容。也就是一些htttp請求，比如get、post、put、 delete等多種方式，當然最常見的還是get和post。

get請求

透過上圖可以看到，我們的一些請求百度的URL，以及請求方式，請求頭中的引數資訊，下面還有一些請求的get的引數值(這裡安靜沒有截圖出來)。

post請求

安靜透過豆瓣網的登入來檢視一些引數請求內容。

可以看到請求登入的url地址，請求方式post，以及請求頭包含的內容。

圖上可以很請求的看到登入的post請求引數內容。

伺服器返回內容

服務端的返回內容需要在這個頁面中的preview中進行檢視。

透過上圖可以看到，輸入了錯誤的賬號名和密碼去進行登入，登入失敗，伺服器返回了賬號密碼錯誤。

performance

可以簡單的來做一下頁面的一個效能分析，安靜這裡透過百度來演示。

Memory

可以來錄製一段頁面上的內容，然後進行分析其記憶體情況。

Application

表示其請求中所存放的cookies、token、快取內容、css、js等一些值。如果是測試cookies相關，可以進行在這個頁面中檢視cookies內容。

總結

這裡安靜簡單的透過一些案例進行介紹瞭如何使用F12以及透過F12進行抓取請求內容，以及檢視元素屬性並確定屬性的唯一值。

熟練的使用F12工具，可以幫助我們在工作中快速定位到bug。感謝您的閱讀。希望對您有所幫助。