Everyone. Console.log works for everyone. Back in my for loops post, I said I would explain why I said to use console.log(), instead of alert(), and here it is!

If you’re like me, you got started on JavaScript to add some… flair to your otherwise static websites.

I got started on JavaScript in order to manipulate websites through a content management system. (Full disclosure: it was actually jQuery. Don’t judge me.)

If you’re someone who only wants to use JavaScript to say, add another list item where the CMS doesn’t already have one, or keep a certain list item from directing to the sitemap (I linked it to the homepage instead), jQuery can work wonders.

So with this in mind, console.log was a complete mystery to me. After all, it didn’t actually do anything, did it? I mean, on Codecademy it shows up in that one console-looking part of the screen, but I tried it on a website and it didn’t do anything.

You can even see me here on Twitter, asking the question, “just what exactly is this thing good for anyway?”

Hahaha, wasn’t I cute?

Yes, it is true that console.log doesn’t put anything on the page. What I didn’t realize though was how powerful it can be for debugging. (Yes, it’s true, I do have to debug my code.)

If you think back to my for loops post, I used console.log through the loop to expose the multiplier variable. (If you can’t quite remember the code, you can see it here on JSFiddle.)

If you don’t remember, or haven’t tried it, go ahead and open up that link above in a new tab, and open up dev tools. (Right click on the screen, and look for ‘Inspect Element’ in that menu.)

Navigate over to the console. (In the menu, on the right, there should be a ‘console’ option.)

Now go ahead and run the function, and watch what happens….

Pretty cool, huh?! It doesn’t just show you the variable, it actually exposes the value of that variable. That can be pretty useful if you have an object and you aren’t sure what it contains, or like our example, your variable value changes. This becomes especially handy in server-side JavaScript when you can’t access certain objects, varibles, and arrays through the browser console. Wrap it in a console.log, and you’ll be able to see what exactly is going on in your trusty terminal.

There are loads of good uses for console.log, this is just one example. I hope it helps you understand why you might want to use something like this while developing. Just because it doesn’t appear to do anything to your site doesn’t mean it’s without value.

And if you just love console.log now, check out this other blog post, by Devin Clark. He is a super knowledgeable guy, and you should definitely read his blog.

His console.log post details a lot of other cool things you can do with console.log in Google Dev tools. Definitely check it out!

Questions? Tweet me!