Introducing Dir

While learning JavaScript I learned about console.log(). In the course of using JS I used the quit often.  It's a great debugging tool for doing thing like seeing exactly what a function or variable is returning or even as a build tool to see what a fetch request returns.  I've even used it to see what order my code runs in when using asynchronous code.

Recently I learned about a different version of this, console.dir(). Here is what the official docs have to say about it:

The Console method dir() displays an interactive list of the properties of the specified JavaScript object. The output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.

You can read more from the official docs here.

 This is something I hadn't seen before through my entire time in school nor in any of the tutorials I found online.  I'm sure there is some reason I am unaware of that no one seems to use it, however, since learning of it I find it useful.  Maybe not so much as a debugger but as a teaching tool.

Here is an example output:

Three things that jumped out at me right away as handy in teaching code is that this lists any arguments (in this example there are no arguments so we get null), constructors and scopes.

Now granted, I've only been building small projects.  Maybe this is something that is used more in larger projects with thousands of lines of code.  I know I will be using it often along side console.log().