码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-04-28 22:18:21      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:weixin   SM   用途   alt   ica   属性   显示   调用   com   

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(元素)断点的用途

标签:weixin   SM   用途   alt   ica   属性   显示   调用   com   

原文地址:https://www.cnblogs.com/sap-jerry/p/8969468.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!