Tricks for Using the JavaScript Console

Trick #1: Adding Text as an Argument

Result of my log in the Chrome DevTools. I can confirm that my function, fetchToys, is working as expected and it is rendering the object collection I anticipated. Everything looks good!

Trick #2: One Log to Test Them All

If only there was away to avoid all of these repetative logs…
You can add multiple arguments to a single log to cut down on repetitive code.
Pass arguments as arrays to make them easier to read in your browser console.
To inspect each element further, just click on the arrows, or disclosure triangles, to reveal more information.

Trick #3: To Log, or Not to Log…

A snapshot of the list of attributes for a div that was passed through console.dir().

Trick #4: Putting it All on the Table

In the code above, I am passing a json collection through console.table()
Above is the table with all of my json data. This allows me to quickly see the conent of my fetch request and the properties associated with the data.

--

--

--

Software Engineer, volleyball player, lover of tiny houses and all things spicy.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Fizz Buzz

Vuetify dark theme

Node.js Basics — Add Authentication to an Express App with Passport

JavaScript Destructuring

Gatsby.js — Render One or More Markdown Files

How to Write Beautiful and Meaningful README.md

JavaScript Best Practices — Destructuring

TypeScript Project Setup— Modules and Options

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alexandra Ortiz

Alexandra Ortiz

Software Engineer, volleyball player, lover of tiny houses and all things spicy.

More from Medium

JavaScript Part 2

HTML CSS Introduction

How To Create HTML Elements Using Objects In An Javascript Array

JavaScript, Version Controlling and NoSQL