Table of Contents
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.