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 .

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?

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?

• javascript
• google-chrome
• google-chrome-devtools

• on the right corner you may see the file name and line umber – brk Commented Jun 30, 2016 at 15:40
• no, I don't see that – AbuMariam Commented Jun 30, 2016 at 15:43

2 Answers 2

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:

For functions, Chrome also lets you jump directly to the function definition.

You can either do this by hovering over the variable and clicking the link.

Or you can right-click on the variable and select "Show Function Definition".