Table of Contents
Hello Console
If you’re a web developer, chances are that you to open the developer tools in the browser at least once a day. But when thinking of leveraging all the features of the dev tools in our workflow, then most of us fail to do it. Because either we’re not aware of it or we’re not able to break free from our existing workflow.
To fix this up, today I am planning to walk you through the process of unleashing the full potential of dev tools and embracing it in your daily work routines. So, try out all these impeccable features of the javascript console and have them ready at your disposal.
Note: The console has a long history as like the browsers, so each browser implemented it little differently. Although the browser wars have been fought and ended, the console area still maintains small differences between each browser. I am writing this guide based on Google Chrome, I followed the console web API. So everything should be available and work in your favourite browser as well. But be prepared to see a little different implementation for the same functions.
Assertion
You may be well aware that you can log information to the console but you can do assertions like below. Imagine how useful it can be when checking through type errors and mismatches. You can assert something as below,
If you run the above code in your browser, you’ll receive an assertion result like in the screenshot below.
The assertion was failed because the type of this.user is actually undefined.
Clear
Have you ever bombarded with the number of messages being logged into the console? You’ll actually lose what you’ve written into the console because of getting dumped with too many messages. To fix this, you can always clear the console before writing important things on your code using the console.clear(). For example,
The above code will create the following output in which you can notice the message in the console was cleared which indicates that your console was cleared before writing the user data into the console.
Count
Imagine a scenario, in which you may want to know how many times a function is getting called in your code, Usually, we would do it by ourself. But thats not the optimal way, you can use the console.count() function to check the how many times a given line in your code is being executed. Similarly, you can also pass an argument to the console.count(“name”) to give a name for that count variable. So when you’re counting multiple things you could easily differentiate them.
You might have noticed that we’re passing different names to the count function in multiple places as an identifier and it will create an output like the following,
Dir
Dir means displaying an interactive list. When you log something but forgot to open the console before logging, You’ll see the object get logged but you won’t be able to closely interact with it like expanding the properties or viewing them. Console.dir fixes this by always creating an interactive list in the console whether it’s open or not.
Note: I checked this in chrome but chrome got smart enough, that it works same for console.log and console.dir. The only noticeable difference between the log and dir is how it displays the HTML element in the console. You can see it for yourself.
console.log output
console.dir output
console.dir can be used to view the DOM tree in the console.
Error
This one is more suitable for library and framework developers to let know of the consumers who use their library of any errors/problems.
This console.error function will print a red alert along with a stack trace of the error in the console like below, this will grab the developer’s attention in case if anything goes wrong.
There are similar but less obtrusive functions are available such as console.info and console.warn.
console.warn is almost identical to console.error except it will show a warning triangle at the beginning of the message.
Try console.info by yourself and see if that helps.
Related: Tips To Optimize Angular Application To Increase The Website Speed
Group, GroupCollapsed and GroupEnd
Here comes my favorite one, When creating multiple log entries you may think that it would be handy if we can able to group the similar things as a collapsible/expandable list. Exactly, That’s what console.group will do for us, it will let you create a group by calling console.group() with the name of the group as an argument. Once you finished, use the console.groupEnd() to end the current grouping. You can also nest the grouping and groupEnd is smart enough to end the right group.
Console.group will group the entries but will keep it open, but console.groupCollapsed will group the entries and keep the group collapsed by default. This will come in handy when you have a lot of log statements in your code and you want to organize or simplify them.
Table
We used to log objects and array as elements, but what if we can see it in a tabular view as key and values as rows. It would be even easier to visualize your object this way. Give it a try like below.
The above will give you a beautiful table of the array in the console like below, use this on a nested object array and trust me, you’ll be amazed by the result.
Time And TimeEnd
We’ve been seeing things related to debugging and logging, what about performance benchmarking? on that case, we can use the profiling tool, but what if you want to test the number of times a single loop or a function takes to finish the execution? Be my guest, you have a solution for that too! console.time() is what you need to use.
We can use time and timeEnd function to measure the time taken by a block of code to execute you could note this on the below screen. One step ahead, we can also give a name to the time() function as an argument to identify which block took this time. have a close look at the below output.
This will help you to optimize your code to a micro level for the better performance.
Trace
When debugging issues in development a little trace of the call stack will be always helpful, in PHP world we have excellent tools like Xdebug. But in JS you don’t actually need any tools to get better debugging, everything is built within your console. Try console.trace() within a function and you can see the complete stack trace of that function.
and the stack trace will look like below,
Console Settings
Do you know that you can tweak some settings on your console to make it display only on the certain type of logs? Yes, you can do some more things like that.
Hide Network:
Hides any network related errors from the console like 404, slow network and other network messages
Log XMLHttpRequest:
If you enable this all your XMLHttp(Ajax) calls will be logged in the console.
Preserve log:
I keep this one always on, You may know that refreshing the browser or navigating to a different page will erase the console log as well. By enabling this preserve log, you can actually able to preserve the console logs and data even if you refresh multiple times. The only way you can clear the logs is by using the clear button in your console. This could be handy for you while debugging load and network errors.
Show Timestamps:
This will add a timestamp on each log message written into the console.
Selected context only:
There is a thing called context for the console from which the console will act upon, basically, it’s like __top, Iframe, or any plugin context. Choosing this option will hide all the message from the contexts other than the selected one. The context itself is a very big topic which I choose to skip in this post but you can read more about it here.
Autocomplete from History:
This will give you nice autocompletion from the things you’ve typed into the console. Remember, it is not the intellisence that you get from an IDE like Webstorm. It’s just a simple autocomplete which is prepared from your previously typed commands.
Also Read: 10 Useful Command Line Tools For Developers
The developer tools have evolved a lot in the recent times. If you’re still using firebug (I know some, who does) quit using it and start using your browser’s dev tools. We’ve barely touched the water here, there is a lot more to dive and search for, there are better ways to debug than putting console.log everywhere in your code. We’ll see about those things in the future. We respect your opinions so do post us your valuable feedback’s in the comments.
Liked it? Similarly find more informative blogs on our largest blog repository, Stay updated with latest topics & tricks and don’t forget to subscribe us to get the latest updates from diverse technologies. Besides all, Post us your valuable thoughts in the comment section.
For any queries reach us via info@agiratech.com.
