什么是F12?

F12開發(fā)者工具是瀏覽器自帶的一個(gè)開發(fā)調(diào)試工具，因?yàn)榭梢杂肍12快捷鍵直接啟動(dòng)，所以簡稱為F12工具。

F12工具因?yàn)橛腥缦碌奶攸c(diǎn)，所以被開發(fā)和測(cè)試人員廣泛使用：

1.簡單輕量免安裝，是瀏覽器內(nèi)置的開發(fā)者工具，可以提供捕獲瀏覽器的數(shù)據(jù)報(bào)文的功能；

2.作為瀏覽器的一部分，是數(shù)據(jù)收發(fā)的一端，抓取到的 HTTPs 報(bào)文是可以得到明文數(shù)據(jù)的，不像Fiddler和Charles等工具，需要安裝證書，所以操作簡單。

如何啟動(dòng)F12?

F12開發(fā)者工具的啟動(dòng)方式有很多，如下：

1）鍵盤按F12即可立即啟動(dòng)

2）鼠標(biāo)右鍵選檢查頁面啟動(dòng)

3）在菜單里：更多工具里–>開發(fā)者工具，點(diǎn)擊可以直接啟動(dòng)：**

4）Ctrl+Shift+i 快捷鍵啟動(dòng)

F12的常規(guī)設(shè)置

1.顯示的位置調(diào)整

靠右、靠左、靠下、獨(dú)立窗口

2.設(shè)置顏色和語言（chrome）

Chrome瀏覽器默認(rèn)是英文的，可以手動(dòng)設(shè)置為中文的模式。

3.手機(jī)版本的切換

適合測(cè)試H5頁面和小程序測(cè)試，可以方便在電腦操作和調(diào)試；也可以選擇尺寸和不同的手機(jī)型號(hào)，并且也可以自定義手機(jī)型號(hào)和列表。

測(cè)試使用F12工具的主要場(chǎng)景

F12開發(fā)者工具是開發(fā)和測(cè)試都會(huì)經(jīng)常使用的一個(gè)工具。作為軟件測(cè)試需主要可以使用的場(chǎng)景有哪些呢？

1.項(xiàng)目的抓包分析和定位問題

測(cè)試主要用來進(jìn)行抓包定位和分析問題。比如我們?cè)跍y(cè)試項(xiàng)目的時(shí)候，發(fā)現(xiàn)了一個(gè)bug，要定位這個(gè)bug是前端bug還是后端bug，就可以通過抓包來進(jìn)行分析。

F12記錄了前后端的交互，可以通過看前端發(fā)送的請(qǐng)求和后端收到的響應(yīng)，如下圖所示：

先找到這個(gè)報(bào)文，然后點(diǎn)擊查看右邊的請(qǐng)求和響應(yīng)。

請(qǐng)求消息注意看：請(qǐng)求頭 +請(qǐng)求體，特別是請(qǐng)求體里的請(qǐng)求正文，就是我們頁面上傳輸?shù)膮?shù)和數(shù)據(jù)，需要檢查是否有問題：

響應(yīng)消息就是服務(wù)器的返回的響應(yīng)消息，重點(diǎn)看的也是響應(yīng)體：

所以，結(jié)合以上抓包信息，我們可以按照如下步驟和原則來判斷和分析bug：

1.如果是明顯的前端頁面問題，比如js報(bào)錯(cuò)，那么就是前端的bug；

2.通過抓包結(jié)果來分析：

1）如果前端沒有發(fā)送請(qǐng)求，那么是前端問題

2）前端發(fā)送請(qǐng)求的數(shù)據(jù)錯(cuò)誤，那么是前端問題

3）如果后端沒有給響應(yīng)消息，那么是后端問題

4）如果后端響應(yīng)消息數(shù)據(jù)錯(cuò)誤 ，那么是后端問題

5）如果后端給了正確的響應(yīng)，但是前端沒有正確顯示，那么是前端問題

當(dāng)然，除了抓包分析，我們還需要配合數(shù)據(jù)庫進(jìn)行數(shù)據(jù)確認(rèn)，以及結(jié)合Linux服務(wù)器分析項(xiàng)目日志來定位具體的問題。

2.F12做接口測(cè)試和數(shù)據(jù)篡改

點(diǎn)擊菜單欄里的新請(qǐng)求按鈕，可以打開一個(gè)新請(qǐng)求的編輯頁面，輸入請(qǐng)求的地址和參數(shù)、請(qǐng)求頭，點(diǎn)擊發(fā)送按鈕即可發(fā)送接口請(qǐng)求。

或者選中報(bào)文然后右鍵選擇編輯并重發(fā)，也可以對(duì)這個(gè)接口數(shù)據(jù)進(jìn)行修改，比如做一些異常的接口測(cè)試，檢查響應(yīng)結(jié)果，確認(rèn)接口服務(wù)器處理結(jié)果。

3.F12工具做弱網(wǎng)測(cè)試

大家都知道有很多工具可以做弱網(wǎng)測(cè)試，比如Fiddler工具，Charles工具，QNET工具等，F(xiàn)12開發(fā)者工具也可以做弱網(wǎng)測(cè)試。

如下是谷歌瀏覽器和火狐瀏覽器的弱網(wǎng)配置頁面：

可以從預(yù)設(shè)置好的網(wǎng)絡(luò)類型里選擇，也可以自己定義和添加網(wǎng)絡(luò)參數(shù)。

總結(jié)

相對(duì)于其他的抓包工具F12開發(fā)者工具的優(yōu)缺點(diǎn)如下：

優(yōu)點(diǎn)：

1.最簡單、最輕量級(jí)的，免安裝，是瀏覽器內(nèi)置的開發(fā)者工具；
2.抓取到的 HTTPs 報(bào)文是可以得到明文數(shù)據(jù)的，不需要安裝證書。

缺點(diǎn)：

1.因?yàn)橹荒茏ギ?dāng)前瀏覽器的收發(fā)報(bào)文，層次只能是在應(yīng)用層 Http(s)協(xié)議，不能抓取其他的數(shù)據(jù)報(bào)文；
2.F12 抓包調(diào)試也能滿足我們基本的測(cè)試工作需求，但是作用面和強(qiáng)大性和其他的抓包工具還是有一定差距的。

測(cè)試可以使用的工具很多，但是F12開發(fā)者工具是使用最簡便的，如果能靈活運(yùn)用，可以讓工作效率提升不少！

最后： 下方這份完整的軟件測(cè)試視頻教程已經(jīng)整理上傳完成，需要的朋友們可以自行領(lǐng)取 【保證100%免費(fèi)】

軟件測(cè)試面試文檔

我們學(xué)習(xí)必然是為了找到高薪的工作，下面這些面試題是來自阿里、騰訊、字節(jié)等一線互聯(lián)網(wǎng)大廠最新的面試資料，并且有字節(jié)大佬給出了權(quán)威的解答，刷完這一套面試資料相信大家都能找到滿意的工作。

文章來源地址http://www.zghlxwxcb.cn/news/detail-763864.html

到了這里，關(guān)于活用 F12 開發(fā)者工具，測(cè)試效率原來可以提高這么多的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！