Launch the DevTools while on any webpage by either left clicking and selecting “inspect”, using a keyboard shortcut Command+Option+C (Mac) / Control+Shift+C (Windows, Linux, Chrome OS) or simply selecting “Developer Tools” from the “More Tools” option of Chrome’s settings. From there the DevTools window should pop up. From the main nav bar select the option “console” to open the console REPL.
Now there are quite a few built in methods that come with Console. The most useful of these when debugging your code is going to be console.log(). This prints the console whatever the evaluation of its block. For example:
console.log('hello world') will return simple
=> hello world. Where as something like
console.log(32-10) will return
Another equally as useful tool is
console.dir(). This prints a JSON representation of the object passed it. So in the example after selecting the h2 from the DOM, by then using
console.dir(), this prints to the the object which you can then uncollapse and inspect the object.
Another useful Console method is
console.group(). This takes a label which will then log everything after it to this ‘group’ until
console.groupEnd() is called. This is helpful for logging multiple values that are all associated with each other. For example if you were to log all of the attributes of a specific object.
A useful console method that help to evaluate website performance is
console.time(). This starts a timer that will run until the code hits a
console.timeEnd(). So if you were looking to test something like script load times by placing one at the beginning of your code and then an timeEnd at the end you’d be able to evaluate how long it took Chrome to load your script file.
console.trace() which will print out a stack trace.
These are quite a few other Console function that come with the DevTools which are absolutely worth looking more into and playing around with until you’re able to understand them. All of them will only continue to help you write better and cleaner code.
There are many, many, MANY things you can do within the Console and these just scratch the surface. And Console is just ONE of the amazing tools that come with DevTools. Just really quickly I’ll talk about two of my other favorite features within DevTools that don’t deal with the Console.
The first one being the Mobile Simulation. By clicking the small icon in the top left of the DevTools window that looks like an phone/tablet, DevTools then pairs down your website into what would be rendered with the selected device. This allows you to really see how your CSS and JS need to behave when pushed to a smaller aspect ratio than a laptop or PC.
My second favorite feature is seeing how your DOM content loads. Within the DevTools by clicking the Network tab and then within Network Settings you can choose ‘Show Overview’ and ‘Capture Screenshots’. This will give you a step by step representation of how your DOM loads and may point you in the direction of how to fix a pesky Unable To Load Content error, or any number of errors that deal with order of load.
These are just a SMALL sample of the powerful tools that come with DevTools and I invite you to go out and explore the Powerrrrrrr!!
: Chrome DevTools (https://developers.google.com/web/tools/chrome-devtools)