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

时间 2019-11-19

标签 chrome 开发者工具 elements 元素断点用途栏目 Chrome 繁體版

原文原文链接

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

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

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

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

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

一秒钟以后，断点会自动触发，停留在该元素的innerHTML发生变化的代码位置。从代码478咱们得知，UI上按钮的文字可以刷新，是由于其dom元素的innerHTML属性被修改的缘故。开发

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

更多Jerry的Chrome开发者工具使用心得，请参考Jerry的公众号文章：Jerry和您聊聊Chrome开发者工具要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:io