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/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- Chrome開發者工具詳解(1)：Elements、Console、Sources皮膚Chrome
- 使用 Chrome 開發者工具 Elements 標籤動態修改 CSS 類試讀版ChromeCSS
- chrome開發者工具Chrome
- chrome開發者工具的使用Chrome
- Chrome 開發者工具的技巧Chrome
- 深入探索Chrome開發者工具：開發者的利器Chrome
- chrome開發者工具使用Chrome
- Chrome 開發者工具 workspace 的概念Chrome
- Chrome開發者工具的小技巧Chrome
- 【譯】你不知道的Chrome除錯工具技巧 第四天：the Elements panel（元素皮膚）Chrome除錯
- chrome devtool 開發者工具 控制檯歷史、斷點歷史 匯出全部、儲存Chromedev斷點
- chrome開發者工具 - 00 概述Chrome
- chrome 開發者工具使用技巧Chrome
- Chrome 中的 JavaScript 斷點設定和除錯技巧ChromeJavaScript斷點除錯
- Google Chrome 開發者工具漏洞利用GoChrome
- Chrome 72 開發者工具新特性Chrome
- Chrome 77 開發者工具新特性Chrome
- Jerry和您聊聊Chrome開發者工具Chrome
- Chrome 開發者工具的小技巧總結Chrome
- 新版的Chrome斷點有問題Chrome斷點
- Chrome 開發者工具裡的 CSS grid editorChromeCSS
- Chrome 開發者工具 performance 標籤頁的用法ChromeORM
- 如何更專業的使用Chrome開發者工具Chrome
- 使用Chrome 開發者工具提取對應的字串Chrome字串
- Chrome 自帶開發者工具筆記Chrome筆記
- Chrome開發者工具Debug入門Chrome
- [譯] Chrome 73 開發者工具新特性Chrome
- chrome開發者工具各種騷技巧Chrome
- 使用chrome開發者工具中的performance皮膚解決效能瓶頸ChromeORM
- 利用 Chrome 開發者工具遠端除錯 Android 中的原生 WebViewChrome除錯AndroidWebView
- Chrome開發者工具裡的一個隱藏技能:chrome://net-internalsChrome
- Chrome 66 開發者工具新特性介紹Chrome
- 使用 Chrome 開發者工具 Console 皮膚進行元素審查試讀版Chrome
- chrome devtools使用詳解——Elements篇Chromedev
- 使用Chrome開發者工具研究JavaScript的垃圾回收機制ChromeJavaScript
- 開發者工具的新特性 (Chrome 71) [雙語+視訊]Chrome
- 適用於開發者的最佳 Chrome 擴充套件工具Chrome套件
- 透過使用Chrome的開發者工具來學習JavaScriptChromeJavaScript