開發人員工具 - 如何檢查即時添加的元素（通過JQuery）？

Question

我正在研究如何使用Chrome中的Inspector設計網站。我也可以使用Firefox開發人員工具或Firefox Web Developer附加組件或Chrome Web Developer擴展。

所以這個網站有一個幻燈片他們是使用jQuery它。正如我期待在督察的標記和CSS，我看到兩件事情不斷改變，因爲改變幻燈片：

1. 一是opacity CSS屬性是可以理解的，但我想 看到變化的值，但它變化太快，看到什麼讀 。

2. 二線一個div在另一個div添加作爲幻燈片改變暫時，但是當它出現的那一刻太短注意到，除了它是一個div什麼。

所以現在的問題是，

1. 有沒有辦法停止播放幻燈片，這樣我可以暫時擺脫閃爍的那種效果（通過快速添加和刪除和更改元素和值）？

2. 我在哪裏可以檢查它獲取這樣一個短暫的瞬間添加div元素，然後獲取刪除？我在哪裏可以看到opacity的價值發生了什麼變化？

Answer 1

是否有辦法停止幻燈片放映，以便我可以暫時擺脫閃爍的效果（通過快速添加和移除以及更改元素和值）？

如果不透明度與CSS過渡或動畫動畫，可以在Firefox和Chrome這讓你暫停動畫，甚至慢下來使用新增的動畫檢查工具。

如果不透明度通過JavaScript進行動畫，通過快速增加/減少值，那麼您可以使用調試器的能力來在dom變異上中斷。 Chrome可以做到這一點，但它是not yet implemented in Firefox。

我在哪裏可以檢查在這麼短的時間內被添加的div元素，然後被刪除？我在哪裏可以看到不透明度值發生了什麼變化？這裏

相同的答案，你應該使用調試器的DOM突變特性休息時div被插入到停止調試器。這將讓你看到究竟哪一行javascript代碼插入/刪除了div或修改了opacity，並且可以讓你在該時間點檢查元素。

Answer 2

如果我直接得到你的問題，你想「學習」一個幻燈片，以瞭解它是如何工作的。

您是否嘗試過查看源代碼並搜索您想要檢查的jQuery代碼片段？ 如果該頁面的源代碼沒有被壓縮，你應該能夠理解那裏寫的是什麼。