Chrome开发者工具 - 如何查找定义控制台中显示的变量的来源

Question

在Chrome开发者工具的控制台中，我们可以查看给定页面范围内的所有变量和函数，如此屏幕截图所示，其中显示了在我们最喜欢的购物网站上定义的名为“buildIssInitObject”的函数{{ 3}}

但未显示的是定义此函数或变量的位置。通常页面会加载许多源文件，因此如何定义控制台中显示的给定函数或变量中的哪一个？

Answer 1

您可以通过使用快捷键 Ctrl + Shift + F （窗口）在“来源”选项卡中搜索来查找所有引用，包括声明）或 Cmd + 选项 + F （Mac）。单击结果以打开文件。

注意：函数定义所在的文件不一定是开发期间创建的原始文件。在这种情况下，代码是从许多不同的来源捆绑而来的。

或者，如果快捷方式已被其他应用程序劫持，请使用溢出菜单打开搜索栏，例如Spectacle：

Answer 2

对于功能，Chrome还允许您直接跳转到功能定义。

您可以将鼠标悬停在变量上并点击链接。

或者您可以右键单击变量并选择＆＃34;显示函数定义＆＃34;。