前端bug主要分爲3個類別：HTML,CSS,Javascript三類問題
給個最大的區別方式方法：
出現樣式的問題基本都是CSS的bug
出現文本的問題基本都是html的bug
出現交互類的問題基本都是Javascript的bug
現在以淘寶的前端人員工作爲例進行相關bug定位的剖析
判斷前後臺問題的區分方法：
FF, 打開錯誤控制檯，區分前後臺交互：查看網絡請求
a) Html中如果有鏈接，有響應的情況下，基本可以定位到是屬於前端的問題
b) 如果爲空，或者有出現error錯誤信息，我們就可以定位到屬於後臺開發的問題
TMS對應的VM模板，出現的一些截斷控制，轉換功能都屬於前端的問題
查看Log日誌
1、 cd 到log目錄，log的目錄一般是/home/admin/應用名/logs ，如hesper是：/home/admin/hesper/logs2、 cat 打開日誌文件，如:cat hesper.log 也可以用 tail –f hesper.log 打開文件（實時顯示文件更新）
日誌分析：
1、 一般只關注warn以上級別的日誌。
2、 錯誤都會先報出來, 然後找Caused by …. 那些都是引起錯誤的地方, 但是插入點應該是一開始
3、 有提示類的日誌問題一般caused by 下第一行爲錯誤方法，可以用自下而上法，先查看發佈結果，爲成功或者失敗，如果失敗再往上找到原因，然後往上找到最近的deployment failed的cause by 信息來排查問題，cause by存在層級關係由上級影響下級，最後一個cause by一般爲根源問題。它是導致上一個cause by的原因。通過cause by的信息能找到出錯的方法或者類，然後到代碼和源碼中進行review排查問題，並且修復問題。
4、正常日誌無提示和錯誤的情況分析：有可能程序中，沒有異常打印，只是catch 掉了。如果要處理需要調試，找到對應位置添加捕獲條件。
5、對日誌問題的判斷
報錯的地方：通過最直接的日誌反應和提示能直接發現錯誤和問題，已經提示中都會提供給我們對應位置行數的信息
a) 內部問題，一般是有行數
b) 外部問題，一般無行數。例如依賴其他關係，其日誌信息可能只能反映爲超時，爲空，無返回結果等，也是一個基本的劃分方式
利用chrome的開發者工具 切換到Source標籤頁，開啓自動暫停功能，行時腳本異常時，在異常腳本處暫停運行，跳轉至調試頁面，準確定位錯位腳本位置
Element 標籤頁： 用於查看和編輯當前頁面中的 HTML 和 CSS 元素。
Network 標籤頁：用於查看 HTTP 請求的詳細信息，如請求頭、響應頭及返回內容等。
Source 標籤頁：用於查看和調試當前頁面所加載的腳本的源文件。
TimeLine 標籤頁： 用於查看腳本的執行時間、頁面元素渲染時間等信息。
Profiles 標籤頁：用於查看 CPU 執行時間與內存佔用等信息。
Resource 標籤頁：用於查看當前頁面所請求的資源文件，如 HTML，CSS 樣式文件等。
Audits 標籤頁：用於優化前端頁面，加速網頁加載速度等。
Console 標籤頁：用於顯示腳本中所輸出的調試信息，或運行測試腳本等。