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. qt ui

    /******************************************************************************** ** Form generated ...

  2. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_6.RabbitMQ研究-入门程序-消费者

    我们在consumer这个功能下进行代码的编写 首先是新建这个层级的包 创建入门程序的消费者 消费者也需要和mq建立通道.建立连接创建通道 在顶部都声明这个队列 下面写核心代码监听队列.basicCo ...

  3. 一百二十九：CMS系统之七牛云存储介绍和配置

    将图片的存储.尺寸等图片本身的一些擦做,交给七牛云处理,自己只关注网站开发本身 七牛云官网:https://www.qiniu.com 操作 登录后,点击管理控制台 点击对象存储-->新建存储空 ...

  4. Java并发编程系列-(7) Java线程安全

    7. 线程安全 7.1 线程安全的定义 如果多线程下使用这个类,不过多线程如何使用和调度这个类,这个类总是表示出正确的行为,这个类就是线程安全的. 类的线程安全表现为: 操作的原子性 内存的可见性 不 ...

  5. maven编译正常,运行报错:中没有主清单属性

    在pom.xml添加插件 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId&g ...

  6. PowerShell ISE/文件名解析缺陷远程执行代码漏洞#RCE

    基础信息 ID 1337DAY-ID- 32642 类型 zdt Reporter hyp3rlinx 修改后的 2019-05-03 00:00:00 描述 在调试包含数组括号作为文件名一部分的特制 ...

  7. .Netcore 2.0 Ocelot Api网关教程（7）- 限流

    本文介绍Ocelot中的限流,限流允许Api网关控制一段时间内特定api的总访问次数.限流的使用非常简单,只需要添加配置即可. 1.添加限流 修改 configuration.json 配置文件,对  ...

  8. 【ABAP系列】SAP ABAP替代校验全解析

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP替代校验全解析 ...

  9. U3D 自定义shader创建Editor扩展

    “工欲善其事,必先利其器”Shader学习工具篇 最近一直忙于录制关于Shader入门的视频教程,其中一个反复的机械动作就是右键创建所需要的新Shader.悲剧的是每次打开的都是Unity3D默认的S ...

  10. 【miscellaneous】语音识别工具箱综述和产品介绍

    原文:http://www.thinkface.cn/thread-893-1-1.html 今天是周末,想来想去,还是写一篇这样的博文吧.算是对语音识别这一段时间的总结,为后来的人融入铺好前面的路. ...