通常来说,当我想知道jQuery插件[网站X]用于[行为Y]时应该怎么走?
#1 楼
Firefox和Chrome都有有用的调试工具,可帮助您找到有关行为脚本的更多信息。我将主要在Chrome中进行解释,因为它们的默认调试工具更加广泛。首先,您通常可以使用
Right Click->Inspect Element
快速查找有关元素的信息。但是,这似乎不适用于Facebook的股票行情-这样做会选择滚动条后面的“股票行情新闻”,如下所示:,因为我们看不到元素修改后,我们将不得不做出一些猜测。股票行情故事本身似乎与滚动条没有任何关系。转到父级并折叠
<div class="tickerActivityStories">
之后,我们可以开始清楚地看到事物通过将鼠标悬停在上面(并调用滚动条的“出现”代码),我们可以观察页面的DOM并记下差异。 br />
因此,每当鼠标进入/离开时,
<div class="uiScrollableAreaTrack">
都会相应响应。该名称也很有意义(暗示它是滚动条的轨道)。通过展开该div
,我们会注意到滚动条甚至还有一个“抓爪”!在<div class="uiScrollableAreaGripper"
上,在右窗格中,展开Event Listeners
选项卡。我们可以假设它响应焦点,并且在Focus
部分下,您会注意到对Javascript文件的一些引用。将鼠标悬停在文件名上,Chrome会向您显示Javascript文件的链接。 如果运气好的话,这些文件可能具有可识别的名称(例如
typeahead.min.js
或类似名称,您可以在Google上搜索)。不幸的是,在大多数情况下,包括我们在内,我们很可能在寻找专有代码或精简代码。 (最小化的代码在减小文件大小以使页面加载更快方面极为普遍)
评论
我知道有人在SO上问过这个问题,但答案并未提供对JavaScript进行反向工程的基本思路。