Find JavaScript function definition in Chrome

Question

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.

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, Mar 22 '12 at 19:13
With the Google Chrome Developer Tools, at the "Sources" Tap -> right window you have to possibility to set "Event Breakpoints". — , Nov 18 '12 at 15:40
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, Aug 10 '15 at 21:11

score 405 · Accepted Answer · edited Oct 17 '17 at 01:43

405

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.

edited Oct 17 '17 at 01:43

Colin

1,987
3
17
21

answered Jun 06 '12 at 10:21

plesiv

6,935
3
26
34

2

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 Jan 17 '14 at 20:07
add the OS X shortcut in the answer or explicitely specify what platform ctrl-shift-f is meant for – anddam Jul 11 '14 at 07:03
@zplesivcak I don't know to what platforms ctrl + shift + F applies – anddam Jul 14 '14 at 11:29
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 ) – Web_Developer Apr 13 '15 at 07:17
8

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. – Fagner Brack Nov 04 '15 at 11:39
In Chrome 46.0.2490.86 m under Windows 10 I had to double-escape the special characters in the regex, e.g., **`foo\\s*=\\s*function`** – Fuhrmanator Nov 14 '15 at 22:02
@FagnerBrack There's no perfect solution that I'm aware of, and Chrome now has functionality like that too, but the reference has to exist in scope when you're searching for it for that trick to work. I think this regex handles the situations you mentioned (except anonymous functions, which.. I mean, just search for "function" if you want to see them): `^(?=.*foo)(?=.*function).*$` Also, the answer above is technically a perfect answer to the question, with some bonus info thrown in. – Jason Newell Jun 03 '16 at 20:53
Note the regex above won't find arrow functions assigned to a variable like `var foo = () => (...)`, but that should be pretty rare. @StevenLu This is pedantic, but I believe the function is not __named__ foo in your second example. It's assigned to the foo property on bar. – Jason Newell Jun 03 '16 at 21:03
This doesn't work as the function is either not defined that way or is not coming up in search, as just searching for the function name shows only 1/1 result which is only in the HTML tag onclick call (no matter where or how I search from). I'm not sure how to find this function's definition without scouring every included .js file, which I thought were already included in this kind of search. – Davicus Oct 18 '17 at 05:44
3

The answer seems to be outdated, nothing happens if I click that key combination in the developer console. – Black May 26 '18 at 06:42
Correct @Black, nothing happens, it is an old answer and Chrome moved on. – Vivek Shukla Mar 12 '20 at 18:22
Re the outdated comments above: I'm using the latest version of Chromium and CTRL + SHIFT + F still does work – Spikatrix Jul 23 '20 at 08:30

score 92 · Answer 2 · edited Jan 11 '20 at 19:39

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:

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!

edited Jan 11 '20 at 19:39

KyleMit

30,350
66
462
664

answered Jan 16 '13 at 11:04

Dmitry Pashkevich

13,431
9
55
73

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 Apr 24 '13 at 02:48
20

I think you can do `dir(myFunc)` – Dmitry Pashkevich Apr 24 '13 at 06:18
1

dir(myFunc) is much better, but still need two clicks and mouse – Dennis C Apr 24 '13 at 06:29
1

Oh, you mean if you can do it completely from keyboard? Something like `findDefinition(myFunc)`? AFAIK that doesn't exist yet... – Dmitry Pashkevich Apr 24 '13 at 08:31
If you don't have an object containing the function, you can create an object around it and it will still work. E.g. in the console type: `({1:somefunction})`, then right click the function inside the printed object. – Protector one Jul 05 '13 at 13:24
@Protectorone you can just type dir(someFunction) into the console – Dmitry Pashkevich Jul 05 '13 at 15:09
@DP Yes, but that will just show the definition, not take you to where it is actually defined. The latter is more useful, because you can live edit it. – Protector one Jul 06 '13 at 19:07
@Protectorone no, `console.dir()` always prints its argument as on object with properties so you can right-click on it and select "Show function definition" – Dmitry Pashkevich Jul 07 '13 at 09:49
There's no object in my case, all I have is HTML: `onclick=some_function(weird)`. The only search result no matter what I try just shows the HTML tag, though the function is doing... something... and isn't a pre-defined JavaScript function. – Davicus Oct 18 '17 at 05:51
You should be able to inspect the element, then go to DOM Listeners in the right panel and find the click handler there. You can also use the Visual Event Chrome extension to make searching for the right handler faster. – Dmitry Pashkevich Oct 18 '17 at 15:35
2

Oddly, clicking show function definition does nothing for me. Non-responsive. – Tyguy7 Jan 13 '20 at 19:45
I wonder if that function got garbage-collected by the time you're trying to inspect it – Dmitry Pashkevich Jan 13 '20 at 23:07

joar · Answer 3 · 2015-06-10T09:47:16.900

54

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.

edited Jun 10 '15 at 09:47

answered Mar 22 '12 at 19:14

joar

15,077
1
29
54

@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 Feb 05 '14 at 16:55
1

This works for finding the currently active definition of the function. – Patrick Dec 08 '14 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 Jul 29 '15 at 06: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 Sep 24 '15 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 Oct 18 '17 at 05:54

arthur.sw · Answer 4 · 2018-05-26T20:07:25.417

38

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.

edited May 26 '18 at 20:07

answered Jul 10 '16 at 15:52

arthur.sw

11,052
9
47
104

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. – Scott Weaver Jul 19 '16 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. – javaBean007 Nov 04 '16 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 Jul 13 '17 at 13:57
@arthur.sw Sorry, I did not realise you had to be in sources for this to work. I expected it to work in the console as well. – Randy Jul 13 '17 at 14:08
For me a chrome menu opens if I press that key combination in the dev console. – Black May 26 '18 at 06:44
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 May 26 '18 at 15:44
Is it the case that the "go to member" functionality only searches through sources that are currently opened in a Dev Tools tab? I just searched a function that couldn't be found, but after opening the source in which it is defined (using the evaluate, mouse-click method…), it was able to find it. – Protector one Nov 23 '20 at 12:29
2

@Protectorone, yes – arthur.sw Nov 23 '20 at 15:03

Răzvan Flavius Panda · Answer 5 · 2018-05-28T23:21:31.180

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.

edited May 28 '18 at 23:21

answered Dec 04 '13 at 13:09

Răzvan Flavius Panda

21,730
17
111
169

score 18 · Answer 6 · edited Mar 03 '16 at 18:13

18

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
```

edited Mar 03 '16 at 18:13

Nic

6,211
10
46
69

answered Nov 20 '15 at 06:07

Deepak Dixit

1,510
15
24

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 Dec 19 '15 at 07:47
`functionName.toSource()` also works on latest chrome versions. – Sourav Ghosh Dec 29 '15 at 15:50
1

@Tarik Look at the online documentation for the builtin `stop`. – Nic Mar 03 '16 at 17:43

score 9 · Answer 7 · answered Dec 07 '18 at 15:24

9

in Chrome console:

debug(MyFunction)
MyFunction()

answered Dec 07 '18 at 15:24

Igor Krupitsky

787
6
9

1

I like that. Noteworthy: do a `undebug(MyFunction)` to remove the breakpoint again (after you found the method implementation) – Andreas Dolk Dec 23 '19 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 May 02 '22 at 15:04

score 6 · Answer 8 · answered Dec 25 '17 at 13:01

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.

score 3 · Answer 9 · answered May 05 '20 at 15:36

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:

score 2 · Answer 10 · answered Aug 26 '19 at 04:41

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."

KyleMit · Answer 11 · 2020-01-11T19:42:22.920

0

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

edited Jan 11 '20 at 19:42

answered Jan 11 '20 at 19:27

KyleMit

30,350
66
462
664

score 0 · Answer 12 · answered Jun 13 '22 at 01:33

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.

score 0 · Answer 13 · answered Aug 17 '23 at 11:24

0

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

answered Aug 17 '23 at 11:24

Lucho Rabuffetti

34
3

Find JavaScript function definition in Chrome

13 Answers13

Linked

Related