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.
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
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.