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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
相关推荐
Chrome开发者工具是Google Chrome浏览器内置的一套强大的网页开发和调试工具，它为前端开发者提供了丰富的功能，包括元素检查、网络监控、源代码编辑、性能分析等。这份“Chrome开发者工具中文手册”旨在帮助用户...
在 Chrome 浏览器中，用户可以通过 F12 或者通过菜单→更多工具→开发者工具来打开开发者工具。在开发者工具中，用户可以看到浏览器缓存各种文件，包括 HTML、CSS、JavaScript、图片、视频等文件。 浏览和下载 har ...
而Chrome开发者工具能够帮助开发者快速定位并解决代码中的问题，提高开发效率。它不仅可以用于简单的HTML和CSS调试，还能支持JavaScript、网络请求监控、性能分析等多个方面，几乎覆盖了前端开发的所有环节。此外，...
在"mastering-chrome-developer-tools: Chrome开发者工具全天研讨会的资料"中，我们可以深入学习如何充分利用这些工具来提升工作效率。 首先，我们要了解Chrome开发者工具的基本构成和界面布局。它通常隐藏在浏览器...
例如，在Chrome开发者工具的Elements视图中，右键点击元素并选择“Break on...”选项，可以设置针对子树节点变化、节点属性变化或节点被删除的断点。 除了基本的调试方法，理解异常处理也是调试的重要组成部分。在...
Chrome开发者工具（Chrome DevTools）是Google Chrome浏览器内置的一套强大的Web开发和调试工具，它为前端开发者提供了丰富的功能，帮助他们实现对网页的实时编辑、性能分析、网络请求检查等任务。在Mac操作系统上...
Chrome DevTools是一套集成在Chrome浏览器中的调试工具，它允许开发者对网页进行实时编辑、性能分析、网络请求监控以及诸多其他功能。在提升前端开发效率、调试代码和优化用户体验方面发挥着重要作用。 1. **元素...
Chrome浏览器作为一款广泛使用的Web浏览器，提供了强大的开发者工具来帮助开发者进行网页调试和优化，其中包括查找并分析DOM节点上的事件监听器。本教程将围绕“如何在Chrome中根据DOM找到DOM上的事件”这一主题展开...
Chrome JavaScript 调试工具是Web开发者不可或缺的利器，它为高效、稳定地进行JavaScript代码调试提供了强大支持。Chrome浏览器内置的开发者工具（DevTools）是这个调试环境的核心，其功能强大且易于使用，深受前端...
在前端开发领域，浏览器作为呈现网页的主要工具，对开发者的调试...随着前端技术的不断更新和发展，Chrome开发者工具也在不断地增加新的功能和提升用户体验，因此掌握这些工具的使用对于前端开发人员来说显得尤为重要。
例如，在 Chrome 浏览器中，我们可以使用 DevTools 中的 Elements 标签页来对网页中的元素进行断点调试。 在断点调试过程中，我们可以使用断点调试工具来设置断点，然后对事件处理程序进行跟踪和分析。这样，我们...
以下将详细介绍Chrome开发者工具的各项功能。 首先，Chrome的开发者工具可以通过多种方式打开，如右键点击页面元素并选择“审查元素”，或者通过Chrome的菜单进入，也可以使用快捷键Ctrl+Shift+I（或Ctrl+Shift+J...
总结来说，通过Chrome开发者工具，我们可以： 1. 使用“Sources”选项卡的事件监听器断点来追踪事件。 2. 在“Elements”选项卡中选择元素，通过`event.target`和`event.currentTarget`找到事件源。 3. 利用断点在...
Chrome 浏览器内置的 JavaScript 调试工具，又称为 Chrome DevTools，是开发者们进行前端调试的重要利器。它提供了丰富的功能，包括代码编辑、性能分析、网络请求检查、内存泄漏检测等，使得开发者能高效地定位和...
通过结合Chrome的其他开发者工具，如Network面板查看HTTP请求，Sources面板断点调试，以及Elements面板检查DOM结构，可以构建一个全面的调试环境。 总之，ChromePHP是PHP开发者在谷歌浏览器中调试代码的利器，它...
1. 元素面板（Elements）：这是Chrome开发工具的基础，它允许开发者实时查看和编辑HTML元素，调整CSS样式，查看盒模型，以及检查事件监听器。通过这个面板，你可以快速定位并修改网页的结构和样式，直观地看到页面的...
二、Chrome开发者工具 Chrome DevTools是开发者必备的神器，它包含了一系列功能强大的工具，如元素检查、网络请求分析、性能测试、源代码编辑等。以下是一些关键功能的详解： 1. 调试器：用于查看和修改JavaScript...
Google Chrome 浏览器的开发人员工具是一套强大的网页开发和调试工具，它提供了一系列的功能，使开发者能够轻松地检查、修改和优化网页内容。无论是在页面元素的调整、资源管理、JavaScript 调试、性能分析，还是...