I am new to the DOM and I am console logging things so I can see what my code is doing to my website without implementing it right away.

I have read the documentation about console.log and console.dir

I am confused because I am using VS code and sometimes my console.log() behaves as a console.dir() when I am looking at the chrome console.

This is frustrating me because to check if an attribute I am creating is working as I want it to, I have to scroll down all the properties to find the one I want.

For an example, if I am logging a variable xyz that is a div with a class of test.

input --> console.log(xyz)

output --> div.test

the output has a drop down with all the possible properties of div... many of them null. If I scroll down to className it says test so I know it worked correctly

How do I get it so it shows

This would make everything I do much faster

It does this sometimes but if I refresh it reverts back to that JSON like tree