Dev Tools are a section in the browsers that are there to help us debug and fix issues on our sites. This is the first of a series of posts on dev tools. Instead of doing it as just 1 big posts I'm going to break it down into an on going series of some of the features that make our work better and our bug hunting easier.


Lets start with the console


We all know and use the log

console.log("Sonic Boom");

It's handy and allows us to see where we are, it can even show us the value in a field

var name = "Serversncode";



To just print off some information. It's similar to log but will show an info symbol."oh info only here");


We also have a warn

console.warn("Getting a warning");

console.warn will show a warning in our dev tools.


We have two ways to show an error.

console.error("This is an error");

console.exception("This is an expection");


I find the time functions in the console are really useful



console.time will start our timer. When we have our function finished we use console.timeEnd(); to stop the timer and show the time used by the function.

It's really useful for performance checking.


This is one I don't use enough because I keep forgetting it's there.

With console you can display a table of an array. This makes it easier to see what is in the array your working with.



Yes you can change the font size and colour of the console messages.

console.log('%c%s', 'color: blue; font-size: 18px; font-weight: bold','Works!');


To clear the console of all messages just run.


This is really handy when you want to see just what is going on with your code.