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 :)