Simple JavaScript Dev Tools I Wish I Had Discovered Earlier…

If you’ve come across any sort of “Intro to JavaScript” reading material, then you probably learned console.log(). A JavaScript code newbie would know that this dev tool prints to the console whatever the user input is inside console.log(). However, there are many other dev tools to use in JavaScript that require elementary understanding, and I’ll walk through so examples. You can follow along by typing inside your console (right click then select inspect from the dropdown).

console.warn('Oh no…')
//similar to console.log() this will print ‘Oh no…’, but instead it will print as a warning message to the console. Warning messages still allow for proper execution, but can be used to communicate that a more efficient or cleaner alternative is available.

console.error('Oh no!')
//’Oh no!’ will be printed as an error message to the console. This tool can be used in programs to display to the user should an error occur.

console.clear()
//This will clear the console!

As for our last example, let’s say we have the following array:
const cats = [{ name: ‘Lucy’, age: 2 }, { name: ‘Stevie’, age: 8 }];

cats.forEach(cat => {
console.groupCollapsed( ` ${cat.name}`)
console.log( ` This is ${cat.name} `);
console.log( `${cat.name} is ${cat.age} years old`);
console.groupEnd($`{cat.name}`);
})

//In the console the data will be organized by name, due to console.groupCollapsed(`${cat.name}`), and when the name is clicked on in the console, the subsequent console.log messages will be revealed. console.groupEnd() then exits the current inline group in the console.

Resources:

https://courses.wesbos.com/account/access/5d2f5c1a85f96c03c1e4ec95/view/194129876
https://developer.mozilla.org/en-US/docs/Web/API/Console/groupEnd

Leave a Reply

Your email address will not be published. Required fields are marked *