javascript - 定位一个 Span jQuery 控制器

Question

我试图在我的模板中找到一个控制 span 元素的 jQuery 代码。

例如：

<span class="ccontent"

• 将鼠标悬停在该类上时会打开一个信息窗口。

如何使用 Chrome 在我的模板中找到与此相关的 jQuery 代码以及它所在的文件？

Answer 1

尝试使用视觉事件 2

Visual Event 是一个开源 Javascript 小书签，它提供有关已附加到 DOM 元素的事件的调试信息。视觉事件显示：

• 哪些元素附加了事件
• 附加到元素的事件类型
• 将与事件一起运行的代码被触发
• 定义附加函数的源文件和行号（仅限 Webkit 浏览器和 Opera）

Answer 2

在 Chrome 中，右键单击并选择“检查元素”以打开检查器。在 Mac 上，您可以使用 Command + Option + I

之后单击资源选项卡，然后单击 Command + F（同样是 Mac，不确定 PC）。在搜索框中键入 ccontent，您将看到对该类名的引用数。单击直到您看到代码中提到它的所有位置。

Answer 3

当您可以在代码中搜索有问题的 id（例如“#ccontent”）时，Matthew Davis 的答案将起作用，但当元素被间接引用时，例如按类或按元素类型，则效果不佳。

Visual Events 小书签也会帮助您，但有时它只会列出绑定到元素的事件的缩小 JQuery 代码。

当执行鼠标悬停或其他导致 DOM 更改或悬停对象属性更改的操作时，前两个（更简单！）选项失败，您可以尝试以下操作：

• 进入 Chrome 开发者工具的 Elements 选项卡 (CTRL+SHIFT+I)。
• 如果您对跟踪元素的属性更改感兴趣，请右键单击它并单击“Break On > Attributes modified”：

• 如果您对 DOM 中的某些更改感兴趣（例如出现模式），请右键单击文档正文或相关容器 div，然后单击“中断 > 子树修改”：

• 然后在元素上执行鼠标悬停或触发您感兴趣的任何事件。
• Chrome 调试器应该启动，右侧是调用堆栈：

• 您可以单击调用堆栈中的不同项目，以查看在 Source 选项卡中触发调用的位置。