如何定位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模板，出現的一些截斷控制，轉換功能都屬於前端的問題

 

1、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的問題，你們在出現點擊未跳轉或者跳轉方式不正確的問題，直接能夠定位到跳轉屬性的問題，找到對應的跳轉對應的塊提供給開發人員便可

 

2、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

 

3、Javascript

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

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