使用DOM Breakpoints找到修改屬性的Javascript代碼

使用Chrome開發者工具的DOM斷點功能可以讓您快速找到修改了某一個DOM元素的Javascript代碼。

在Chrome開發者工具裏,選中想要監控的DOM元素,點擊右鍵,選擇Break on->Attributes modifications:

使用DOM Breakpoints找到修改屬性的Javascript代碼

之後在DOM Breakpoints的tab裏能看到對應的斷點:

使用DOM Breakpoints找到修改屬性的Javascript代碼

然後回到Chrome裏繼續操作,Chrome開發者工具的調試器就會自動在DOM的屬性發生變化的地方停下來:

使用DOM Breakpoints找到修改屬性的Javascript代碼

從調試器的調用上下文能瞭解到是下圖第17行的hide方法設置了display:none的屬性導致DOM斷點的觸發。

使用DOM Breakpoints找到修改屬性的Javascript代碼

要獲取更多Jerry的原創技術文章,請關注公衆號"汪子熙"或者掃描下面二維碼:

使用DOM Breakpoints找到修改屬性的Javascript代碼

使用DOM Breakpoints找到修改屬性的Javascript代碼

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章