javascriptgoogle-chromedebugginggoogle-chrome-devtoolsconsole.log

View a JavaScript method's contents in Chrome's console


Warning: This question was about a pre-2016 version of Google Chrome. As of version 126, Chromium's behavior has improved much. The screenshot below does not represent current behavior (and the solution has become obvious).


When I print an object in Chrome's console (for example using log()), I see all its properties, including methods, but I can't see the definition (contents) of each method. How can I view the definition (code) of an object's method?

I've created a fiddle that may help explain what I'm looking for. Here is a screenshot of that fiddle:

How to view a JavaScript method's contents console


Solution

  • Recommendation

    1. Find the function of interest in the Console
    2. Put the cursor on f (e) and click with your pointing device's secondary button (aka right-click)
    3. Click "Show function definition"

    The function definition is now displayed in the Sources tab.

    Alternative (toString)

    Alternatively, log the result of

    Function.prototype.toString.call(someObj.methodOne)
    /*
    function (e) {
            return 'e is ' + e;
        }
    */
    

    Last method: double-click

    A third choice is to double click on f (e), which expands the function in an edit box. I personally don't like this method because it's misleading - you can't actually make changes but typing does change the contents of the box and any other logging activity will cause you to lose focus.