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

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


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


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


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


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


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


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


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


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


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


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

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




上一篇:闪迪助力汽车 和工业“物联网”应用


下一篇:shell快速迁移海量文件