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. CISCN 2019 writeup

    划水做了两个pwn和两个逆向...... 二进制题目备份 Re easyGO Go语言,输入有Please字样,ida搜索sequence of bytes搜please的hex值找到字符串变量,交叉 ...

  2. TensorFlow Object Detection API —— 制作自己的模型

    https://blog.csdn.net/qq_24474463/article/details/81530900 (t20190518) luo@luo-All-Series:~/MyFile/T ...

  3. 总是访问到tomcat首页解决

    部署代码后总是访问到tomcat首页解决 没有把路径写全 访问:养成带上绝对路径的习惯,否则总是访问到tomcat的首页 http://114.116.65.232:8085/ssoserver/

  4. shell变量默认值

    ${var:-string},${var:+string},${var:=string},${var:?string} 1. ${var:-string}和${var:=string}:若变量var为 ...

  5. Linux 系统中用Systemd 管理系统服务

    Systemd  命令详解: https://www.digitalocean.com/community/tutorials/how-to-use-systemctl-to-manage-syste ...

  6. 二分类Logistic回归模型

    Logistic回归属于概率型的非线性回归,分为二分类和多分类的回归模型.这里只讲二分类. 对于二分类的Logistic回归,因变量y只有“是.否”两个取值,记为1和0.这种值为0/1的二值品质型变量 ...

  7. C#使用MPI进行高性能计算

    MPI.NET是用于Microsoft.NET环境的高性能.易于使用的消息传递接口(MPI)实现.mpi是编写在分布式内存系统(如计算集群)上运行的并行程序的事实上的标准,并且得到了广泛的实现.大多数 ...

  8. Spirng 分层，增加数据访问对象层

    到层关键注释 @Repository 对应的包 import org.springframework.stereotype.Repository;

  9. 44.python排序算法（冒泡+选择）

    一,冒泡排序: 是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个,如果他们的排序错误就把他们交换过来. 冒泡排序是稳定的(所谓稳定性就是两个相同的元素不会交换位置) 冒泡排序算法的运作如下 ...

  10. 洛谷 题解 P2802 【回家】

    思路:DFS+剪枝 本题可以用一个字符二维数组来存整个地图,然后在往四个方向进行搜索.注意:当走到家门前要先判断血量!(本人就被坑了) 代码: #include<bits/stdc++.h> ...