使用 Chrome 來檢視動態 DOM
  • 1,195 views,
  • 2016-11-29,
  • 上傳者: Kuann Hung,
  •  0
最近在看 Dragula,邊玩的時候,就發現如果我想要監看拖拉的行為,或是拖拉中的 DOM 時,不知道怎麼用 DevTools 檢視。像是下圖,由於正在拖拉那個區塊,放開後就沒了,即使開啟 DevTool 也看不到,更別論到要如何看到拖走後的那個 DOM 了
 
d60576b74dd8e982970e7fef88223506.png
 
好在 Chrome 提供了很好的方法,這樣就可以方便的檢視,並直接動態改掉你想看到的 DOM 喔!!
步驟
1.
選取會更動的 DOM
以這個網頁為例,https://bevacqua.github.io/dragula/
先選取到會變動的 DOM (本例為 left-defaults)
2.
按右鍵設定 Break on
在需要觀察的 DOM 上按右鍵,並選擇 Break on...,就是設定一個中斷條件
我的範例中,需要監看的是 Subtree modifications 的行為,所以我就設定這個即可
3.
移動 DOM
設定好之後,就來移動裡面的 DOM,然後就會出現 debugger,並且進入暫停的狀態
4.
切換到 Elements 觀察這個狀態下的 DOM
接下來,時間暫停了,你想要看甚麼,改變甚麼都可以囉!!
 
5.
逐行執行 或是 繼續執行
如果要程式逐行執行,就按 [F10],若是要繼續執行就按 [F8]
不過按完 [F8],可能因為移動,又會跳回 pause 狀態
這時候可以去回去設定的地方,把 Break on 取消就好囉!
Facebook 討論區載入中...
資料夾 :
發表時間 :
2016-11-29 22:55:24
觀看數 :
1,195
發表人 :
Kuann Hung
部門 :
老洪的 IT 學習系統
QR Code :