Exploring Dev Tools - Using Console

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.

Console

Lets start with the console

console.log

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";

console.log(name);

Info

To just print off some information. It's similar to log but will show an info symbol.

console.info("oh info only here");

Warn

We also have a warn

console.warn("Getting a warning");

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

Errors

We have two ways to show an error.

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

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

Time

I find the time functions in the console are really useful

console.time();


console.timeEnd();

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.

Table

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.

console.table(arrayname)

Colours

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!');

Clear

To clear the console of all messages just run.

console.clear();

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