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开发者工具中Elements(元素）断点的用途的更多相关文章

  1. 【译】在 Chrome 开发者工具中调试 node.js

    原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...

  2. 使用chrome开发者工具中的network面板测量网站网络性能

    前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...

  3. 在chrome开发者工具中观察函数调用栈、作用域链与闭包

    在chrome开发者工具中观察函数调用栈.作用域链与闭包 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量 ...

  4. 在chrome开发者工具中观察函数调用栈、作用域链、闭包

    在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象,闭包,this等关键信息的变化.因此,断点调试对于快 ...

  5. 在 Chrome 开发者工具中调试 node.js

    命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...

  6. 前端基础进阶（六）：在chrome开发者工具中观察函数调用栈、作用域链与闭包

    在前端开发中,有一个非常重要的技能,叫做断点调试. 在chrome的开发者工具中,通过断点调试,我们能够非常方便的一步一步的观察JavaScript的执行过程,直观感知函数调用栈,作用域链,变量对象, ...

  7. chrome 开发者工具，查看元素 hover 样式

    在web开发中,浏览器开发者工具是我们常用的调试工具.我们经常会有这样的需求,就是查看元素的时候需要查看它的hover样式.相信有很多小伙伴都遇到过这样的情形,始终选不中hover后的元素状态.其实在 ...

  8. Chrome 开发者工具中的命令菜单

    单 大家对命令菜单(Command Menu)应该都不陌生.目前主流的编辑器中都内置了对该功能的支持.在 Sublime Text 和 Visual Studio Code 中你都可以通过快捷键 Ct ...

  9. 使用chrome开发者工具中的performance面板解决性能瓶颈

    前面的话 使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动.本文将详细介绍如何使用performance面板解决性能瓶颈 准备 [匿名模式] 匿名模式 ...

随机推荐

  1. HOSTS大法解决Github Clone太慢

    经常要clone github中的一些项目,无奈如果不爬梯子的话速度实在是龟速,经常1k/s,于是搜了下解决方法,改HOSTS大法. Windows下在C:/Windows/system32/driv ...

  2. webview的学习总结：

    1.1: Weview常见的坑 及其 内存泄漏的解决方案: WebView 1. WebView常见的坑 API 16之前版本存在远程代码执行漏洞,该漏洞源自于程序没有正确限制使用WebView.ad ...

  3. iOS-ShareSDK的使用（转）

    官方下载ShareSDK iOS:http://sharesdk.cn/ ShareSDK社会化分享 包含“社会化分享组件”“社会化登录组件”“第三方评论和赞”三大模块,并有详尽的数据统计后台,助力移 ...

  4. jenkins:执行远程shell脚本时，脚本没有生效

    问题: jenkins远程部署一台机器时,jenkins构建显示成功,但是查看服务日志却没有真正执行的sh run.sh脚本,导致服务并没有启动 解决: 只需要在命令最上方加上source /etc/ ...

  5. 360安全卫士11.0史上最小版发布，去流氓，最精简，300MB内存轻松运行。完全不拖慢电脑的速度，由王宁诚意发布。

    360安全卫士11.0史上最小版发布,也是史上最快版本.大家可能都不喜欢360,为什么?因为360太流氓,而大家想过如果360去掉了流氓会怎么样?对,那样360就会变成一个性能可以超过知名杀毒软件-s ...

  6. （3）Linux命令分类汇总（7~12）

    Linux命令分类汇总(7~12) (七)用户管理命令(12个) 1    useradd cdgs   添加用户. 2     usermod 修改系统已经存在的用户属性. 3    userdel ...

  7. vue实现文件上传

    <!-- multiple多个文件上传 accept文件类型--> <input type="file" @change="addFile" ...

  8. java_guide_类加载器

    类加载器总结 JVM 中内置了三个重要的 ClassLoader,除了 BootstrapClassLoader 其他类加载器均由 Java 实现且全部继承自java.lang.ClassLoader ...

  9. PDF转任意格式 & 做动画效果

    1.PDF转任意格式 & 做动画效果|让PPT傻眼去吧! http://www.aiweibang.com/yuedu/6984803.html

  10. nginx 配置用户认证

    nginx 配置用户认证有两种方式: 1.auth_basic 本机认证,由ngx_http_auth_basic_module模块实现.配置段: http, server, location, li ...