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()orconsole.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); }); !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); It displays an array object in the form of a 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