通匙嫫粒可以利用抓包工具來(lái)進(jìn)行分析膝宁。可以從三個(gè)方面進(jìn)行分析：請(qǐng)求接口忍捡，傳參锤岸，響應(yīng)竖幔。
1.請(qǐng)求接口url是否正確
如果請(qǐng)求的接口url錯(cuò)誤，為前端的bug
2.傳參是否正確
如果傳參不正確是偷，為前端的bug
3.請(qǐng)求接口url和傳參都正確拳氢，查看響應(yīng)是否正確
如果響應(yīng)內(nèi)容不正確募逞，為后端bug
4.也可以在瀏覽器控制臺(tái)輸入js代碼調(diào)試進(jìn)行分析
? ? ? ? 弄清楚如何定位和分類bug之前，需要了解一個(gè)頁(yè)面的請(qǐng)求過(guò)程馋评，以http請(qǐng)求為例： 1放接、用戶在前端頁(yè)面操作，如點(diǎn)擊某個(gè)提交按鈕 2留特、頁(yè)面攜帶數(shù)據(jù)進(jìn)行請(qǐng)求纠脾，訪問(wèn)具體功能接口 3、由后端服務(wù)執(zhí)行相應(yīng)的業(yè)務(wù)邏輯磕秤，如涉及數(shù)據(jù)乳乌，再去請(qǐng)求并組裝數(shù)據(jù)返給前端 4、前端頁(yè)面進(jìn)行渲染和展示對(duì)應(yīng)的頁(yè)面和數(shù)據(jù) 前后端bug各有什么特點(diǎn)市咆？
前端bug特點(diǎn) 1汉操， 界面相關(guān) 2，布局相關(guān) 3蒙兰，兼容性相關(guān)
后端bug特點(diǎn) 1磷瘤，業(yè)務(wù)邏輯相關(guān) 2，性能相關(guān) 3搜变，數(shù)據(jù)相關(guān) 4采缚，安全性相關(guān)
定位前后端bug，有什么方法挠他？ 1扳抽、經(jīng)驗(yàn)法 軟件測(cè)試人員應(yīng)不斷精進(jìn)自己的技能，負(fù)責(zé)的項(xiàng)目多了殖侵，自然對(duì)功能的實(shí)現(xiàn)過(guò)程有了解贸呢，也就明白如何分類bug了。 例如： 網(wǎng)頁(yè)上的某個(gè)圖片的分辨率不對(duì)拢军，如果我們了解實(shí)現(xiàn)過(guò)程楞陷，可以想到一般情況下，是根據(jù)某個(gè)地址去服務(wù)器取圖片的茉唉，數(shù)據(jù)庫(kù)一般只保存地址固蛾，那么圖片能正確顯示，就說(shuō)明后端的基本功能是滿足需求的度陆。如果具體圖片分辨率有誤艾凯，最可能的原因是前端顯示過(guò)程出了差錯(cuò)。
2懂傀、查日志 當(dāng)我們發(fā)現(xiàn)一個(gè)bug趾诗，并不確定這個(gè)bug屬于前端還是后端，可以查看后端服務(wù)的日志鸿竖，復(fù)現(xiàn)bug時(shí)沧竟，查看日志中有沒(méi)有相關(guān)信息「坑牵基本可以認(rèn)為悟泵，如果日志沒(méi)有輸出，很可能這個(gè)功能并沒(méi)有與后端交互闪水，也就不存在后端的問(wèn)題糕非。反之，如果日志有輸出球榆，可以進(jìn)一步查看有無(wú)錯(cuò)誤日志信息朽肥，進(jìn)一步分析。
3持钉、查接口 這種方法常用于查看是后端返回給前端的數(shù)據(jù)有誤衡招，還是前端顯示有誤。 大多數(shù)瀏覽器都有自帶的接口查看工具每强，如Chrome始腾，F(xiàn)ireFox等都可以通過(guò)F12開啟抓包，在NetWork中可以看到當(dāng)前頁(yè)面發(fā)送的每個(gè)http請(qǐng)求空执。 我們需要對(duì)比通過(guò)后端接口拿到的數(shù)據(jù)和前端顯示的數(shù)據(jù)浪箭，來(lái)確認(rèn)問(wèn)題出在哪里。如果數(shù)據(jù)錯(cuò)了辨绊，頁(yè)面顯示是錯(cuò)的奶栖，也是正常的，先從后端入手去解決门坷。如果數(shù)據(jù)對(duì)了宣鄙，但是顯示錯(cuò)了，就需要問(wèn)問(wèn)前端的開發(fā)人員了拜鹤。 溝通很重要 我們?cè)诙ㄎ籅U
