錄了段視訊放b站了，
https://www.bilibili.com/vide...
視訊講得比較清楚詳細
1,DOM皮膚
1，滑鼠點選選中DOM元素，雙擊可以編輯
2，拖拽、複製、剪下、貼上（ctrl c,ctrl v,ctrl x 快捷鍵）
3，搜尋 ctrl F (可以搜字串、css選擇器、xpath，)
比較複雜的css選擇器也可以，比如：
相鄰兄弟選擇器 .my-button+.my-button、
屬性選擇器 [class^="nav"]
這個功能很實用，除錯程式碼有時候用得著
4，滑鼠右鍵add attribute：新增屬性force status：設定元素狀態，可以用來除錯不同狀態的樣式
(:hover、:active、:focus、:visited、:focus-within、:focus-visible)
style皮膚也有一個地方可以設定元素狀態
break on：元素髮生變化的時候，打斷點
subtree modifacations: 子節點改變
attribute modifications: 屬性改變
node removal: 節點被刪除expand recursively：展開collapse children：收起capture node screenshot：截圖
（注意滾動條）
比如 截b站首頁https://www.bilibili.com/
選中html標籤，或者body標籤，都只能截到一屏，
可以看右邊的computed皮膚的height
html標籤的height只有864px。
#app高度有14048px,那就截圖#app，可以截到完整的頁面。
2，style 皮膚
filter：篩選過濾:hov：設定元素狀態
樣式表：
雙擊可編輯，
數值型的值 按上下方向鍵 會加1/減1，
關鍵詞的 可以看到所有可以設定的值，按上下鍵可切換。
3,computed 皮膚
- 最後實際應用的值
- 相對值換算成絕對值（比如em、rem、百分比、vh、vw等，換成px）
filter：篩選show all： 顯示全部（很多屬性沒有被樣式表設定的，有預設值）group： 按佈局、文字、外觀等組合
4,Event Listeners
元素（和它的祖先元素）的監聽事件
如果把Ancestors勾選上，就顯示自己+祖先的，
如果不勾選，就只顯示自己的
5,DOM Breakpointers
右鍵 break on 打的斷點會顯示在這裡
