javascript - 使用 Firebug 或替代工具查找已定义 JavaScript 的位置

Question

我试图找到一个特定类/函数/对象在一个站点上定义的位置，其中有许多 javascripts 正在呈现。事实证明，在 Firebug 的“脚本”面板中手动筛选脚本非常耗时。

在我继续走这条路之前，是否有更简单的方法使用现代前端开发工具来定位某些事物的定义位置？如果我有 vim 提供的某种 ctags 类型的功能会很棒，但任何其他方法都会很棒。

Answer 1

Chrome 在所有来源中都有查找：

Windows 上的 CTRL-SHIFT-F 和 Mac 上的 CMD-OPT-F。

编辑：

您还可以在 chrome 中使用 CMD-SHIFT-O (mac) CTRL-SHIFT-O (windows/linux) 按名称查找函数。

Answer 2

AFAIK 没有任何标准开发工具（Chrome 调试器、Firebug 等）提供此功能。您可以通过在 Chrome 调试器中输入对象的名称来获取它，但这只会显示类似“Backbone.View.extend.extend.constructor”的内容。换句话说，它向您显示了最根的构造函数，如果您的所有类都恰好是一层深度，这很好。如果不是，例如，如果 A 是 B 的子类而 B 是 C 的子类，那么知道您的对象“a”来自 C 并没有太大帮助。

此外，即使它是您想要的，Chrome 也不会告诉您在哪里可以找到构造函数，只会告诉您它的名称。我个人通过给我的所有对象一个_type属性（或属性，对于那些是主干模型的对象）来解决这个问题。这样我就可以简单地键入myObject._type（或myObject.get('_type'）模型）并知道我拥有什么样的对象。而且由于我给每个对象类型一个唯一的名称，因此找到 cunstructor 所需要的只是grep该名称。