Chrome開發者工具中Elements(元素）斷點的用途

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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: