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

Question

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:

Printing

Not sure why this was changed with the most recent update. I teach programming and relied heavily on looking at fn definitions in the console. Now I have to do it in the Sources tab which then makes jumping back to the invocation difficult. – Firstly

Answer 1

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.

Jungly

Answer 2

Remember that function is just syntactic sugar for the Function object. Because of this Object's toString() is inherited.

So, to answer your question:

console.log(someObj.methodOne.toString()).

Zachery

Answer 3

All interesting, but in this case where I assign a labeled function to a function

let fnc = function () { console.log("called");}
fnc.intrn = function (val) {console.log("called : ", val); }

you can call it as it works and is there

>fnc.intrn("yup")
called :  yup

but if you type fnc in the console you only see.

>fnc
ƒ () { console.log("called");}

but of course if you type "func." a list pops up of all the stuff it has like prototype, constructor, bind, call, caller, length, name, intrn, etc.

while toString just shows the code of the function

>fnc.toString()
"function () { console.log("called");}"

I guess you could override toString (or make another function) to show what you want as well or instead. Far right in the output of Chrome's console you see VM##:1 and can click it alas it's the same as typing toString()

Now if you put a breakpoint (on line 1 in this case) and call the function fnc() then it stops execution on the VM##:1 source (Not listed in Source Files Tabs ~ Network, Overrides, Filesystem, Snippets). [The right click "Show function definition" trick is better without a console log reference like this (thanks for that).]

But then you can see it first under Scope and 'script' (in this case 'fnc') while of course most of the other entities are parented under __proto__ and prototype has the constructor.

There you can also see double square brackets holding FunctionLocation and Scopes, which is itself in Script and the global which seems to be the Local Scope of 'this' aka Window.

Which are not to be mistaken with the Proto's FunctionLocation = unknown nor the Scope which has 'no properties', as I suppose one can say that that is Monadal.

Okay so you can get there, in two or three roundabout ways but it's not obvious or particularly good in my opinion. Maybe a custom show hidden function object parameters function can be added to 'object' prototype but it's not critical and I'd be looking for a programmatic solution as well at that point?

Okay so that's when you can use Object's getOwnPropertyNames like this on the function with a hidden function (or what-have-you) etc. attached.

>Object.getOwnPropertyNames(fnc)
(6) ["length", "name", "arguments", "caller", "prototype", "intrn"]

Zandrazandt

Answer 4

Chromium has improved much since you asked this, but in case someone would still wonder, there are plenty of ways (which I am listing with credits to Paul S.).

The lazy way: hover

Just place the cursor on f (e), and watch a tooltip appear.

The less lazy way: [[FunctionLocation]]

1. Expand the property
2. Click on the value (blue link) of the [[FunctionLocation]] pseudo-property (which Chromium now adds in gray as of version 126):
   

Show function definition

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. Select "Show function definition".

The function definition is now displayed in the Sources tab.

Double-click

A third choice is to double click on f (e), which expands the function in an edit box.

Statement

Alternatively, just execute a statement with the property's path. In this case:

someObj.methodOne

Achates