瀏覽器除錯的必知必會，零基礎足夠詳細-第二節Elements元素面板
前言
關於頁面的直接除錯基本都在這個面板裡面進行
點選1.可以選擇節點，我們選擇2.這個節點，然後就直接進入元素面板了
快速展開全部子節點的方式 ：按住alt再點選節點的展開符號
節點除錯
你可以通過這個方式選擇頁面中的任意節點來進行除錯，也可以直接在右方的元素面板點選切換節點，在任意節點通過滑鼠右鍵都可以啟用更多的功能
編輯節點
在1.這個區域你可以直接編輯節點的屬性，比編輯器更為直觀和迅速；
拷貝節點
在2.這個區域你可以進行拷貝這個節點的一些東西，比如js選擇器，節點樣式或者整個節點；
這在檢視別人網站效果時非常有用
操作
在3.這個區域你可以隱藏節點或者修改當前節點的狀態，比如聚焦，滑鼠移入等操作，同樣的這個操作你可以在右方的styles面板直接切換
檢視節點事件
當你想知道頁面中摸一個節點的變化是哪些JavaScript程式碼在操控它，可以使用 Break on 來監聽頁面
比如我想監聽這個主題選擇面板的切換與顯示是誰在控制，我們點選這個紅框的元素面板節點
然後右鍵可以加入監聽
此時我們再次去點選切換這個主題面板的顯示於隱藏，便會自動跳到JavaScript程式碼中
輔助
在4.這個區域是對我們操作的一個輔助，比如滑動到其他地方快速定位到當前選擇的節點，或者關閉所有已展開的節點
全域性變數
點選5.可以將這個節點儲存為一個全域性變數，可以直接在console面板使用，這個在上面已經提到過
樣式除錯
直接在瀏覽器中除錯樣式也是非常方便的，元素面板的右邊部分就是樣式面板
編輯樣式
可以點選左邊選擇框來決定這個效果是否展示，還可以直接編輯裡面的具體屬性
帶刪除線的效果表示這個效果在這個瀏覽器不起作用
選擇顏色
只要是有顏色的地方可以點選小方塊進入視覺化選擇介面，支援取色和預定義顏色非常方便
選擇陰影
視覺化的方式去製作一個陰影是不是更加的直觀和方便呢
選擇動畫的繪製曲線
檢視資料
點選Computed標籤可以檢視當前節點的各種樣式資料，並可以通過小箭頭直接前往這個效果的原始碼位置
更多內容可以檢視我的個人部落格