Day09 of #100DaysOfCode

Hii folks 🙌

Today I have completed the 9th video of JavaScript30!

Project 09: 14 Must-Know Dev Tools Tricks

Source: https://javascript30.com

Learnings:

To check what JS code is triggering something on the page

  • right-click on the element and select Break on > attribute modification
  • Click the element and the debugger will highlight the code that is triggered

Styling console.log

DevTools
  • interpolate text with %s
console.log('Hello I am a %s string!', '💩')
  • style text with %c
console.log('%c I am some great text', 'font-size:50px; background: red; text-shadow: 10px 10px 0 blue')
  • throw warning or error
console.warn('OH NOOOO')
console.error('Shit!')
  • display info
console.info('Crocodiles eat 3-4 people per year')
  • Test for something (if it’s wrong it will throw an error)
const p = document.querySelector('p');
console.assert(p.classList.contains('ouch'), 'That is wrong!');
  • clear the console
console.clear();
  • view DOM elements (all the properties and methods that live on the element)
console.dir(p);
  • view array of objects as a table
console.table(dogs);
  • Grouping Together
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`);console.groupEnd(`${dog.name}`);});

Today I learned (T-I-L):

  • Various Dev Tools Tricks

That is all for Day09 ✅

Thanks for reading, See you tomorrow!

--

--

--

https://www.linkedin.com/in/itskushagra

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Most Simple State Management Solution for Angular

Docker and React App

Why you should learn React.js?

Simple Random Number Generator with React

How to Make Angular SEO Friendly Website with Angular Universal?

Components, Props & Destructing

The Magic of Serializing Functions

Disqus Lazy Loading with jQuery to optimize SEO — an easy approach

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kushagra Kesav

Kushagra Kesav

https://www.linkedin.com/in/itskushagra

More from Medium

Day03 of #100DaysOfCode

CREATING THE GAME OF X AND O

Make your webpage look awesome with images — How to add images in HTML

Web Development — Front-end, Back-end or Full Stack???