首页 技术 正文
技术 2022年11月14日
0 收藏 725 点赞 4,159 浏览 482 个字

SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间。

需求:需要找到哪行JavaScript代码不断刷新的按钮文字。

Chrome开发者工具中Elements(元素)断点的用途

按照经验判断,这个文字肯定是一个JavaScript function通过setTimeout每隔一秒执行的。如何快速找到这个function以及setTimeout的调用位置呢?

1. 利用Chrome开发者工具的Elements标签页功能,找到该按钮HTML源代码对应的标签。

Chrome开发者工具中Elements(元素)断点的用途

2. 右键单击该标签,选择Break on->subtree modification:

Chrome开发者工具中Elements(元素)断点的用途

一秒钟之后,断点会自动触发,停留在该元素的innerHTML发生变化的代码位置。从代码478我们得知,UI上按钮的文字能够刷新,是因为其dom元素的innerHTML属性被修改的缘故。

Chrome开发者工具中Elements(元素)断点的用途

从调用栈也能迅速找到setTimeout的调用位置和调用间隔(1秒)

Chrome开发者工具中Elements(元素)断点的用途

Chrome开发者工具中Elements(元素)断点的用途

更多Jerry的Chrome开发者工具使用心得,请参考Jerry的公众号文章:Jerry和您聊聊Chrome开发者工具
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

Chrome开发者工具中Elements(元素)断点的用途

Chrome开发者工具中Elements(元素)断点的用途

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,494
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,908
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,495
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,133
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,297