# JavaScript-30-Day-9

##<center> Developer Tools and Console Tricks </center>

[demo](https://cenacrharsh.github.io/JS-30-DAY-9/)

![ss](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387884537/IejeWjR_W.png)

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387886866/tZNot0t0h.png)

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
```javascript
console.log("Hello");
```

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

![regular](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387889788/RS4XjEG8M.png)

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

![interpolation](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387892151/CX6qjUlzjy.png)

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

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

![styled](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387894081/CrsyEczYOm.png)

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

##warning!
```javascript
console.warn("OH NOOOO!");
```

![warning](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387896155/7u4Zx91tn4.png)

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

##Error:
```javascript
console.error("Oh Shit!");
```

![error](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387898281/VsBOiXE87g.png)

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

##Info
```javascript
console.info("Crocodiles eat 3-4 people per year");
```

![info](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387900350/kWiR-LxLYg.png)

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

##Testing
```javascript
console.assert(1 === 2, "That is Wrong!");
```

![assert](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387902352/7UCMU8JDy.png)

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
```javascript
console.clear();
```

![clear](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387904573/zafjBMfuS.png)

It clears everything on the console.

##Viewing DOM Elements
```javascript
const p = document.querySelector("p");
console.log(p);
```
Using `console.log(p)` actual element is displayed.

![p](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387906431/elQCwwc47.png)

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

![dir](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387908530/KVZ2DIfRd.png)

##Grouping together
```javascript
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:
![without collapse](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387910713/734NLXUwQ.png)

Now using grouping
```javascript
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.

![grouped](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387912907/qkC_xu00wz.png)

##counting
```javascript
console.count("Harsh");
console.count("Harsh");
console.count("Harsh");
console.count("Harsh");
console.count("Harsh");
```
![counts](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387914920/KQnFQaL-Y.png)

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

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

!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
```javascript
console.table(dogs);
```
It displays an array object in the form of a table.

![table](https://cdn.hashnode.com/res/hashnode/image/upload/v1624387917000/E1wVvGbZ4.png)

and with this our project for the day was completed.

GitHub repo:
{% github cenacrharsh/JS-30-DAY-9 no-readme %}

###Blog on Day-8 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-8-4lhj %}

###Blog on Day-7 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-7-dd9 %}

###Blog on Day-6 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-6-103k %}

[Follow me on Twitter](https://twitter.com/cenacr007_harsh)
[Follow me on Linkedin](https://www.linkedin.com/in/kumarharsh22/)

**DEV Profile**

{% user cenacr007_harsh %}

You can also do the challenge at [javascript30](https://javascript30.com/)

Thanks @wesbos , [WesBos](https://github.com/wesbos) to share this with us! 😊💖

**Please comment and let me know your views**
##Thank You!