Find JavaScript function definition in Chrome

Javascript Problem Overview

Chrome's Developer Tools rock, but one thing they don't seem to have (that I could find) is a way to find a JavaScript function's definition. This would be super handy for me because I'm working on a site that includes many external JS files. Sure grep solves this but in the browser would be much better. I mean, the browser has to know this, so why not expose it? What I expected was something like:

Select 'Inspect Element' from page, which highlights the line in the Elements tab
Right-click the line and select 'Go to function definition'
Correct script is loaded in the Scripts tab and it jumps to the function definition

First off, does this functionality exist and I'm just missing it?

And if it doesn't, I'm guessing this would come from WebKit, but couldn't find anything for Developer Tool feature requests or WebKit's Bugzilla.

Javascript Solutions

Solution 1 - Javascript

Lets say we're looking for function named foo:

(open Chrome dev-tools),
Windows: ctrl + shift + F, or macOS: cmd + optn + F. This opens a window for searching across all scripts.
check "Regular expression" checkbox,
search for foo\s*=\s*function (searches for foo = function with any number of spaces between those three tokens),
press on a returned result.

Another variant for function definition is function\s*foo\s*\( for function foo( with any number of spaces between those three tokens.

Solution 2 - Javascript

This landed in Chrome on 2012-08-26 Not sure about the exact version, I noticed it in Chrome 24.

A screenshot is worth a million words:

I am inspecting an object with methods in the Console. Clicking on the "Show function definition" takes me to the place in the source code where the function is defined. Or I can just hover over the function () { word to see function body in a tooltip. You can easily inspect the whole prototype chain like this! CDT definitely rock!!!

Hope you all find it helpful!

Solution 3 - Javascript

You can print the function by evaluating the name of it in the console, like so

> unknownFunc
function unknownFunc(unknown) {
    alert('unknown seems to be ' + unknown);
}

this won't work for built-in functions, they will only display [native code] instead of the source code.

EDIT: this implies that the function has been defined within the current scope.

Solution 4 - Javascript

2016 Update: in Chrome Version 51.0.2704.103

There is a Go to member shortcut (listed in settings > shortcut > Text Editor). Open the file containing your function (in the sources panel of the DevTools) and press:

> ctrl + shift + O

or in OS X: > ⌘ + shift + O

This enables to list and reach members of the current file.

Solution 5 - Javascript

Another way to navigate to the location of a function definition would be to break in debugger somewhere you can access the function and enter the functions fully qualified name in the console. This will print the function definition in the console and give a link which on click opens the script location where the function is defined.

Solution 6 - Javascript

Different browsers do this differently.

First open console window by right clicking on the page and selecting "Inspect Element", or by hitting F12.

In the console, type...

Firefox
```
  functionName.toSource()
```
Chrome
```
  functionName
```

Solution 7 - Javascript

in Chrome console:

debug(MyFunction)
MyFunction()

Solution 8 - Javascript

I find the quickest way to locate a global function is simply:

Select Sources tab.
In the Watch pane click + and type window
Your global function references are listed first, alphabetically.
Right-click the function you are interested in.
In the popup menu select Show function definition.
The source code pane switches to that function definition.

Solution 9 - Javascript

In Google chrome, Inspect element tool you can view any Javascript function definition.

Click on the Sources tab. Then select the index page. Search for the function.

Select the function then Right-click on the function and select "Evaluate selected text in console."

Solution 10 - Javascript

I had a similar problem finding the source of an object's method. The object name was myTree and its method was load. I put a breakpoint on the line that the method was called. By reloading the page, the execution stopped at that point. Then on the DevTools console, I typed the object along with the method name, i.e. myTree.load and hit Enter. The definition of the method was printed on the console:

Also, by right click on the definition, you can go to its definition in the source code:

Solution 11 - Javascript

If you are already debugging, you can hover over the function and the tooltip will allow you to navigate directly to the function definition:

Further Reading:

Chrome DevTools > JavaScript Debugging Reference

Content Type	Original Author	Original Content on Stackoverflow
Question	Ryan DuVal	View Question on Stackoverflow
Solution 1 - Javascript	plesiv	View Answer on Stackoverflow
Solution 2 - Javascript	Dmitry Pashkevich	View Answer on Stackoverflow
Solution 3 - Javascript	joar	View Answer on Stackoverflow
Solution 4 - Javascript	arthur.sw	View Answer on Stackoverflow
Solution 5 - Javascript	Răzvan Flavius Panda	View Answer on Stackoverflow
Solution 6 - Javascript	Deepak Dixit	View Answer on Stackoverflow
Solution 7 - Javascript	Igor Krupitsky	View Answer on Stackoverflow
Solution 8 - Javascript	Chris Robinson	View Answer on Stackoverflow
Solution 9 - Javascript	subhro	View Answer on Stackoverflow
Solution 10 - Javascript	Abdollah	View Answer on Stackoverflow
Solution 11 - Javascript	KyleMit	View Answer on Stackoverflow