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

简介:

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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

相关文章
|
6月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
59 1
|
6月前
|
Web App开发 安全 网络安全
关于 Chrome 开发者工具 Network 面板里观察到的 net ERR_CERT_AUTHORITY_INVALID 错误
关于 Chrome 开发者工具 Network 面板里观察到的 net ERR_CERT_AUTHORITY_INVALID 错误
194 0
|
3月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
24 0
|
3月前
|
Web App开发 存储 缓存
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
144 0
|
1月前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
30 0
|
2月前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
3月前
|
Web App开发 前端开发 JavaScript
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
33 0
|
5月前
|
Web App开发 SQL Linux
使用 Chrome 开发者工具获取网站的 LCP 数据
使用 Chrome 开发者工具获取网站的 LCP 数据
54 0
|
5月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 开发者工具去除某些网站上无法关闭的模态对话框
使用 Chrome 开发者工具去除某些网站上无法关闭的模态对话框
39 0
|
6月前
|
Web App开发 开发者
关于 SAP UI5 学习教程示例代码里 Chrome 开发者工具 Console 面板里一些错误消息的说明试读版
关于 SAP UI5 学习教程示例代码里 Chrome 开发者工具 Console 面板里一些错误消息的说明试读版
37 0