今天簡單介紹一下web端的調(diào)試工具俗冻，讓測試人員可以從界面簡單判斷BUG的來源魄健，適用于初步接觸測試的人員，專業(yè)人員可以繞路
一旋奢、調(diào)試工具的啟用
- 1.快捷打開工具泳挥，F(xiàn)12
- 但是有些網(wǎng)站可能會禁用快捷鍵，這時候就必須手動打開了
第一種方式：點擊右上角的三個點至朗，在下拉菜單中點擊 開發(fā)者工具 選項點擊右上角.png
第二種方式：直接在頁面右鍵屉符，在下拉菜單中點擊 檢查點擊右鍵.png
- 但是有些網(wǎng)站可能會禁用快捷鍵，這時候就必須手動打開了
二、調(diào)試工具的功能選項
工具TAB.png
針對本公司項目的特性锹引，今天主要介紹幾個常用的TAB
1.元素TAB （主要是通過HTML的形式展示頁面所有的元素標簽）
我們主要使用它修改元素樣式的功能筑煮，選擇你想改變樣式的元素，右鍵之后點擊檢查粤蝎，就會快捷選中元素。
選中后還可以右鍵袋马，點擊隱藏或者刪除元素初澎，執(zhí)行后頁面上就暫時看不到元素了
選中元素.png
可以在樣式子功能下面修改，得到你想要的樣式
例1.png
2.控制臺TAB （可以查看前端開發(fā)人員的調(diào)試信息虑凛，前提是開發(fā)人員開啟了此選項）
我們可以查看開發(fā)人員的調(diào)試信息碑宴，還可以直接使用語法，執(zhí)行瀏覽器的一些原生功能
例2.png
3.網(wǎng)絡(luò)TAB （此次主要講的選項桑谍，測試人員和開發(fā)人員最常用到的模塊延柠，用于測試問題的分析和定位，記錄了前后端的交互锣披，方便查找問題是前端還是后端問題 ）贞间，主要講標頭，載荷雹仿，預(yù)覽增热，響應(yīng)，時間
標頭
- 1.http請求消息:請求行(請求方法)胧辽、請求頭峻仇、請求體–客戶端發(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的都是后端報錯
404（資源不存在或者地址給錯了）（對應(yīng)我們自己的項目凡蚜，有可能是前后端版本不統(tǒng)一，前端部署了吭从，后端沒部署）
500 503（表明服務(wù)器有問題）500開頭的基本都是服務(wù)器內(nèi)部的問題
301 302 (重定向) 304 （請求的是服務(wù)端緩存）
載荷 （主要用于查看參數(shù)）
get 請求一般參數(shù)在url上朝蜘，問號后面都是參數(shù)
image.png
也可以查看載荷，顯示的是格式化的參數(shù)影锈，點擊查看源代碼芹务，cv即可
get載荷.png
post 請求的參數(shù)很好查看，載荷下面選中參數(shù)鸭廷，右鍵點擊復制object枣抱，需要參數(shù)ctrl+v給開發(fā)人員即可
post載荷.png
預(yù)覽和響應(yīng)
預(yù)覽和響應(yīng)都是后臺返回的數(shù)據(jù)，預(yù)覽是格式化的數(shù)據(jù)
返回值里面一般也會帶code字段辆床，這是后端自定義的業(yè)務(wù)系統(tǒng)狀態(tài)碼佳晶，code為0就是正確的返回了。有可能http狀態(tài)碼為200讼载，但是業(yè)務(wù)系統(tǒng)返回失敗狀態(tài)碼
舉個栗子1.png
舉個栗子2.png
以下是正確狀態(tài)的返回
預(yù)覽.png
時間
正在請求.png
響應(yīng)時間.png
4.應(yīng)用TAB （web端存儲）
主要分為localstorage / sessionstorage / cookie
應(yīng)用.png
平時Ctrl+F5強刷時轿秧，緩存不更新的話，可以進入此TAB清除所有緩存
（ps：強刷也有更適用于我們更好的方法咨堤，版本頻繁更新菇篡，前端包部署之后，網(wǎng)頁對靜態(tài)資源有緩存一喘，這時點這個強刷驱还，90%能看到更新之后的狀態(tài)）
另外的強刷方式.png
此TAB的indexdDB也是一種很強大的web端存儲技術(shù)，noSql的前端數(shù)據(jù)庫凸克，詳情查看本人另外一篇簡單的技術(shù)性文章http://www.reibang.com/p/6fc025b2931e
5. 此外议蟆，調(diào)試工具的另外幾個TAB也有很強大的功能，感興趣的可以深入研究萎战，如內(nèi)存TAB可以對網(wǎng)頁的js對象和dom節(jié)點內(nèi)存拍快照咐容，性能TAB可以對網(wǎng)頁的性能進行分析，并生成報告
