前言

測(cè)試過(guò)程中經(jīng)常會(huì)進(jìn)行抓包來(lái)查看一些錯(cuò)誤內(nèi)容，判斷是前端的問(wèn)題還是后端的問(wèn)題，常見(jiàn)的抓包工具有Fiddler，Charles，還有web端的F12。今天安靜來(lái)介紹下如何通過(guò)F12進(jìn)行抓包查看請(qǐng)求內(nèi)容

瀏覽器抓包

打開(kāi)百度按下鍵盤(pán)F12或者郵件選擇檢查，這里可以看到有一些選項(xiàng)：Elements，Console，Sources，Netork，performance，Memory，Application，Secutity，Lighthouse，那么這寫(xiě)選擇都是干什么的呢？對(duì)于我們測(cè)試來(lái)說(shuō)能給我們提供什么信息呢？安靜一個(gè)個(gè)進(jìn)行介紹

Elements

Elements：表示當(dāng)前頁(yè)面的HTML內(nèi)容，一些擋圈頁(yè)面上的元素屬性，都可以在這里進(jìn)行查看到。

我們也可以進(jìn)行修改一些參數(shù)變成我們想要的內(nèi)容。比如：我們想要將"百度一下"變成“測(cè)試-安靜”，直接雙擊HTML頁(yè)面上的文字"百度一下"進(jìn)行修改。

Console

Console：這里使用到JaveScript中的定位方法。 那么對(duì)于我們測(cè)試來(lái)說(shuō)有什么用呢？ 我們可以在Console中通過(guò)JS語(yǔ)法查看元素是否唯一性，以及確定我們的定位是否正確，這里的支持語(yǔ)法比較多，如：xpath，css，id，name，class，tag。具體的我們舉例來(lái)簡(jiǎn)單說(shuō)明

xpath語(yǔ)法

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

CSS語(yǔ)法

Css在前面加入$$,后面正常跟Css寫(xiě)法。語(yǔ)法：?$$('#xx')?這里寫(xiě)的是css的定位語(yǔ)法

ID語(yǔ)法

ID語(yǔ)法書(shū)寫(xiě)：document.getElementById("xx")

class語(yǔ)法

class語(yǔ)法書(shū)寫(xiě)：document.getElementsByClassName("xx")

Sources

這里主要介紹了一些JS,css等一些渲染文件，對(duì)于我們測(cè)試來(lái)說(shuō)可能不是特別重要，除非有特定需求，可以了解下。

Netork

Netork用來(lái)查看網(wǎng)絡(luò)請(qǐng)求內(nèi)容。也就是一些htttp請(qǐng)求，比如get，post，put, delete等多種方式，當(dāng)然最常見(jiàn)的還是get和post。

get請(qǐng)求

通過(guò)上圖可以看到，我們的一些請(qǐng)求百度的URL，以及請(qǐng)求方式，請(qǐng)求頭中的參數(shù)信息，下面還有一些請(qǐng)求的get的參數(shù)值(這里安靜沒(méi)有截圖出來(lái)。)

post請(qǐng)求

安靜通過(guò)豆瓣網(wǎng)的登錄來(lái)查看一些參數(shù)請(qǐng)求內(nèi)容

可以看到請(qǐng)求登錄的url地址，請(qǐng)求方式post，以及請(qǐng)求頭包含的內(nèi)容

圖上可以很請(qǐng)求的看到登錄的post請(qǐng)求參數(shù)內(nèi)容。

服務(wù)器返回內(nèi)容

服務(wù)端的返回內(nèi)容需要在這個(gè)頁(yè)面中的preview中進(jìn)行查看。

通過(guò)上圖可以看到，輸入了錯(cuò)誤的賬號(hào)名和密碼去進(jìn)行登錄，登錄失敗，服務(wù)器返回了賬號(hào)密碼錯(cuò)誤。

performance

performance：可以簡(jiǎn)單的來(lái)做一下頁(yè)面的一個(gè)性能分析，安靜這里通過(guò)百度來(lái)演示。

Memory

Memory：可以來(lái)錄制一段頁(yè)面上的內(nèi)容，然后進(jìn)行分析其內(nèi)存情況。

Application

Application：表示其請(qǐng)求中所存放的cookies，token，緩存內(nèi)容，css，js等一些值。如果是測(cè)試cookies相關(guān)，可以進(jìn)行在這個(gè)頁(yè)面中查看cookies內(nèi)容。

總結(jié)

這里安靜簡(jiǎn)單的通過(guò)一些案例進(jìn)行介紹了如何使用F12以及通過(guò)F12進(jìn)行抓取請(qǐng)求內(nèi)容，以及查看元素屬性并確定屬性的唯一值。熟練的使用F12工具，可以幫助我們?cè)诠ぷ髦锌焖俣ㄎ坏絙ug。感謝您的閱讀。希望對(duì)您有所幫助。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-704964.html