Equivalent of Python's dir in Javascript

Question

when I write Python code from the interpreter I can type dir() to have a list of names defined in the current scope. How can achieve to have the same information, programmatically, when I develop Javascript code from a browser using an interactive console like firebug, chrome console, etc?

Estevez

I asked a similar question here for the classic JScript. – Oospore

Answer 1

There is keys method in Object, for example:

Object.keys(object)

But this return object's own properties and methods only.
To list all properties and methods of an object I know 2 possibilities:

1. console.dir(object) method in firebug console for Firefox and
2. dir(object) method in Google Chrome development tools.

Namecalling

If you're in Javascript "inspect" in a browser, run the command console.log( Object.keys(window)); and it shows all the variables just like python's dir() in REPL – Moon

Answer 2

This may work for you, if you need a simple solution:

function dir(object) {
    stuff = [];
    for (s in object) {
        stuff.push(s);
    }
    stuff.sort();
    return stuff;
}

Bikales

Answer 3

There are a couple of functions which do just this in the code for ChatZilla, you'll have to check the licence properly to see if you can just rip them out and use them wherever.

The relevant functions can be found at http://hg.mozilla.org/chatzilla/file/59b46c0bf716/js/lib/utils.js#l136 dumpObject and dumpObjectTree

Imprest

Answer 4

There are a couple of functions that you you can use to get the data that you need.

Object.keys()

This function will return all enumerable, owned properties that are not Symbols.

> let person = {name: 'John Doe', age: 25, [Symbol('Test')] : 'value'}
> Object.keys(person);
['name'] // Note that the Symbol('Test') is not in the returned array!

Object.getOwnPropertyNames()

This function will return all properties that both enumerable and non-enumerable which are not Symbols.

> Object.getOwnPropertyNames(Set)
[ 'length', 'name', 'prototype' ]

Why is this function useful when we have Object.keys()?

> Object.keys(Set)
[] // Because keys doesn't give you non-enumerable properies

As an aside, why doesn't Object.getOwnPropertyNames(Set) doesn't give you the methods on Set like add, has, etc., ? Because they are on Set.prototype. Object.getOwnPropertyNames(Set.prototype) will yield a much better result.

Object.getOwnPropertySymbols()

This will return all the owned properties that are Symbols in the Object you pass it to.

> let person = {x: 10, Symbol('Test'): 'Test-value' };
> Object.getOwnPropertySymbols(person);
[Symbol(Test)]

Reflect.ownKeys()

This will return all the owned properties that are strings/Symbols in the object you pass it to.

> let person = {x: 1, [Symbol('Test')]: 'Test-value'};
> Reflect.ownKeys(person);
[ 'x', Symbol(Test) ]

Bonus:

Object.getPrototypeOf()

This will return the Prototype of the Object that is passed to it.

> let nameable = { name: 'name' };
> let ageable = Object.create(nameable);
> ageable.age = 0;
> let person = Object.create(ageable);
> let proto_of_person = Object.getPrototypeOf(person);
> proto_of_person === ageable;
true
> let proto_of_ageable = Object.getPrototypeOf(proto_of_person);
> proto_of_ageable === nameable
true

Using this we can enumerate all the properties of an object and its prototype chain recursively.

Stylistic

Answer 5

The Google Chrome developer tools console has a predefined dir: https://developers.google.com/chrome-developer-tools/docs/console

Firebug has console.dir: http://getfirebug.com/logging

Arian

Answer 6

The global variables are kept in an easily accessible object (window) and so you can inspect/iterate over them easily. (Using something like the functions suggested by Glenjamin)

On the other hand, I don't know of any way to inspect local variables defined in functions or closures - if this is possible I'd at least guess it would be highly browser/console specific.

Brookweed

Answer 7

well you can see object contains like its own properties only : By it can work in any console not only google chrome web browser look for the img enter image description here console.dir(obj); here link: https://developers.google.com/web/tools/chrome-devtools/console/console-reference

Frenzied

Answer 8

(just to see that list)

you can use the operator ".", for example:

> var a = "asdfg";
> a. // -> show the list

• in the chrome console it will show you the list of options for autocompletion
• in node.js console you can do the same and press tab twice to see the list

Shovel

Answer 9

The Real Solution

First, create a function that lists out all the properties of an object:

function dir(object) {
    props = [];
    for (prop in object) {
        props.push(prop);
    }
    props.sort();
    return props;
}

Then, as easy as it is, call the function like console.log(dir(console))

Okie