JavaScript 30- Day 9 Study Notes

https://javascript30.com/

Day 9 of JavaScript 30 by Wes Bos covered several developer tools available in the console. It offered a quick run-down of tips and tricks. Of course, I have used console.log before and I was somewhat familiar with using the inspection tools. But I hadn’t used much else, and to be honest, I didn’t know about the F12 shortcut before this lesson.

Bos used a simple array of objects named “dogs”.

const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

We worked exclusively in the developer tools console as opposed to seeing changes in the viewport.

Interpolation

Using “%s” allows a variable to be inserted within a string.

console.log('hello I am a %s string!', '*');

The console will show “hello I am a * string!” We can use a template literal to insert a variable.

Warning

console.warn('OH NO!');

This will display a warning message on the console.

Error

console.error('CRAP!');

This will display an error message.

Information

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

This will display an information message.

Testing

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

If the initial input is true, nothing will display. If false, “That is wrong” will display in the console.

Clearing the console

console.clear();

This was neat. I had previously used the drop-down menu to do this.

Viewing DOM elements

const p = document.querySelector('p');
console.log(p);//displays p element
console.dir(p); //displays directory of properties

Grouping

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

This will display each object in the array with a drop-down menu of its elements.

Counting

console.count('Wes');

Counts the number of appearances of ‘Wes”.

Timing

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

This will display the amount of time to fetch data.

Table

console.table(dogs);

This will display the array as a table.

So Day 9 was not really a coding project but a short and concise crash course in using the console.

View more of my study notes:

JavaScript 30- Day 8 Study Notes

JavaScript 30–01 Drum Kit