Things you can do with your Browser developer console

There are so many things you can do with your browser's developer console here are five important ones. Note that the exact of way of doing these things may vary from browser to browser but it's the same idea. For this article i have adopted "the google chrome way";

1. View and edit CSS temporarily (using the styles panel in the elements tab)

2. check what JavaScript causing a change to an element.Find the element in question, in the Elements tab. Right-click and go to 'Break on...'. Select 'attribute modifications'

3. Debug JavaScript
   There is a debug panel in the sources tab where you can pause the application at different points, And view the variable states at that point.

4. Check the flow of request and response in the network tab
   It is very helpful to see the exact detailed request and response data while debugging.

5. Check your console(using the console panel) and log things into the console.

a. Regular
console.log()
Prints out to the console.

console.log( "hello my friends")

b. Interpolated
console.log('Hello I am a %s string', )
Behaves like the printf() function of the C language.

console.log("hello my %s", "friends")

c. Styled
console.log('%c some text...', )
It lets us style the first argument using css with '%c'

console.log("%chello my friends", "font-size:50px")

e. Warning
console.warn()
Prints out to the console with a yellow exclamation icon before it.

console.warn("your are dead")

f. Error
console.error()
Prints out to the console with a red X icon before it.

console.error("i fond anera!")

g. Testing
console.assert(, )
If is false, will be output to the console.

console.assert(2===2,"wrong") 
console.assert(2===3,"wrong") 

h. Viewing DOM elements
console.log()
Prints out the to the console along with its attributes and content.

console.dir()
Prints out a drop-down list of properties and methods in .

let p=document.getElementById("result")
console.log(p) 
console.dir(p) 

i. Groups
console.group()
console.groupEnd()
Prints out a drop-down which groups a set of console.logs together. must be the same to start and end the drop-down list.
console.groupCollapsed()
By default, the drop-down will be printed out uncollapsed, use the method above than console.group to change this behaviour.

console.group("wow"); 
console.log("start"); 
console.log("middle"); 
console.log("finish"); 
console.groupEnd("wow");

console.groupCollapsed("wow"); 
console.log("start"); 
console.log("middle"); 
console.log("finish"); 
console.groupEnd("wow");

j. Counting
console.count()
Appends the number of times has been printed out.

console.count("niza"); 
console.count("anna"); 
console.count("niza"); 
console.count("anna");

k. Timing
console.time()
console.timeEnd()
Prints out how much time passed between time and timeEnd. must be the same.

console.time("cat"); 
fetch('https://catfact.ninja/fact')
.then((response) => response.json()  
.then((data) => console.log(data)); 
console.timeEnd("cat");

l. Table
console.table()
Prints out a table of the objects' properties and values.

let journal = [  
{events: "work", time: "6:00 AM"},  
{events: "ice cream", time: "4:30 PM"}, 
{events: "beer", time: "6:00 PM"} 
]; 
console.table(journal);

m. Clearing
console.clear();
Clears the console.