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. 010-HTTP协议

    一.概述 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传输协议.它可以使浏览器更加高效,使网络传输减少.它不仅保证 ...

  2. python3 @classmethod 和 @staticmethod 的区别

    如果您将某个东西定义为classmethod,这可能是因为您打算从类而不是类实例中调用它. 定义类方法的几种方式: 常规方式                       : 需要self隐士传递当前类 ...

  3. Jenkins+gitlab+maven持续集成

    https://blog.csdn.net/tq08g2z/article/details/79718425 https://www.jianshu.com/p/3507d8b2ac87 报错用下面解 ...

  4. jenkins容器内修改root密码--ubuntu系统

    http://www.voidcn.com/article/p-yvnoogkc-ng.html 由于jenkins官方镜像是ubuntu系统,所有啥的都用 sudo 换到root账号,然后登陆har ...

  5. 1-18-2 LVM管理和ssm存储管理器使用&磁盘配额 (二)

    LVM管理和ssm存储管理器使用&磁盘配额  (二) 内容如下: ü  LVM快照 ü  ssm存储管理器的使用 ü  磁盘配额 第1章 LVM快照 lvm快照:为了保持系统的一致性,我们先做 ...

  6. Spring Aop（八）——advisor标签

    转发地址:https://www.iteye.com/blog/elim-2396274 8 advisor标签 advisor标签是需要定义在aspect标签里面的,其作用与aspect类似,可以简 ...

  7. Day04:循环结构(while、do-while、for)

    Java 循环结构 - while ,do...while,for 反复执行一段相同或相似代码的格式. 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java ...

  8. 第五章 局域网的ARP 欺骗

    @ARP欺骗 arp欺骗仅限于局域网. arp欺骗虽然仅限于局域网,但却能让我们掌握网络的布局,以及如何通信:所以,我觉得这个章节非常有用. 监控本机流量 kali linux默认是不转发ip,如果我 ...

  9. Qt5."Clang Code Model"一些设置

    1.有些设置 可能这里在设置了,到别的地方(例如换了一个机子) 又要设置,这样的话 在不熟练的时候 手动敲进去会比较慢,这里 先记录下来 以后要用 直接复制就行了 2.Qt5.9.8 vs2017 : ...

  10. uwp,c#,mediaElement与slider进度条绑定

    虽然微软uwp官方已停止对传统媒体控件mediaElement的update,新控件为mediaPlayerElement和mediaPlayer[官方word:https://docs.micros ...