今天簡(jiǎn)單介紹一下web端的調(diào)試工具，讓測(cè)試人員可以從界面簡(jiǎn)單判斷BUG的來源，適用于初步接觸測(cè)試的人員，專業(yè)人員可以繞路

一、調(diào)試工具的啟用

• 1.快捷打開工具，F(xiàn)12
• 2. 但是有些網(wǎng)站可能會(huì)禁用快捷鍵，這時(shí)候就必須手動(dòng)打開了
     第一種方式：點(diǎn)擊右上角的三個(gè)點(diǎn)，在下拉菜單中點(diǎn)擊 開發(fā)者工具 選項(xiàng)
     點(diǎn)擊右上角.png
     
     第二種方式：直接在頁面右鍵，在下拉菜單中點(diǎn)擊 檢查
     點(diǎn)擊右鍵.png

二、調(diào)試工具的功能選項(xiàng)

工具TAB.png

針對(duì)本公司項(xiàng)目的特性，今天主要介紹幾個(gè)常用的TAB

1.元素TAB （主要是通過HTML的形式展示頁面所有的元素標(biāo)簽）

我們主要使用它修改元素樣式的功能，選擇你想改變樣式的元素，右鍵之后點(diǎn)擊檢查，就會(huì)快捷選中元素。
選中后還可以右鍵，點(diǎn)擊隱藏或者刪除元素，執(zhí)行后頁面上就暫時(shí)看不到元素了

選中元素.png

可以在樣式子功能下面修改，得到你想要的樣式

例1.png

2.控制臺(tái)TAB （可以查看前端開發(fā)人員的調(diào)試信息，前提是開發(fā)人員開啟了此選項(xiàng)）

我們可以查看開發(fā)人員的調(diào)試信息，還可以直接使用語法，執(zhí)行瀏覽器的一些原生功能

例2.png

3.網(wǎng)絡(luò)TAB （此次主要講的選項(xiàng)，測(cè)試人員和開發(fā)人員最常用到的模塊，用于測(cè)試問題的分析和定位，記錄了前后端的交互，方便查找問題是前端還是后端問題 ），主要講標(biāo)頭，載荷，預(yù)覽，響應(yīng)，時(shí)間

標(biāo)頭

• 1.http請(qǐng)求消息:請(qǐng)求行(請(qǐng)求方法)、請(qǐng)求頭、請(qǐng)求體–客戶端發(fā)送

• 2.http響應(yīng)消息:響應(yīng)行(響應(yīng)狀態(tài)碼)，響應(yīng)頭，響應(yīng)體-服務(wù)器回應(yīng)

  
  
  概述.png
• 狀態(tài)碼
  200 (正常狀態(tài))，一般不是200的都是后端報(bào)錯(cuò)
  404（資源不存在或者地址給錯(cuò)了）（對(duì)應(yīng)我們自己的項(xiàng)目，有可能是前后端版本不統(tǒng)一，前端部署了，后端沒部署）
  500 503（表明服務(wù)器有問題）500開頭的基本都是服務(wù)器內(nèi)部的問題
  301 302 (重定向) 304 （請(qǐng)求的是服務(wù)端緩存）

載荷 （主要用于查看參數(shù)）

get 請(qǐng)求一般參數(shù)在url上，問號(hào)后面都是參數(shù)

image.png

get載荷.png

post載荷.png

預(yù)覽和響應(yīng)

預(yù)覽和響應(yīng)都是后臺(tái)返回的數(shù)據(jù)，預(yù)覽是格式化的數(shù)據(jù)
返回值里面一般也會(huì)帶code字段，這是后端自定義的業(yè)務(wù)系統(tǒng)狀態(tài)碼，code為0就是正確的返回了。有可能http狀態(tài)碼為200，但是業(yè)務(wù)系統(tǒng)返回失敗狀態(tài)碼

舉個(gè)栗子1.png

舉個(gè)栗子2.png

以下是正確狀態(tài)的返回

預(yù)覽.png

時(shí)間

正在請(qǐng)求.png

響應(yīng)時(shí)間.png

4.應(yīng)用TAB （web端存儲(chǔ)）

主要分為localstorage / sessionstorage / cookie

應(yīng)用.png

另外的強(qiáng)刷方式.png

5. 此外，調(diào)試工具的另外幾個(gè)TAB也有很強(qiáng)大的功能，感興趣的可以深入研究，如內(nèi)存TAB可以對(duì)網(wǎng)頁的js對(duì)象和dom節(jié)點(diǎn)內(nèi)存拍快照，性能TAB可以對(duì)網(wǎng)頁的性能進(jìn)行分析，并生成報(bào)告

希望今天的分享對(duì)大家有所幫助，謝謝