今天要給大家介紹一個神器，就是谷歌瀏覽器（Chorme）自帶的前端調試工具——Developer Tools.
在谷歌瀏覽器中，通過快鍵鍵F12就可以打開Devloper Tools：
Developer Tools
Develop Tools功能比較多，本文主要講解比較常用的幾個面板：Elements、Console、Sources和Network。
—— 1 ——
Element面板
之所以把這部分放在最前面，是因為這個功能是最為常用的。
元素面板就是用來查看網頁的HTML元素的，使用方法看下圖。
查看HTML元素
首先點擊下左上角的按鈕，然后我們只要把鼠標懸停在網頁元素上，即可查看到對應的元素。
其中包括它的HTML標簽與對應的屬性，還有對應的樣式與原型（包括盒子模型）。
然而，它能做的不僅僅如此，我甚至們可以任意的進行編輯，對HTML元素可以進行改動，對它的樣式也是可以自由調整！
這就意味着，調整一個網頁的樣式可以實時的在chrome上進行微調，而不用每次修改后都要刷新資源后才能看效果。
這簡直是太棒了，有木有？
-
Console面板
控制台面板與各種開發工具的控制台類似，主要是用於控制台信息輸出。
遇到資源文件加載失敗、網絡請求失敗等，或者一些提示信息，會打印到此處，像這樣：
js加載失敗
-
關於Console的其他用處
查看變量。直接在控制台中輸入變量名（當然需要這個變量在作用域內），即可查看。
編寫js。這就意味着我們可以自己定義變量、寫函數，做個簡單的網頁腳本完全不成問題。例如，通過DOM來獲取搜索關鍵字input這個元素：
查看變量
—— 3 ——
-
Sources面板
資源面板就是將瀏覽器加載當前頁面時，所用到的資源文件的列表，它會按資源的URL來進行分類，如圖所示：
查看資源
該面板最關鍵用處的就是可以調試js。我們可以找到對應的js文件，然后設置斷點，進行調試。
在這里調試非常的方便，我們可以添加要觀察的變量，它可以是在作用域內已定義的變量，也可以是通過DOM獲取到的元素，或者通過各種方式得出的變量。
它可以清晰的展示出變量的所有屬性、事件、以及原型鏈。
斷點調試
例如，我們要觀察某個已知id的input元素,我們可以在這里看到它的所有屬性，以及它的事件與原型：
觀察變量
—— 4 ——
-
Network面板
網絡面板主要是將加載頁面過程中，發送的網絡請求（包括加載資源）按照時間線的形式呈現，能夠看到請求狀態，以及加載的時間等：
網絡請求
我們可以查看每個請求的詳細信息，包括請求的頭部、返回值等（這個對於前后端聯調DEBUG時非常有用）:
請求詳細信息
至此，大概把個人在試用Chrome調試工具比較常用的部分整理了一遍，希望本文能幫助到你了解Develop Tools。