狐調試工具 - DevTools
咱們做寫js 代碼的時候，遇到的一個最大的問題就是調試問題，很多開發者在寫 js 代碼的時候，經常都非常痛苦。但是我們如果掌握好相應的調試工具，那么就可以比較游刃有余的解決 js 的調試問題。 工欲善其事,必先利其器。
調試工具比較好的有火狐的firebug, 另外 chrome 的自帶調試工具也非常不錯 ( 英文版 ) 。
掌握好這些調試工具, 可以更好的學習 js, 也可以大大提高咱們完成 js 的排錯能力。因此，我建議所有要使用 js 的人員都最好能好好的掌握一下這些工具。
本來火狐的firebug 一直以來都是我認為最好的調試工具，但是現在 Firebug 官方已經宣布了停止 Firebug 的維護，咱們新版本的火狐已經無法再使用它。
以下是在官網找到的Firebug 最新版本 ( 最多只支持火狐 47) ：
雖然非常可惜，但是好在火狐還有自帶的調試工具，而Firebug 團隊也推薦大家可以使用火狐的 DevTools 工具。
下面就是我總結的這款工具的一些基本的使用方式。
安裝並打開調試工具
下載火狐瀏覽器( 我下載的 firefox54) 安裝即可
地址： http://www.firefox.com.cn/
咱們打開火狐瀏覽器，直接按 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 的開發有一定的幫助。
感謝源碼時代JAVA學科講師提供此文章!
http://www.sohu.com/a/158064598_216476
-----------------------------------------------------------------------
方法一：瀏覽器自帶debug插件
1.按下圖中的標記進行操作
2.找到"獲取附件組件"，在右邊的搜索框中搜索要查找的內容
3.找到你所需要的組件，點擊最右端的"安裝"即可(因為我已經按裝所以這里就沒有顯示)
4.安裝完成后，有的debug還不能用，看看是否啟用功能，把每一個想要用的小項都啟用即可(如下圖)
方法二：當前瀏覽器版本沒有debug插件
我們可以使用自定義的debug插件，下載地址是https://download.csdn.net/download/super_duola/10867144 。步驟操作如下：
1.下載完成后解壓到某個位置，然后打開瀏覽器，之后的操作跟第一種方法的操作一樣
2.如下圖操作
3.找到自己插件的位置，並選擇
PS：補充一下 debug的獨立窗口出現的位置 設置方法
---------------------
作者：supre_DuoLa
來源：CSDN
原文：https://blog.csdn.net/super_DuoLa/article/details/84317556