Day09 of #100DaysOfCode

Hii folks 🙌

Today I have completed the 9th video of JavaScript30!

Project 09: 14 Must-Know Dev Tools Tricks

Source: https://javascript30.com

Learnings:

To check what JS code is triggering something on the page

• right-click on the element and select Break on > attribute modification
• Click the element and the debugger will highlight the code that is triggered

Styling console.log

DevTools

• interpolate text with %s

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

• style text with %c

console.log('%c I am some great text', 'font-size:50px; background: red; text-shadow: 10px 10px 0 blue')

• throw warning or error

console.warn('OH NOOOO')
console.error('Shit!')

• display info

console.info('Crocodiles eat 3-4 people per year')

• Test for something (if it’s wrong it will throw an error)

const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'That is wrong!');

• clear the console

console.clear();

• view DOM elements (all the properties and methods that live on the element)

console.dir(p);

• view array of objects as a table

console.table(dogs);

• Grouping Together

dogs.forEach(dog => {
console.groupCollapsed(`${dog.name}`);
console.log(`This is ${dog.name}`);
console.log(`${dog.name} is ${dog.age} years old`);
console.log(`${dog.name} is ${dog.age * 7} dog years old`);
console.groupEnd(`${dog.name}`);
});

Today I learned (T-I-L):

• Various Dev Tools Tricks

That is all for Day09 ✅

Thanks for reading, See you tomorrow!