Hey blog readers! I have been creating a few different kinds of tutorials recently using examples of charts to illustrate some concepts. Today, we will have something a little different.
We will be exploring the console and how to use all of its underused interactivity. The console is the main source of testing for developers so we want you to know some of its methods that will help your programming out.
Console Methods
This section will focus on some really useful methods, past the ubiquitous console.log(). Each has its own use in programming and we will give you a text and visual representation of each.
console.table()
console.table() is a pretty useful console method that makes a grid out of your JavaScript objects. It is an easy way to make sure your objects are organized how you intended. The example below shows how console.table() works.
console.clear()
console.clear() clears your console so you can start working with a blank slate.
Tip: you can push the up arrow on your keyboard if you want to see the items in the console you clear with this method.
console.dir()
console.dir() gives a JavaScript representation of an object. It will give you the full details of anything you choose to call. It's usually used to check out the DOM structure, but you can use this to check a lot more than that. The example below shows how you can use it to gain the full JavaScript representation of a variable.
console.profile()
This gives a full-time profile of your CPU while a block of code is being executed. It is pretty useful to evaluate CPU output in depth. The example shows the execution of this method.
console.time() & console.timeEnd()
console.time() & console.timeEnd() will measure how long a piece of code takes to run. Just place console.time() at the beginning of your code block and console.timeEnd() at the end. It will give you the time it takes to execute in your console. It is very useful if you are trying to evaluate which pieces of code are slowing your pages down.
console.timeStamp()
When recording your timeline in your application, you can place console.timeStamp() within your code and the timeline will register exactly how far and long this takes place in your code.
console.count()
This can be used to count the instances of pretty much anything you define. It's best illustrated using a loop, but you can use it to see how many instances a variable or function is called in your code.
console.assert()
This method is an easy way to check if a declaration is false. Pretty straightforward, but it is a useful way to debug quickly.
Console Customization
Look & Feel
The console can be customized quite a bit to meet a lot of your technical demands. Follow along with the gif below. It will teach you how to change your console from the default light theme to dark.
console.emojis 🔥
If you get bored of normal console messages or need something to help you easily identify the console logs, you can use emojis. Check your console, there should be a message for you. Include it as a string with your console message. It makes for any easy way to identify console logs.
Conclusion
Hopefully, you learned a few things with this quick console tutorial. Take a few of these methods and use them in your next projects, I am sure there will have some sort of impact in your testing methods. There are a few more you can check out here.
These are just the ones I have personally found the most useful If you have any comments or questions leave a comment below.