🛠 DevTools & Console

DevTools and the console might feel light exercises or less important, but they're actually super important for debugging and real-world development.

🛠 DevTools & Console Highlights:

• console.log(), console.warn(), console.error(), console.info for messaging

• console.table() — super helpful for visualizing arrays/objects

• console.group() and console.groupCollapsed() — useful for organizing logs

• console.time() / console.timeEnd() for performance checks

• console.assert() — throws only when a condition is false

• console.clear — clears the console

These little tools can save you hours of debugging when you're working on bigger projects.

messaging:

console.log('hello');
console.warn("OH NOO!");
console.error('shot!');
console.info('We are born with only 2 natural fears: the fear of falling and the fear of loud sounds');

Visualizing array/objects:

const dogs = [
{ name: "Snickers", age: 2 },
{ name: "Hugo", age: 8 },
{ name: "Butchi", age: 4 },
];
console.table(dogs)


Organizing logs:

const dogs = [
{ name: "Snickers", age: 2 },
{ name: "Hugo", age: 8 },
{ name: "Butchi", age: 4 },
];
dogs.forEach(dog => {
console.group(${dog.name})
console.log(This is ${dog.name})
console.log(${dog.name} is ${dog.age} years old)
console.groupEnd(${dog.name})
});


Time:

console.time('fetching data');
fetch('https://api.github.com/users/obada-barakat')
.then(data => data.json())
.then(data => {
console.timeEnd('fetching data');
console.log(data)
})

.assert:

console.assert(1 === 2, 'That is wrong!');


clear the console:
console.clear()

You can check out all of these examples in my GitHub: Ubba's repo for more info.

These tools are super important and helpful, there are absolutely more tools, a quick search in MDN or any other platform would give more information.

Thanks for reading!