如何定位bug歸屬前端還是后台


后端的Bug,如何准確的定位問題在哪里,如何精准的描述Bug?

(1)查看報錯日志

 查看報錯日志,通過日志分析,需要有一定的經驗,並且有一定的代碼基礎,才能更好地定位問題。

(2)查看數據庫的數據

 了解所測功能的數據表結構,測試過程中,查看數據庫的數據,確認數據的正確性。

(3)查看緩存(如Memcache、apc、redis等緩存)是否正確

 

現在來分析bug可能是前台還是后台:

case1:文本框輸入不合法的內容,點擊提交按鈕, 如果不合法的內容提交成功, 那應該是前后台沒有做校驗, 前后台都有這個bug

case2:文本框輸入合法的內容,點擊提交按鈕, 查看數據庫中的數據和輸入的內容不一致, 這個時候需要看前台傳的數據是否正確,使用fiddler抓包, 查看請求頭里面的數據是否和輸入一致,如果一致就是后台的問題, 如果不一致,就是前台的bug

case3:界面展示不友好, 重復提交 這些都是前台的bug

 

前台定位方法:

前台bug定位:按F12在console中查看報錯信息,對於出錯的js可以在Sources下查看對應報錯的資源文件,寫入禪道提交給開發即可

前台bug注意以下三個方面:

(1)網站前台的權限控制:沒有權限的用戶是不能直接輸入url的方式來進行訪問的,必須進行登錄。以后涉及到權限的測試,一定不能漏掉url的方式也需要驗證一下。而在單個頁面進行W3C測試時則需要去掉該權限控制。

(2)網站前台的title,對於這個也很容易忽視。進入到不同的功能頁面,title顯示應該是有,並且要和你進入的頁面一致。title就是在瀏覽器最左上角看到的那些文字 

(3)http和https的注意點:https是一種安全鏈接,它是需要證書的,而http就是普通鏈接,所以在你的系統中客戶會要求某些關鍵的地方希望加上這種安全連接,那么此時你需要注意的是,對於不需要的安全鏈接的地方千萬也要去重點測試,有些開發會很容易忽略這一點。

你要打開HTTPS開頭的網站,前提是該網站安裝了SSL證書,只有安裝了SSL證書的網站,並且開啟了443端口,你才可以通過HTTPS加密協議無訪問。如果沒有則不能訪問。比如在某個網站http協議后面加個s去訪問,看能否訪問成功,能成功,會顯示綠色安全小鎖,否則就不能訪問。給你舉幾個安裝了ssl證書,可要https訪問的網站,1號店,天貓,淘寶,支付寶,百度,沃通CA,工信部網站等等

 

前端bug主要分為3個類別:HTML,CSS,Javascript三類問題

給個最大的區別方式方法:

出現樣式的問題基本都是CSS的bug

出現文本的問題基本都是html的bug

出現交互類的問題基本都是Javascript的bug

現在以淘寶的前端人員工作為例進行相關bug定位的剖析

 

判斷前后台問題的區分方法:

F12, 打開錯誤控制台console

區分前后台交互:查看網絡請求

a) Html中如果有鏈接,有相應的情況下,基本可以定位到是屬於前端的問題

b) 如果為空,或者有出現error錯誤信息,我們就可以定位到屬於后台開發的問題

TMS對應的VM模板,出現的一些截斷控制,轉換功能都屬於前端的問題

 

一、HTML

最常見的HTML的問題—就是標簽的問題了,最常見的排查和解決辦法就是查看頁面源代碼,然后通過檢查標簽的工具,現在暫時提供idea.exe進行檢查,有其他更好的工具再進行推薦。

常見問題類別:

標簽閉合—表象,頁面中出現大范圍的混亂,就是少了標簽的情況,導致標簽未閉合

標簽浮出—例如鼠標移動到文本位置,浮出全名的這種浮出形式都屬於標簽浮出的問題

標簽在不同的瀏覽器的一種解析方式的不同導致的前端bug例如如下結構 

該部分可以看做為一個大的框即是標簽<a> 內嵌標題的標簽<p>,里面再有這些個內容<ing>,那么在不同的瀏覽器中,可能ie和FF的解析會產生不同,假設IE解析為<a><p><ing></ing></a></p>的一種形式,但在FF下可能解析為

<a><ing></ing></a>

<p></p>

的兩行的形式從而導致前端在復古鞋/板鞋這塊ing里面的格式產生混亂

結構可看為:

頁面定點的問題:最明顯的前端功能,在於點擊某個鏈接將頁面位置定位到對應的位置

a) 我們可以通過右鍵,查看元素的工具進行定位到毛點所定位到的位置,如果出現問題這種問題很直觀,並且能通過這種方法直接定位到問題頁面的跳轉,也屬於html的問題,大家在出現點擊未跳轉或者跳轉方式不正確的問題,直接可以定位到跳轉屬性的問題,找到對應的跳轉對應的塊提供給開發人員即可

 

二、CSS,產生樣式問題。例如:排版,布局,顏色,背景等

css的bug主要分為:兼容型bug 、業務性bug 和 內容型bug

 

兼容型bug

a) 表現:僅在少數幾個瀏覽器上出現

b) 原因:瀏覽器的解析不一致

c) 解決:根據實際情況進行前端代碼的通用性 

d) 類別:

腳本兼容型問題:在出現對應交互的問題就基本可以定位到腳本兼容型bug,例如DIV的顯示和層結構。實際可以參考聚划算的幾個商品鼠標移動到小圖的時候,對應大圖展示的功能。

 

頁面樣式兼容型問題:直接表象在樣式上,都是基於框架的頁面展示錯誤,很容易定位業務性bug

a) 表現:在所有瀏覽器下都有該問題

b) 原因:對業務不熟悉

c) 解決:根據需求進行修改達到業務要求

 

該類型的定位,主要在和實現的要求不一致,最直接表現在頁面的友好型,用戶的可用性的bug,可以定位為該類型內容型bug

a) 表現: 前端自測正確,但在填入內容后,出現的錯誤,內容消失等

b) 原因: 擴展性未考慮周全

c) 解決: 進行overflow test

輸入內容的長度限制等功能可定位為內容型bug

 

三、Javascript

最直接的判斷方法,刷新頁面,出現滯后顯示的一些模塊基本都為腳本的輸出塊。該部分的一些問題可以參照兼容型bug中類別的腳本兼容型bug。 

有產生交互類的問題,大多數都可以定位到是屬於javascript產生的問題,該部分大多不會報錯有錯誤提示類的。頁面左下方有出現javascript的錯誤提示;有彈出錯誤信息提示的bug;瀏覽器返回的一些錯誤彈出框都屬於javascript的bug


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM