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.

Answer 1

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.