在滚动的开发人员工具中捕获确切的脚本和文件名和字符串

Catch exact script & filename & string in developer tools on scroll

我正在为我的 Wordpress 网站使用 Divi 主题。 在向下滚动一些 px 时,它会向元素添加 class "et_fixed_header" 并更改内联样式 ="margin: -300px".

我在滚动页面时看到 DOM 的变化,模拟 iPhone6,我想捕获在滚动事件上触发的脚本。

如何在 Chrome 的开发工具中进行操作。

我对有条不紊而不是特定的解决方案感兴趣。

非常感谢您的回答。

Chrome版本 50.0.2661.75m

这是我的 DevTools 的截图 http://prntscr.com/au8mah

试图理解UI。

在chrome开发工具中,你可以在Sources/top/web-site-url/wp-content/themes/Divi/js/custom.js

中找到Divi Js

在此文件中搜索 et-fixed-header 并添加断点。他们出现了几次 et-fixed-header。在我的设置中,第663行的那个是正确的。

关于查找方法

在 chrome 开发工具中,在左侧部分,您有源代码。这是网页加载的所有内容。这意味着,您页面的所有 JS 都必须是他们的。

对文件位置有所了解

如果您知道您要查找的 JS (plugin/theme/file):

  • 打开文件
  • 定义与事件相关的关键字(例如:et-fixed-header
  • 使用查找功能 (ctrl+f) 查找关键字
  • 如果关键字是find,打断点
  • 观察断点是否匹配你排除的事件
  • 对每个假设的文件/出现的关键字重复此操作,直到找到您除外的内容

一无所知

可能会更难。一些可能性:

  • 可能是他们在页面中加载的文件不多。因此,如前所述,在每个文件中搜索
  • (!)您可以尝试离线下载该页面并使用任何允许您在文件中查找内容的搜索工具
  • 在 Chrome Dev Tools / Sources 中,您有一个零件调用 Event Listener Breakpoints。在其中,您可以为事件设置断点。如果您知道什么事件启动脚本或脚本触发什么事件,它可用于查找您要查找的内容。

提示

您在 Chrome 用于缩小 JS 的 Dev Tools 中有一个非常好的 Pretty Print 功能。

Link for the documentation about that