DEV Community

Cover image for JavaScript-30-Day-9
KUMAR HARSH
KUMAR HARSH

Posted on • Edited on

JavaScript-30-Day-9

Developer Tools and Console Tricks

demo

ss

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

attribute

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");
Enter fullscreen mode Exit fullscreen mode

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

regular

Interpolated

console.log("Hello I am a %s string", "๐Ÿ’ฉ");
Enter fullscreen mode Exit fullscreen mode

interpolation

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;");
Enter fullscreen mode Exit fullscreen mode

styled

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

warning!

console.warn("OH NOOOO!");
Enter fullscreen mode Exit fullscreen mode

warning

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!");
Enter fullscreen mode Exit fullscreen mode

error

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");
Enter fullscreen mode Exit fullscreen mode

info

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

Testing

console.assert(1 === 2, "That is Wrong!");
Enter fullscreen mode Exit fullscreen mode

assert

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();
Enter fullscreen mode Exit fullscreen mode

clear

It clears everything on the console.

Viewing DOM Elements

const p = document.querySelector("p");
console.log(p);
Enter fullscreen mode Exit fullscreen mode

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

p

console.dir(p);
Enter fullscreen mode Exit fullscreen mode

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

dir

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`);
});
Enter fullscreen mode Exit fullscreen mode

This is how the normal output is like:
without collapse

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}`);
});
Enter fullscreen mode Exit fullscreen mode

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

grouped

counting

console.count("Harsh");
console.count("Harsh");
console.count("Harsh");
console.count("Harsh");
console.count("Harsh");
Enter fullscreen mode Exit fullscreen mode

counts

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);
  });
Enter fullscreen mode Exit fullscreen mode

!timing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3tz6gy97yiy1rmtcnq4.png)

If we want to track how long a particular task takes we can start a timer.

table

console.table(dogs);
Enter fullscreen mode Exit fullscreen mode

It displays an array object in the form of a table.

table

and with this our project for the day was completed.

GitHub repo:

Blog on Day-8 of javascript30

Blog on Day-7 of javascript30

Blog on Day-6 of javascript30

Follow me on Twitter
Follow me on Linkedin

DEV Profile

You can also do the challenge at javascript30

Thanks @wesbos , WesBos to share this with us! ๐Ÿ˜Š๐Ÿ’–

Please comment and let me know your views

Thank You!

Top comments (8)

Collapse
 
rash123 profile image
RASHMI VERMA

Great๐Ÿ‘

Collapse
 
cenacr007_harsh profile image
KUMAR HARSH

Thanks.

Collapse
 
kritebh profile image
Kritebh Lagan Bibhakar

Kudos for consistency ๐Ÿ‘

Collapse
 
cenacr007_harsh profile image
KUMAR HARSH

Thanks.

Collapse
 
rohitk570 profile image
ROHIT KUMAR • Edited

Awesome๐Ÿ‘Œ๐Ÿ‘Œ๐Ÿ‘Œ

Collapse
 
cenacr007_harsh profile image
KUMAR HARSH

Thanks.

Collapse
 
someshium profile image
someshium

Thanks for letting us know the challenge. Nice blog ๐Ÿ‘

Collapse
 
cenacr007_harsh profile image
KUMAR HARSH

Glad you liked it.