347

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.

Improve this question
3
  • 3
    There is a search bar that greps the current file in the Scripts tab and you can peek at the contents of a function by printing it. But I am now curios if there is a way to do a more general search like you want... Commented Mar 22, 2012 at 19:13
  • 3
    With the Google Chrome Developer Tools, at the "Sources" Tap -> right window you have to possibility to set "Event Breakpoints". Commented Nov 18, 2012 at 15:40
  • 1
    In my case I had a variable set to an unknown function. I did myvar.toString() and it printed: "function Object() { [native code] }" which is all I needed to know. Commented Aug 10, 2015 at 21:11

13 Answers 13

Reset to default
412

Lets say we're looking for function named foo:

  1. (open Chrome dev-tools),
  2. Windows: ctrl + shift + F, or macOS: cmd + optn + F. This opens a window for searching across all scripts.
  3. check "Regular expression" checkbox,
  4. search for foo\s*=\s*function (searches for foo = function with any number of spaces between those three tokens),
  5. 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.

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

This is only one way to define a function named foo. There are others. What if our function is e.g. bar['foo']? (There's no good answer to that question, as far as I know --- it's essentially "don't write convoluted code")
add the OS X shortcut in the answer or explicitely specify what platform ctrl-shift-f is meant for
I couldn't find "function definition" using the selected answer. I have searched on Google and couldn't find any help. (Using Chrome Version 41.0.2272.118 m )
And then you fail to find function declarations, dynamically generated function expressions and anonymous (unnamed) functions. I'd rather want something like Firefox: Click the function reference in the watch panel -> Jump to the function reference.
The answer seems to be outdated, nothing happens if I click that key combination in the developer console.
|
94

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:

Chrome Dev Tools > Console > Show Function Definition

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!

Improve this answer

12 Comments

Is there a shortcut or a function which will allows to search by a function reference? like ">inspect(document.body)". For now I have to d > tmp={a:myFunc}; >tmp, followed by the "Show function definition"
I think you can do dir(myFunc)
dir(myFunc) is much better, but still need two clicks and mouse
Oh, you mean if you can do it completely from keyboard? Something like findDefinition(myFunc)? AFAIK that doesn't exist yet...
Oddly, clicking show function definition does nothing for me. Non-responsive.
|
56

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.

Improve this answer

5 Comments

@futzlarson When I do this, the source and line is printed clear to the right on the same line as the function's closing brace.
This works for finding the currently active definition of the function.
Unfortunately this no longer works, as of at least a couple months ago. Instead you just get a very unhelpful function unknownFunc(unknown) line now, with no inline code.
@aroth At least in Chrome 45, this works again. I'm aware that things changed somewhere inbetween when this was posted and now. Conclusively, it seems to work again.
This merely shows 'undefined' even though clicking the button that calls the function does stuff from some source code I can't find anywhere... is there some magical scope wizard waving his wand somewhere and how do I find him?
39

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.

Improve this answer

8 Comments

well, what this seems to do is not "go to definition" of an arbitrary function call, but "show you all the function names in the current file and let you go to them" - which is kinda useful too.
This is exactly what I was looking for, a feature similar to firefox! In firefox you can simply open the dev tools, hit Ctrl+f, and it will search for the JS function in all panes(HTML/CSS/Javascript/etc.). This does it, unlike the regex features mentioned in other answers.
@Randy, on which version of chrome? Which OS? I use Chrome Version 59.0.3071.115 on OS X and it works fine.
@Black Just to make sure: 1. Focus (click) on the source files where you want to look for the function, in the source panel of the dev tools. 2. It's the letter 'O', not the number '0'.
@Protectorone, yes
|
20

Different browsers do this differently.

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

  2. In the console, type...

    • Firefox

      functionName.toSource()

    • Chrome

      functionName
Improve this answer

3 Comments

the function I'm searching for is stop() and it is used as onmouseover="this.stop();" when I do what you say, it returns: stop() { [native code] } So what to do now?
functionName.toSource() also works on latest chrome versions.
@Tarik Look at the online documentation for the builtin stop.
20

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.

Improve this answer

Comments

10

in Chrome console:

debug(MyFunction)
MyFunction()
Improve this answer

2 Comments

I like that. Noteworthy: do a undebug(MyFunction) to remove the breakpoint again (after you found the method implementation)
On Edge Developer tool, one doesn't have to write debug. Just enter the function name on console. On the console itself it shows the function body, just click on that it takes you to the function.
6

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

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

Comments

5

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:

enter image description here

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

enter image description here

Improve this answer

Comments

2

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

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

enter image description here

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

enter image description here

Improve this answer

Comments

1

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

Chrome Debugger Function Tooltip / Datatip

Further Reading:

Improve this answer

Comments

1

In Chrome Dev Tools (F12) you could also navigate to the method source from its prototype definition:

method definition prototype

Improve this answer

Comments

0

You encounter VM defined JS function ,you can try this command in Chrome console panel below. Like this: foo function name is window.P.execute

>window.P.execute.toString()
<'function(d,h){function n(){var a=null;e?a=h:"function"===typeof h&&(p.start=w(),a=h.apply(f,wa(d,k,l)),p.end=w());if(b){H[d]=a;a=d;for(da[a]=!0;(z[a]||[]).length;)z[a].shift()();delete z[a]}p.done=!0}var k=g||this;"function"===typeof d&&(h=d,d=E);b&&(d=d?d.replace(ha,""):"__NONAME__",V.hasOwnProperty(d)&&k.error(q(", reregistered by ",q(" by ",d+" already registered",V[d]),k.attribution),d),V[d]=k.attribution);for(var l=[],m=0;m<a.length;m++)l[m]=\na[m].replace(ha,"");var p=B[d||"anon"+ ++xa]={depend:l,registered:w(),namespace:k.namespace};d&&ya.hasOwnProperty(d);c?n():ua(l,k.guardFatal(d,n),d);return{decorate:function(a){U[d]=k.guardFatal(d,a)}}}'

so we got full function code.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.