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

User · Answer

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:

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

in Chrome console   debug MyFunction  MyFunction

User · Answer

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

User · Answer

2016 Update  in Chrome Version 51 0 2704 103  There is a Go to member shortcut  listed in settings  gt  shortcut  gt  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

User · Answer

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

User · Answer

You can print the function by evaluating the name of it in the console  like so   gt  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

User · Answer

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

[javascript] Find JavaScript function definition in Chrome

Examples related to javascript

Examples related to google-chrome-devtools