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

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

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


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


image.png


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


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


image.png


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


image.png


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


image.png


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

image.png




相关文章
|
2天前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
29 0
|
2天前
|
Web App开发 缓存 JavaScript
Chrome 开发者工具 Request content was evicted from inspector cache
Chrome 开发者工具 Request content was evicted from inspector cache
21 1
|
2天前
|
Web App开发 前端开发 JavaScript
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
23 7
|
2天前
|
Web App开发 前端开发 JavaScript
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
6 0
|
2天前
|
Web App开发 前端开发 JavaScript
Chrome 开发者工具的 sources 面板中的 Show ignore-listed frames 开关
Chrome 开发者工具的 sources 面板中的 Show ignore-listed frames 开关
7 0
|
2天前
|
Web App开发 JavaScript 前端开发
【专栏】如何使用 Chrome DevTools 的断点功能提升前端调试效率, 花式打断点
【4月更文挑战第29天】本文介绍了如何使用 Chrome DevTools 的断点功能提升前端调试效率。从基本的行断点和函数断点,到更高级的条件断点、DOM 断点、XHR 断点和事件断点,以及代码注入断点,详细阐述了各种断点的设置和应用场景。通过断点调试实战案例,如异步操作、复杂逻辑和性能优化,展示断点在解决实际问题中的重要作用。掌握这些技巧能有效提高开发质量和效率。
|
2天前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
32 0
|
2天前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
2天前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
42 0
|
2天前
|
Web App开发 JavaScript 前端开发
从零开始,轻松打造个人化Chrome浏览器插件
从零开始,轻松打造个人化Chrome浏览器插件
83 0

热门文章

最新文章