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

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2153309/，如需轉載，請註明出處，否則將追究法律責任。