case1：文本框輸入不合法的内容，點選送出按鈕， 如果不合法的内容送出成功， 那應該是前背景沒有做校驗， 前背景都有這個bug
case2：文本框輸入合法的内容，點選送出按鈕， 檢視資料庫中的資料和輸入的内容不一緻， 這個時候需要看前台傳的資料是否正确，使用fiddler抓包， 檢視請求頭裡面的資料是否和輸入一緻，如果一緻就是背景的問題， 如果不一緻，就是前台的bug
case3：界面展示不友好， 重複送出 這些都是前台的bug
前台定位方法：
前台bug定位：按F12在console中檢視報錯資訊，對于出錯的js可以在Sources下檢視對應報錯的資源檔案，寫入禅道送出給開發即可
——————————————————————
還可以分析控制台中js是否有錯誤，network中狀态碼是否有問題，如果是500等說明服務端有問題。
比如登入頁面，輸入賬号和密碼點選登入，結果沒有跳轉也沒有反應
可以打開控制台，看是否有js錯誤，如果有就是前端問題，沒有且有正常post請求再看network狀态碼，如果是404有可能是前端參數寫錯或者背景接口改了，前後端都可以提，500就是背景出了問題。
————————————————————————————
前台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例如如下結構
該部分可以看做為一個大的框即是标簽 内嵌标題的标簽
，裡面再有這些個内容,那麼在不同的浏覽器中，可能ie和FF的解析會産生不同，假設IE解析為
的一種形式，但在FF下可能解析為
的兩行的形式進而導緻前端在複古鞋/闆鞋這塊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