Skip to main content

Make use of JavaScript console methods

When I say JavaScript console methods, the one and only thing that hit most of our mind is console.log() and we use it a lot and only that some might be familiar with error() and debug(). Did you ever think of checking if there are any other methods available in console other than log? Most of us don't do that, but knowing those methods might have saved lot of our development time. In this post I will show you some of the console methods which will be very useful in our day to day coding.

Log based on condition

console.assert(assertion, log_message);
To print something on the console only if the assertion failed - assertion can be any expression which returns a boolean.
Note: In chrome this log will print as an error with message saying "Assertion failed:" with the log_message passed. In FireFox its a normal log message.

Log number of occurrence 

console.count([label]);
If we want to count something, it may be a click, may be a callback, or event triggers. We don't need to create a var and increment and then log. We can simply use console.count('my_clicks') and console will do the counts for you and print the same. Wow! Nice right? But see below for another handy method which we missed.

Log time taken

console.time([label]);
//do_some_work
console.timeEnd([label]);
An easy way for developers to see how much time a logic is running. Given a label name this method will print the amount of time taken in milliseconds between the time() and timeEnd() method for that particular label.


Trace who triggered this function

console.trace();
Did you ever care to find which action is triggering a particular action or event? If yes, trace() is a wonderful console method which will give you all the levels of trace till the line where you called trace() method. This will give the file names with line numbers where the trigger came from. A big time saver right?

Do you know that you can use c like syntax in console messages?

var test = ['one','two']
console.log("This is an object %o and its length is %d", test, test.length);

List of substitutions you can use:

  • %o or %O : Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.
  • %d or %i   : Outputs an integer. Number formatting is supported, for example  console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01
  • %s : Outputs a string.
  • %f  : Outputs a floating-point value. Formatting is supported.  
If you find some other useful methods, let me know in the comments section and check the source link for some more methods, details and browser support.

Source: https://developer.mozilla.org/en-US/docs/Web/API/console

Comments

Popular posts from this blog

Git and Github useful commands

Working on a personal forked repository Most of the time when you are working in an organisation who uses git, you will be requested to fork the project and create pull for your feature or bug fixes (Most of the open source contribution in git will be happening like this).

In this note I will let you know some useful git commands which will be very helpful for you in your day to day life with git. I am not going to explain any git technical terms. I am assuming you already know about it or all those terms are linked to a proper source for more information.
Lets start. You can fork any github project by clicking the fork icon on the top right of a repository.  git clone git@github.com:<your-github-id>/Project.git - to clone your forked Project (personal repo)cd Project/ - get into your repositorygit fetch origin - will fetch all the details/indexes (branches and commits) from remote origin but will not apply.git branch - is used to check all the available branches and current work…

My First Post

After lot of thinking and research me too started a blog finally to share my knowledge :-).

Not everybody know everything but also everybody else don't know what we know. So lets share and gain knowledge with Win Win approach.