DOM樹(shù)

可以查看當(dāng)前節(jié)點(diǎn)和所有父輩節(jié)點(diǎn)

Image.png

Image.png

菜單作用

(1) Add attribute：添加屬性，比如添加title屬性；(節(jié)點(diǎn)沒(méi)有屬性時(shí)，快捷鍵為Enter)
(2) Edit attribute：編輯屬性（在節(jié)點(diǎn)的屬性上右鍵才出現(xiàn)這項(xiàng)）；（節(jié)點(diǎn)有屬性時(shí)，快捷鍵為Enter）
(3) Force element state：使元素處于某種偽類狀態(tài)，可選四種：
:active -> 選定狀態(tài)
:hover -> 鼠標(biāo)移到元素上的狀態(tài)
:visited -> 已經(jīng)訪問(wèn)過(guò)的狀態(tài)
:focus -> 獲取焦點(diǎn)狀態(tài)
這些狀態(tài)通常用來(lái)調(diào)試不同狀態(tài)下的css樣式
(4) Edit as HTML：編輯節(jié)點(diǎn)，用于編輯的文本框在失去焦點(diǎn)后結(jié)束編輯；（快捷鍵為F2）
(5) Copy as HTML：復(fù)制HTML；
(6) Copy css path：復(fù)制css路徑，類似當(dāng)前節(jié)點(diǎn)的選擇器；
(7) Copy XPath：復(fù)制XPath；
(8) Delete node：刪除節(jié)點(diǎn)；（快捷鍵為del）
(9) Inspect DOM properties：在console（會(huì)自動(dòng)打開(kāi)drawer中的console面板）中顯示當(dāng)前節(jié)點(diǎn)對(duì)象
(10) Break on：
Subtree modifications -> 子樹(shù)修改時(shí)打斷；
Attributes modifications -> 節(jié)點(diǎn)屬性修改時(shí)打斷；
Node removal -> 節(jié)點(diǎn)移除時(shí)打斷；
(11) Scroll into view：當(dāng)前節(jié)點(diǎn)不在視口中時(shí)，頁(yè)面滾動(dòng)至節(jié)點(diǎn)出現(xiàn)在視口；
(12) Word wrap：節(jié)點(diǎn)過(guò)長(zhǎng)時(shí)是否換行，勾上-> 換行；不勾 -> 不換行，出現(xiàn)滾動(dòng)條；

styles面板

修改樣式時(shí)可以看到效果

Styles面板里顯示的是：在選中節(jié)點(diǎn)上應(yīng)用的樣式，通過(guò)橫線分割每一條rule，rule的權(quán)重越靠上越高。
可以對(duì)rule進(jìn)行下列操作：
1.修改：
選擇器 -> 點(diǎn)擊對(duì)應(yīng)的選擇器（除element.style，它不是選擇器）；
樣式 -> 點(diǎn)擊對(duì)應(yīng)樣式；
2.添加：
rule，選擇器 ->（后面描述）；
樣式 -> 在rule的空白處點(diǎn)擊；
3.刪除：
rule -> 將所有樣式刪除即可；
樣式 -> 編輯為空，或者將樣式的前的checkbox取消勾選；

面板頂部可以看到：

element.style：在這里面添加的樣式會(huì)被應(yīng)用為節(jié)點(diǎn)的style屬性；
.hover:設(shè)置當(dāng)前元素的偽類
例如::before :afater :hover :focus :visited
.cls添加新的calss
+在該css中添加新的rule

快捷鍵

在調(diào)試一些度量屬性時(shí)，有些快捷鍵是非常好用的：
當(dāng)你在調(diào)height時(shí)
up -> 以1為增量增加高度；
down -> 以1為減量減少高度；
當(dāng)你在調(diào)元素的opacity時(shí)
alt+up -> 以0.1為增量增加透明度；

      alt+down -> 以0.1為減量減少透明度；
有時(shí)你希望跨度更大些
      shift+up或pageup -> 以10為增量
      shift+down或pagedown -> 以10為減量
      shift+pageup -> 以100為增量
      shift+pagedown -> 以100為減量

盒子模型

mage.png

Event　Listreners面板

Image.png

展開(kāi)對(duì)應(yīng)的事件類型后，可以看到在對(duì)應(yīng)dom上綁定的事件詳細(xì)，以及源文件；

DOM Breakpoints

通過(guò)

顯示通過(guò)break on設(shè)置在dom上的斷點(diǎn)

Propertties

顯示當(dāng)前 DOM的原型鏈，也就是 ＤＯＭ都繼承自哪些類