Day 5: 14 Must Know Dev Tools Tricks

April 20th, 2018

This was a much needed vacation from the last challenge. This went back to the basics of JavaScript, and I knocked it out in the time it takes for the tutorial video to finish. I actually adapted my last technique of watching the video simultaneously as I worked, but without looking at the video at all. I listened to what he said and followed along on my own.

Here is the code:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Console Tricks!</title>
</head>
<body>

<p onClick=”makeGreen()”>×BREAK×DOWN×</p>

<script>
const dogs = [{ name: ‘Snickers’, age: 2 }, { name: ‘hugo’, age: 8 }];

function makeGreen() {
const p = document.querySelector(‘p’);
p.style.color = ‘#BADA55′;
p.style.fontSize = ’50px’;
}

// Regular
console.log(‘hello’);

// Interpolated
console.log(‘Hello I am a %s string!’);

// Styled
console.log(‘%c I am some great text’, ‘font-size:50px; background: red; text-shadow: 10px 10px0 blue’);

// warning!
console.warn(‘OH NOOO’);

// Error 😐
console.error(‘Shit!’);

// Info
console.info(‘Crocodiles eat 3-4 people per year’);

// Testing
console.assert(1 === 1; ‘That is wrong!’);

// clearing
console.clear();

// Viewing DOM Elements
console.log(p);
console.dir(p);

// Grouping together
dogs.forEach(dog => {
console.group(”);
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)’);

// counting
console.count(‘was’);
console.count(‘was’);
console.count(‘was’);
console.count(‘was’);
console.count(‘was’);

// timing
console.time(‘fetching data’);
fetch(”)
.then(data => data.jsom())
.then(data => (
console.timeEnd(‘fetching data’);
console.log(data);
));

</script>
</body>
</html>

There’s nothing to look at on the site however, because this is clearly one that exists on the console.