KUMAR HARSH

Posted on Jun 9, 2021 • Updated on Jun 23, 2021

JavaScript-30-Day-9

#javascript #productivity #webdev #github

Developer Tools and Console Tricks

On Day-9 of JavaScript-30 we learned a lot of handy console tricks and dev tools to increase our productivity in Web Development.

Lessons Learned:

-Suppose we want to know what is causing a particular thing to happen on a site, you know it's javascript making it happen but not sure exactly which line is responsible.

There is a handy dev tool for us:

Just open the console -> find the element in DOM on which the change is happening -> right click on it -> go to break on -> select attribute modifications

Next time when you click on the element, it's going to pop a debugger command in. It's a break point for us and it will pause exactly at the line of code that is causing the attribute.
(remove the break point from the same place).

Now we'll see some handy console tricks:

Regular

console.log("Hello");

This is our regular console.log() which simply outputs on the console.

Interpolated

console.log("Hello I am a %s string", "💩");

It interpolates whatever we have passed into the second one into our first message.

Styled

console.log("%c I am some great text", "font-size:20px;background:red;");

We can style our text with %c and apply any font-css.

warning!

console.warn("OH NOOOO!");

It displays a warning on the console as well as the stack trace as to where the warning came from.

Error:

console.error("Oh Shit!");

It displays a error message in the console along with the stack trace as to where it was generated.

Info

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

In firefox it displays with a small 'i' icon.

Testing

console.assert(1 === 2, "That is Wrong!");

Assert is fired only if something is false. So using assert we can test for something and if it is false it will throw an error.

clearing

console.clear();

It clears everything on the console.

Viewing DOM Elements

const p = document.querySelector("p");
console.log(p);

Using console.log(p) actual element is displayed.

console.dir(p);

But using console.dir(p) displays all the properties and methods associated with that element.

Grouping together

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

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`);
});

This is how the normal output is like:

Now using grouping

dogs.forEach((dog) => {
  //console.group(`${dog.name}`);
  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}`);
});

We can either use console.group() or console.groupCollapsed(), the collapsed displays output where the output groups are collapsed by default.

counting

console.count("Harsh");
console.count("Harsh");
console.count("Harsh");
console.count("Harsh");
console.count("Harsh");

It counts how many times we have used a specific word, or number, or object , or DOM node etc.

timing

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