前言
前幾年前端開發的難點在於沒有一個強大的調試工具能夠快速的找到問題所在，直到2006年Firebug問世，真正的讓前端進入一個工程化可調試的時代。但隨着前端需求的不斷增加，任務的完成難度也隨着增大。Chorme的橫空出世讓從業者眼前一亮，他的調試工具，進一步細化了可調試的粒度，讓前端真正從全方位來把握代碼執行的流程性能等，更是與Chrome緊密結合，免去了安裝或兼容導致的其它問題，受到了很多開發者的信賴或推崇。但由於一些歷史或平台原因，我們必須得了解其它調試工具，使工作的效率更加的方便或快速。
下面將會從各個層面來介紹這幾個耳熟能詳的調試工具，分享一些個人的使用心得：
一. Bug出現的原因
1. 主觀原因或者是出現這么多瀏覽器的原因
- 各大巨頭之間的利益博弈
因為互聯網做為個人電腦向外延伸的有效手段， - 為了霸占互聯網信息的入口
瀏覽器是唯一互聯網的出入口，可以綁定很多功能，即綁定用戶。比如chrome的收藏夾同步功能。 - 為了搶占市場，優化體驗
為了讓這個用戶量達到倍數級的增長，所以在細節方面不斷的優化，這個可以從chrome的版本號上就能看出來。
2. 另外客觀原因：
- 結構不合理，讓單一div承載更多的樣式
- 瀏覽器本身的問題，實現標准不一致
- 標准本身很混亂
- 編輯器導致的編碼問題
二. 調試工具
1. Firebug
- Firebug入門指南
- Firebug控制台詳解
- Firebug高級用法
- Firebug是個人使用比較順手的CSS調試工具，可能是先入為主，或者是個人習慣的原因。
用Inspect工具能夠有效的找到Html,CSS布局的問題，單擊Inspect工具會在頁面上選擇需要調試的范圍塊，然后Firebug相應的焦點會逃到HTML面板中，在HTML面板中點擊相應的DOM結構，頁面上方的預覽區域就會有相應的布局樣式呈現，細心的讀者應該會發現，Margin為黃色，Padding為藍色。
然后如何調試的？
如果頁面中出現bug時，本質的問題時：瀏覽器呈現的布局與期望中有偏差，如何尋找偏差？就是利用Inspect觀察頁面中的布局是否達到了預期的位置。 - Style 標簽中屬性的顯示
Style里邊顯示的樣式及屬性是所有應用到這個標簽上的列表集合，
2. Chrome
- 格式化代碼
- 查看元素綁定了哪些事件
- 快速的根據勾子找到核心代碼區域
- 高效的利用工作區，進行遠程調試
- 利用Profiles進行性能優化
- 利用Audits可以進行頁面無用CSS的監測或其它方面的建議等。
其它技巧：
- ctrl+ shift + F:所有 js 文件中搜索&查找 js 函數定義
- 通過左右方向鍵可以折疊源碼
- JSONView 可以在瀏覽器中以樹型的方式查看json
- Pretty Beautiful Javascript 格式化壓縮js
- Vimium vim的方式操作chrome
- Visual Event
主要用途是查看某個元素具體綁定了哪些事件
為什么沒有提到Firebug，Firebug的JavaScript調試，新版加了代碼着色之后，有時候反應比較遲緩，甚至會有假死的情況，另外由於插件自身的原因，並不是真實的模擬代碼執行的流程。所以JavaScript的調試優先推薦Chrome調試工具。
3. IE11
一般用IE版本大於7的瀏覽器上根據版本信息來調試大於7的瀏覽器，基本沒有大的誤差，IE11的debuger個人感覺還是有進步的，是想從細節處來吸引用戶。但是由於本身技術基因的欠缺，易用性方面與Chrome還是有很大的差別，即使這樣，目前還是IE版本下調試者的唯一選擇。
4. IETester
IeTester雖然有很多缺點，但就從目前的市場來看，他是唯一一款可以方便測試Ie6的軟件。另外他還有一個插件可以在有限范圍內像Firebug一樣調試IE6，也可以安裝在虛擬機的IE6上。
另外還是解決思路的分享，簡單的問題簡單處理。
5. 虛擬機
因為IETester並不能真實的模擬IE6，所以有些特殊的Bug只能到虛擬機真實的環境中調試，在直接的IE6上可以安裝IETester的Debugger插件，可以方便的解決一些Bug。
6. Safari
因為Mac上默認是Safari，而且有一定的用戶市場，所以safari的調試也得關注一下。
因為默認的開發菜單是不顯示的，所以通過下面的方法讓他顯示出來：
- 在偏好設置里邊顯示常規選項卡。
- 高級選項，勾選在菜單欄顯示高級選項。
- 關閉選項卡，在瀏覽器的工具欄出現了開發菜單，就可以調試，其實和Google Chrome瀏覽器是一樣的。但是功能沒有Chrome強大。
7. Opera
Opera的調試還是需要手動來開啟。
- 點擊Opera按鈕菜單，選擇更多工具，點擊啟用開發者工具。
- 之后菜單里就會多出來開發者工具一項。
- 從開發者工具中選擇WEB檢查器，也可以呼出調試器窗口。
以上兩款只做為輔助的調試手段，一般代碼結構寫的規范或標准，在這兩款上面基本沒有大的問題。
三. 其它常見Bug
- 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記
- 檢查CSS是否書寫正確 （w3c文件校驗）
- 用刪除法確定錯誤發生的位置
- Float元素的父元素必寫Clearfix
- 是否忘記了寫DTD?DTD是否是在第一行？
- 是否重設了默認的樣式?
- 是否是編碼問題？
四. 其它思路
遇到特別怪異的Bug解析不了，及時的尋求別人的幫助，可以使問題快速的得到解決。
西安中級前端開發：284216186 ，歡迎加入~！