Chrome Developer Tools - How to find the source where variables shown in the console are defined

Question

In the console of Chrome Developer Tools we are able to view all the variables and functions that are in scope for a given page, like shown in this screenshot which shows a function called "buildIssInitObject" defined on our favorite shopping site http://grab.by/RbjQ.

But what is not shown is where this function or variable is defined. Usually a page loads many source files, so how to see in which of these a given function or variable displayed in the console has been defined?

Answer 1

You can find all references, including the declaration, by searching in the Sources tab using the shortcut Ctrl+Shift+F (Window) or Cmd+Opt+F (Mac). Click on the result to open the file.

Note: The file that the function definition exists in is not necessarily the original file created during development. In this case, the code is bundled from many different sources.

Alternatively, use the overflow menu to open the Search bar if the shortcut has been hijacked by another application, such as Spectacle: