伯樂在線轉注：2016年12月7日有一條《Firebug 宣布停止開發更新》的資訊，不少朋友誤認為以后用不到 Firebug 了。其實在 2015 年 Firebug 已經在着手整合到 Firefox DevTools 中。正因為有些誤解，Firefox 官方在 12 月 20 日發文明確這一情況。下一個版本的 Firebug（代號為 Firebug.next）將構建在 Firefox DevTools 之上，Firebug 也將被合並到內置工具中。
火狐調試工具-DevTools
咱們做寫js代碼的時候，遇到的一個最大的問題就是調試問題，很多開發者在寫js代碼的時候，經常都非常痛苦。但是我們如果掌握好相應的調試工具，那么就可以比較游刃有余的解決js的調試問題。工欲善其事,必先利其器。
調試工具比較好的有火狐的firebug,另外chrome的自帶調試工具也非常不錯(英文版)。
掌握好這些調試工具,可以更好的學習js,也可以大大提高咱們完成js的排錯能力。因此，我建議所有要使用js的人員都最好能好好的掌握一下這些工具。
本來火狐的firebug一直以來都是我認為最好的調試工具，但是現在Firebug官方已經宣布了停止Firebug的維護，咱們新版本的火狐已經無法再使用它。
以下是在官網找到的Firebug最新版本(最多只支持火狐47)：
雖然非常可惜，但是好在火狐還有自帶的調試工具，而Firebug團隊也推薦大家可以使用火狐的DevTools工具。
下面就是我總結的這款工具的一些基本的使用方式。
安裝並打開調試工具
下載火狐瀏覽器(我下載的firefox54)安裝即可
咱們打開火狐瀏覽器，直接按F12即可打開這個調試工具。
PS:
有些用戶火狐安裝插件，可能導致F12沒有效果，可以在設置中打開(如下圖):
找到開發者選項：
點擊Web控制台打開
這時候可以看到調試工具已經打開：
調試工具的頁面總體介紹
1
查看器：可以在下方看到頁面的HTML代碼，而選中某個HTML元素也可以看到它對應的CSS樣式(結合審查元素工具使用非常好)
2
控制台：咱們用得最多的一個面板，可以自定義決定咱們要看哪些高度數據(console打印的數據都在這里展示)
3
調試器：可以為js添加debug功能
4
樣式編輯器: 查看當前頁面的所有樣式
5
性能:分析js的每一個操作的性能
6
內存:當前頁面的一些堆棧內存
7
網絡：查看當前每一次請求
對咱們比較重要的工具有：審查工具,控制台,網絡
現在，咱們就單獨介紹一下這三個工具的使用：
工具一：審查工具
點擊這個審查工具，我們就可以查看頁面上的所有元素(使用方式如下圖):
大家特別注意了，剛我們看得到每個元素與它對應的代碼樣式后，作用有兩個：
第1是查看元素與樣式：如果自己的html頁面或者樣式有問題(比如不小心多加了一個<,有的標簽忘了閉合等等很多粗心的問題)，在這里可以更加直觀的看到(找錯就不在話下)。
第2是修改元素與樣式：在下面標簽與樣式都是可以修改的，親可以自己去試一下。對咱們HTML與CSS的開發也有直觀的幫助(不過注意，這里的修改只是一時,頁面刷新后修改就作廢了)。
工具二：控制台
控制台對咱們來說真的還是很重要，我們可以選擇自己要看的是控制台哪一部分內容，其中最重要的是查看對於js代碼中console的打印：
注意:網絡,CSS這些數據大家可以根據自己的需求打開(點一下文字出現陰影則被選中)，日志都是打開的(日志沒打開，無法查看console)。
console
打應出來的對象(JSON對象或者DOM對象)也可以使用工具查看到它的詳細信息。鼠標找到相應的對象即可,這也是一個非常實用的功能。
工具三:網絡
網絡分左右兩部分
左邊主要顯示當前頁面加載的所有資源(如HTML,CSS,JS,圖片,...)。當然，要顯示哪些資源，需要你自己要確認。
右邊部分是對左邊的某一個請求的分析(需要選中左邊的某一個請求)。
首先在左邊狀態，我們可以看到，選到垃圾桶可以清空信息。要顯示哪些信息自己點擊選中就可以，提供了一個所有展示方便我們查看所有請求。
每一個請求都可以看到它的狀態，請求方式，路徑等。
右邊部分對我們開發的調試就非常重要了，如果在開發的時候知道到這里來找數據，很多時候能幫助咱們快速定位到相應的錯誤。
可以看到請求詳細信息(包含請求頭與響應頭)
當前域名對應的Cookie信息：
請求參數(非常重要,開發中經常都需要進入查看)
響應數據(非常重要,特別是對於Ajax請求我們要看到響應數據)
簡單給大家介紹了這個調試工具，也明白了這個工具不同的面板的一個使用方式。希望對大家JS的開發有一定的幫助。