Search code examples
javascriptgoogle-chromedebugginggoogle-chrome-devtoolsconsole.log

View a Javascript method's contents in Chrome console


When I console.log an object in Chrome, I see all properties and a method name, but I can't see the contents of the method itself. How can I view the contents of an object's method?

I've created a JSFiddle that may help explain what I'm looking for.

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.