DEV Community 👩‍💻👨‍💻

Cover image for Things you can do with your Browser developer console
Ebenezer Enietan (Niza)
Ebenezer Enietan (Niza)

Posted on

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

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

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

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

console.warn("your are dead")
Enter fullscreen mode Exit fullscreen mode

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

console.error("i fond anera!")
Enter fullscreen mode Exit fullscreen mode

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

console.assert(2===2,"wrong") 
console.assert(2===3,"wrong") 
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

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

Top comments (3)

Collapse
 
tdaw profile image
TD

I didn't know about console.count() and console.dir(); thank you for this informative post!

Collapse
 
jotacib3 profile image
Juan Jose Lopez Martinez

Very cool

Collapse
 
nnekajenny profile image
Jennifer Eze

This is a perfect write up here.

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. 👀

Join the Hackathon <-