Chrome調試工具Developer Tools——前端必備神器

本文連接： https://blog.csdn.net/u012542647/article/details/79401485

 

    今天要給你們介紹一個神器，就是谷歌瀏覽器（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。