前端bug主要分為3個類別：HTML,CSS,Javascript三類問題
給個最大的區別方式方法：
- 出現樣式的問題基本都是CSS的bug
- 出現文本的問題基本都是html的bug
- 出現交互類的問題基本都是Javascript的bug
現在以淘寶的前端人員工作為例進行相關bug定位的剖析
判斷前后台問題的區分方法：
FF, 打開錯誤控制台
- 區分前后台交互：查看網絡請求
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