谷歌瀏覽器如何調試界面上動態元素
相信很多前端開發者都遇到過一個頭痛的問題，頁面上需要通過hover，鼠標滑入才會變化的部分UI，無法被調試。
已京東的一些商品分類的二級彈框為例。我們像調試這個彈框時，卻發現選中后，彈框就隱藏了。
調試步驟
-
右鍵檢查該彈框
-
在元素選項卡下方選中該彈框的父級節點
-
點擊
...或者右鍵
選中 子樹修改 和 屬性修改 兩個選項。
-
重新操作觸發彈框顯示
這個時候，界面會進入debugger狀態
-
在開發者工具界面 點擊選擇元素按鈕，選中我們想要調試的元素
這個時候可以看到。我們就可以調試動態元素了。
總結
該方法可以debugger的場景
- 節點屬性的變化
- 子節點的變化
- 節點的移除
還包括 - hover
- active
- focus
...
快去體驗下吧。