Chrome 開發工具之Elements

友情提示:全文圖片高能，如使用手機閱讀，請確保在wifi狀況下或者流量充足。圖片有點渣，也算辛苦作出來的，請別嫌棄～

Elements面板主要展現當前頁面的組織結構，在現在的應用程序中，HTML頁面初始化時加載的不必定就是以後看到的DOM樹，有一個頁面結構的實時調試工具能夠很好的幫助開發者調試開發和調試bug，下面開始認識下Elements面板。

打開開發工具

1.右鍵點擊頁面，點擊"檢查" (mac && window)

2. control+command+j (mac) 和 f12 (window)

這個面板長什麼樣

解釋下各編號所指的內容：

#1 用於在頁面上選擇一個元素，而且查看該元素

#2 模擬設備之間的切換，主要是pc/移動端(包括手機，平板)

#3 html元素結構顯示及實時編輯

#4 當前選中元素的所在位置(如圖中，div.test在html中的body中)

#5 顯示當前選中元素的樣式，盒模型

#6 顯示當前選中元素的盒模型，樣式屬性計算

#7 顯示當前選中元素上所綁定的事件

#8 顯示DOM斷點列表

#9 顯示當前選中元素的屬性

下面開始介紹以上9個點的使用方式

#1 元素選擇器

點擊該圖標，而後點擊須要選中的元素。

 

#2 設備切換

默認是pc端的顯示方式，點擊後以移動端格式顯示，再次點擊便退回到pc端顯示格式。

#3 html元素結構顯示及實時編輯

先來看看元素結構的顯示

html元素屬性的添加/修改/刪除

操做步驟解釋：

1.將第一個div的class屬性去掉/修改(這裏直接去掉了這個屬性)

2.給第一個div從新加上test類(右擊元素，選擇 Add Attribute，其實也能夠雙擊元素標籤)

3.給第一個div加上屬性index，值爲0(同上)

4.編輯元素內文本內容(右擊元素，選擇"Edit Text")

5.全面編輯該元素(右擊元素，選擇"Edit as HTML")

html元素的複製/粘貼和隱藏/刪除

操做步驟解釋：

1.元素的複製(選擇要複製的元素，右擊元素，選擇"Copy=>Copy element")

2.元素的粘貼(選擇要粘貼的位置，右擊該元素，選擇"Copy=>Paste element")

3.隱藏/刪除拷貝過來的元素(右擊元素，選擇"Hide element"或者"Delete element"。這裏作刪除操做)

剪切元素同上

#4 當前選中元素的所在位置

注意該位置的變化...

#5 顯示當前選中元素的樣式，盒模型

#1 選中的元素
#2 選中元素的css樣式
#3 該元素的盒模型

css樣式編輯

操做步驟解釋：

1.添加樣式(在樣式行的空白處用左鍵點擊)

2.修改樣式(點擊樣式名或者樣式值)

3.顯示/隱藏該樣式(點擊樣式前面的選擇框便可)

4.選取顏色(點擊顏色的標識圖即可)

#6 顯示當前選中元素的盒模型，樣式屬性計算

如圖所示即是盒模型和計算出來的樣式屬性值。

#7 顯示當前選中元素上所綁定的事件

操做步驟解釋：

1.跟蹤至事件定義處(點擊右邊顯示的文件及行數，或者右擊事件handler，選擇"Show Function Definition"，這裏選擇前者操做)

2.做爲全局變量存儲(在全局變量即可以訪問這個函數)

#8 顯示DOM斷點列表

和在Sources面板的斷點相似。給DOM加斷點，在達到規定條件時觸發斷點，截斷javascript的執行而且定位到斷點處。

DOM斷點主要有如下條件：

1.Subtree Modefications => 該DOM的子DOM結構發生變化時觸發

2.Attributes Modefications => 該DOM的屬性發生變化時觸發

3.Node Removal => 該DOM從DOM結構中被刪除時觸發 

操做步驟解釋：

1.給div.test的第一個元素添加Subtree Modifications的斷點(右擊元素，選擇"Break on..."=>"Subtree Modefications")

2.給div.test的第二個元素添加Attributes Modefications的斷點(右擊元素，選擇"Break on..."=>"Attributes Modefications")

3.給div.test的第三個元素添加Node Removal的斷點(右擊元素，選擇"Break on..."=>"Node Removal")

4.刪除Subtree Modefications的斷點

5.刪除全部斷點

#9 顯示當前選中元素的屬性

包含該元素的DOM屬性。

怪不得不喜歡作gif，作圖比寫字麻煩好多哦～ 歡迎各位小夥伴交流討論技術...