使用DOM Breakpoints找到修改属性的Javascript代码

Posted JerryWangSAP

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用DOM Breakpoints找到修改属性的Javascript代码相关的知识,希望对你有一定的参考价值。

使用Chrome开发者工具的DOM断点功能可以让您快速找到修改了某一个DOM元素的javascript代码。

在Chrome开发者工具里,选中想要监控的DOM元素,点击右键,选择Break on->Attributes modifications:

技术分享图片

之后在DOM Breakpoints的tab里能看到对应的断点:

技术分享图片

然后回到Chrome里继续操作,Chrome开发者工具的调试器就会自动在DOM的属性发生变化的地方停下来:

技术分享图片

从调试器的调用上下文能了解到是下图第17行的hide方法设置了display:none的属性导致DOM断点的触发。

技术分享图片

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

技术分享图片

技术分享图片

以上是关于使用DOM Breakpoints找到修改属性的Javascript代码的主要内容,如果未能解决你的问题,请参考以下文章

Charles学习之使用Breakpoints拦截响应修改返回值更改用户会员身份

无法读取未定义、材质 ui、theme.breakpoints 的属性“向上”

Charles打断点(Breakpoints)

黑马前端-Web APIs—设置/修改DOM元素内容和元素属性

DOM操作 js获取id的内容 和修改原来的内容(innerHTML)

git 配置忽略文件(忽略UserInterfaceState.xcuserstate,Breakpoints_v2.xcbkptlist)