342

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.

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...
    – hugomg
    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".
    – user1833766
    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.
    – Ring
    Commented Aug 10, 2015 at 21:11

13 Answers 13

410

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.

12
  • 4
    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")
    – Steven Lu
    Commented Jan 17, 2014 at 20:07
  • 1
    add the OS X shortcut in the answer or explicitely specify what platform ctrl-shift-f is meant for
    – anddam
    Commented Jul 11, 2014 at 7:03
  • 1
    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 ) Commented Apr 13, 2015 at 7:17
  • 9
    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. Commented Nov 4, 2015 at 11:39
  • 3
    The answer seems to be outdated, nothing happens if I click that key combination in the developer console.
    – Black
    Commented May 26, 2018 at 6:42
92

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!

12
  • 3
    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"
    – Dennis C
    Commented Apr 24, 2013 at 2:48
  • 20
    I think you can do dir(myFunc) Commented Apr 24, 2013 at 6:18
  • 1
    dir(myFunc) is much better, but still need two clicks and mouse
    – Dennis C
    Commented Apr 24, 2013 at 6:29
  • 1
    Oh, you mean if you can do it completely from keyboard? Something like findDefinition(myFunc)? AFAIK that doesn't exist yet... Commented Apr 24, 2013 at 8:31
  • 2
    Oddly, clicking show function definition does nothing for me. Non-responsive.
    – Tyguy7
    Commented Jan 13, 2020 at 19:45
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.

5
  • @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.
    – jla
    Commented Feb 5, 2014 at 16:55
  • 1
    This works for finding the currently active definition of the function.
    – Patrick
    Commented Dec 8, 2014 at 20:39
  • 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
    Commented Jul 29, 2015 at 6:51
  • 1
    @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.
    – joar
    Commented Sep 24, 2015 at 14:43
  • 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?
    – Davicus
    Commented Oct 18, 2017 at 5:54
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.

8
  • 2
    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. Commented Jul 19, 2016 at 17:42
  • 1
    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. Commented Nov 4, 2016 at 19:10
  • 1
    @Randy, on which version of chrome? Which OS? I use Chrome Version 59.0.3071.115 on OS X and it works fine.
    – arthur.sw
    Commented Jul 13, 2017 at 13:57
  • 3
    @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'.
    – arthur.sw
    Commented May 26, 2018 at 15:44
  • 2
    @Protectorone, yes
    – arthur.sw
    Commented Nov 23, 2020 at 15:03
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
      
3
  • 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?
    – Tarik
    Commented Dec 19, 2015 at 7:47
  • functionName.toSource() also works on latest chrome versions. Commented Dec 29, 2015 at 15:50
  • 1
    @Tarik Look at the online documentation for the builtin stop.
    – anon
    Commented Mar 3, 2016 at 17:43
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.

10

in Chrome console:

debug(MyFunction)
MyFunction()
2
  • 1
    I like that. Noteworthy: do a undebug(MyFunction) to remove the breakpoint again (after you found the method implementation) Commented Dec 23, 2019 at 13:51
  • 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.
    – Rakesh
    Commented May 2, 2022 at 15:04
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.
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

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

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:

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.

0

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

method definition prototype

Not the answer you're looking for? Browse other questions tagged or ask your own question.