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. smarty 模板几个例子（变量调节器）

    一.assign和display方法的使用以及几个变量调节器 header("content-type:text/html;charset=utf-8");//加载Smarty引擎 ...

  2. mfc通过信号量保证线程同步

    1.声明一个全局handle,记住在cpp里也声明 extern HANDLE uiHandle; 2.创建信号量 uiHandle = CreateSemaphore(NULL,1,1,NULL); ...

  3. tomcat 8.xxx ssl使用websocket Failed to close the ServletOutputStream connection cleanly

    报错: 2019-09-17 10:30:17.277 default [https-jsse-nio-8110-exec-20] INFO o.a.t.w.s.WsRemoteEndpointImp ...

  4. Excel转html工具类

    有时需要将Excel展示在页面上,所以需要将Excel转化为html,这里封装一个工具类. Excel和servlet访问效果如下图示: 工具类代码: POIReadExcelToHtmlUtil.j ...

  5. iOS-上传头像的使用

    static NSString *const uploadSuccess = @"更改头像成功"; @interface DMAccountInformationViewContr ...

  6. 什么是梯度下降法与delta法则？

    梯度下降法就是沿梯度下降的方向求解函数(误差)极小值.delta法则是使用梯度下降法来找到最佳权向量.拿数字识别这个案例为例,训练模型的过程通常是这样的.输入为1万张图片,也就是1万个样本,我们定义为 ...

  7. Unstanding LSTM

    1.RNNs 我们可以把RNNs看成一个普通网络做多次复制后叠加在一起组合起来,每一个网络都会把输出传递到下一个网络中. 把RNNs按时间步上展开,就得到了下图: 从RNNs链状结构可以容易理解到他是 ...

  8. 虚拟机（VM）安装openwrt-koolshare软路由

    ⒈创建虚拟机 **软路由选择Windows操作系统,因为我们需要在PE环境中进行软路由的写入,固件类型选择BIOS,网络类型选择使用仅主机模式网络,虚拟磁盘类型选择IDE[一定要选择IDE模式],SC ...

  9. MySQL的安装 --windows版本

    下载 第一步:打开网址,https://www.mysql.com/ ,点击downloads之后跳转到 https://www.mysql.com/downloads/ 第二步 :跳转至网址 htt ...

  10. 操作系统diy-1-资料整理

    已经研三了,前段时间校招找了份内核开发的工作,正好有时间做这个以前一直想做的事情.听说写操作系统要花很多时间了解学习计算机方方面面的知识,之前也查过相关的资料,关注过mit的操作系统公开课程.这几天准 ...