2019獨角獸企業重金招聘Python工程師標準>>>

SAP Engagement Center UI的這個按鈕會每秒鐘刷新一次，顯示頁面已經打開了多長時間。

需求：需要找到哪行JavaScript代碼不斷刷新的按鈕文字。

按照經驗判斷，這個文字肯定是一個JavaScript function通過setTimeout每隔一秒執行的。如何快速找到這個function以及setTimeout的調用位置呢？

1. 利用Chrome開發者工具的Elements標簽頁功能，找到該按鈕HTML源代碼對應的標簽。

2. 右鍵單擊該標簽，選擇Break on->subtree modification:

一秒鐘之后，斷點會自動觸發，停留在該元素的innerHTML發生變化的代碼位置。從代碼478我們得知，UI上按鈕的文字能夠刷新，是因為其dom元素的innerHTML屬性被修改的緣故。

從調用棧也能迅速找到setTimeout的調用位置和調用間隔(1秒)

更多Jerry的Chrome開發者工具使用心得，請參考Jerry的公眾號文章：Jerry和您聊聊Chrome開發者工具 要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

轉載于:https://my.oschina.net/u/3771578/blog/1811336

總結

以上是生活随笔為你收集整理的Chrome开发者工具中Elements(元素）断点的用途的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。