DEV Community

Omar Dulaimi
Omar Dulaimi

Posted on

Logging navigable trees in Javascript

To produce navigable trees from any Javascript object, use ๐—ฐ๐—ผ๐—ป๐˜€๐—ผ๐—น๐—ฒ.๐—ฑ๐—ถ๐—ฟ. You will get an interactive list of all object properties.

One nice thing about this method is that it can handle DOM elements too. So instead of getting the original HTML elements, you get a JSON representation of the object, as you can see in the snap below how different the document object looks with ๐—ฐ๐—ผ๐—ป๐˜€๐—ผ๐—น๐—ฒ.๐—ฑ๐—ถ๐—ฟ as opposed to ๐—ฐ๐—ผ๐—ป๐˜€๐—ผ๐—น๐—ฒ.๐—น๐—ผ๐—ด.

It takes a second object parameter with these options:
1- ๐—ฑ๐—ฒ๐—ฝ๐˜๐—ต => set it to null if you want to cover all levels recursively.
2- ๐—ฐ๐—ผ๐—น๐—ผ๐—ฟ๐˜€
3- ๐˜€๐—ต๐—ผ๐˜„๐—›๐—ถ๐—ฑ๐—ฑ๐—ฒ๐—ป => shows non-enumerable keys and Symbols.

If you have an XML/HTML element, then use ๐—ฐ๐—ผ๐—ป๐˜€๐—ผ๐—น๐—ฒ.๐—ฑ๐—ถ๐—ฟ๐˜…๐—บ๐—น instead.

Note that you could also use ๐—ฑ๐—ถ๐—ฟ and ๐—ฑ๐—ถ๐—ฟ๐˜…๐—บ๐—น directly without the need for the ๐—ฐ๐—ผ๐—ป๐˜€๐—ผ๐—น๐—ฒ object.

Follow for more tips :)

console.dir

Top comments (0)