JavaScript30 - Day 9 (Dev Tool Cardio)

This is day 9 in my #javascript30 journey. This is the free course from Wes Bos that lets you brush up on your JavaScript skills via 30 projects.

Yesterday we created a fun rainbow inspired sketchpad using the HTML5 Canvas. You can keep track of all the projects we're building here.

Today we're learning the very click-baity 14 Must know Dev tools tricks.


Day 9 - 14 Must know Dev Tools Tricks

There won't be a project file that goes along with this blog instead it will be forever used as a Dev Tool Cheat Sheet.

Let's get into it.

1. Find the JavaScript running on an element

Sometimes you need to find the JavaScript that is modifying an element but you're not sure where to look.

You can inspect the element in the dev tools and then select Break on... > attribute modifications

2. Console.log

This logs something to the console. Simple. Powerful. You got this.

3. Interpolate

This is where instead of logging a straight variable or string you log two strings and the console will interpolate the second one in place of a %s that is within the first string.

e.g.

console.log('Hello, I am a %s string!', 'GREAT')  

Result in the console:

Hello, I am a GREAT string!  

Note; this isn't as useful now that we have ES6 backticks that allow us to enter variables directly into strings.

4. Styled Console Logging

You can style the console log with any styles associated with the font. To do this do %c at the beginning of the message and then the second argument that you pass to the console will be interpolated as the styling.

e.g.

console.log('%cI am some large text', 'font-size:50px; color:red')  

Result in the console:

Styled Console

5. Warnings in the Console

By using console.warn you not only send the text to the console but you also get a direct link to the location on the document.

e.g.

console.warn('Oh no an error occurred at this location')  

Result in the console:

Warning in the console

6. Errors in the Console

You can send errors directly to the console much like console.warn.

e.g.

console.error('Oh no an error occurred at this location')  

Result in the console:

Error in the console

7. Information in the Console

console.info operates much like warning and error.

e.g.

console.info('This is some information')  

Result in the console:

console.info in the console

Note: this is a screenshot from FireFox not Chrome as it wasn't displaying in Chrome

8. Using console.assert for Testing

This will only log if something the assertion is wrong.

e.g.

console.assert(1 === 2, "No it doesn't!")  

Result in the console:

console.assert in the console

9. Clearing the Console

Sometimes there are too many things in the console. You don't need that clutter in your life. Marie Kondo that shit.

Note: All developers stuck with debugging will hate you for this.

e.g.

console.clear()  

Result in the console:

Clear the console

10. Viewing DOM Elements

If you want to view the class list that is available on a specific DOM element you can select the element and then run console.dir to view these as a drop down.

e.g.

const p = document.querySelector('p')  
console.dir(p)  

Result in the console:

View the DOM elements in the console

11. Grouping Together

To group a whole bunch of console outputs together you wrap them in a console.group(name) and console.groupEnd(name) hug. If you want the default of the groups to be collapsed you can swap console.group(name) for 'console.groupCollapsed(name)`.

e.g.
console.warn Result in the console:

Grouping results in the console

12. Counting Instances

Do you need to count a certain number of anything you can use console.count()

e.g.

console.error('Oh no an error occurred at this location')  
Result in the console:

Count the instances

13. Timing

Do you need to time how long a process take? Wrap it in a console.time() & console.timeEnd() hug.
e.g.
console.info Result in the console:

Time this

14. Log a table

console.table() gives you an easy to read table of an array in your console.

e.g.

console.table(dogs)  

Result in the console:

Console.table


There weren't any cool projects to show today so this is where we finish up. You can keep track of the JavaScript 30 notes here.