如何通常找出javascript控制网页上一般元素的行为？

Question

看看这个小提琴http://jsfiddle.net/52VtD/2635/

在里面你可以看到一个工具提示工作。

假设我们不是在寻找一个小提琴，并且看不到javascript源代码，但是我们想知道控制这个工具提示行为是什么？

答案是

$("#tooltip1").tooltip();

那么我们如何使用chrome或firefox检查器或其他一些调试/浏览器检查器来找到答案呢？ 优选地，它将是快速的，而不是下载所有.js文件并在IDE中对它们进行美化然后手动搜索。

Answer 1

在* Chrome **中，您可以调出开发人员工具，点击f12 ，在右侧您会看到一个标题为“ Event Listeners ”的标签。 在这里，您应该看到您所在页面的事件监听器。

这应该包含您可能想要的所有事件监听器信息:)

Answer 2

没有快速的答案。 你几乎必须分析一个特定的情况，看看你可以找到什么线索。

在这种特殊情况下，您将怀疑是否有一个事件监听器附加到#tooltip对象。 您可以先在Chrome调试器中查找事件监听器。 右键单击按钮，选择Inspect Element，单击Event Listeners选项卡，然后查看事件监听器。 在这种特殊情况下，您将看到该对象的一堆。 你想要的是mouseout和mouseover。 但是，当你看到附加事件监听器的位置时，它只是带你到jQuery的内部。 这是库的一个挑战，因为它是实际附加事件的库，是开发人员使用的某些更高级API的一部分。

所以，现在您知道jQuery用于附加这些事件。 您需要弄清楚这些事件所附的代码在哪里。 为此，您需要开发一个关于开发人员如何在jQuery中识别此特定对象的理论。 由于这个简单文档没有特定的结构，开发人员发现这个特定对象的可能方式是将"#tooltip"选择器传递给某个jQuery函数。 所以，在这一点上，我会搜索页面中的所有JS "#tooltip" ，看看你找到了什么。

在Chrome调试器中，您可以按Ctrl + F并输入#tooltip。 然后，点击输入几次，因为它将你带到不同的用途，第三次，它将带你到：

$("#tooltip1").tooltip();

而且，你会得到答案。 显然，像这样的每个问题都有点不同，它需要一些侦探工作并搜索以找出在Javascript中搜索的线索。 有些案例比其他案件难得多。