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:
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.
With the Chrome Developer Tools window open, click on the "Sources" tab. If you don't see anything you may need to click on the "Show Navigator" button in the upper-left corner of that tab. With the navigator open, navigate to the file where the cut() function is defined (in your case it's demo. html ).
Lets say we're looking for function named foo
:
foo\s*=\s*function
(searches for foo = function
with any number of spaces between those three tokens),Another variant for function definition is function\s*foo\s*\(
for function foo(
with any number of spaces between those three tokens.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With