In this post I will share a real example of the use of the JavaScript console API beyond the traditional console.log( ) since it has an API that provides a number of methods that make debugging easier.
On Base22 we developed a set of assets, called xWidget Assets or just xWidget.
As an introduction, Base22 xWidget is set of beautiful, flexible, and easy to use templates for formatting the dynamic content that comes out of portal platforms and content management systems. Designed from the ground up to be dynamic, multilingual, and highly configurable directly by authors – xWidget can be deployed in any kind of environment and has been tested for user in IBM WebSphere Portal (versions 5, 6, 7, and 8) and SharePoint (2010, 2013).
In the developing process of the new version of the xWidget we wanted to make the debugging experience more easy and more useful, so, we incorporated the next list of methods that are part of the console API:
console.error(object [, object, …])
The console.error() method takes one or more objects and prints them to the console. This method is similar to console.log() however console.error() will also print a stack trace from where the method was called. The output will also be flagged as an error in the console.
console.groupCollapsed(object[, object, …])
The console.groupCollapsed() method is essentially the same as console.group() except that the group is initially displayed collapsed rather than open in the console.
console.info(object [, object, …])
The console.info() method functions in the same way as console.log() with the exception that log messages are given the info flag. This can be handy as the developer tools console has a feature that allows you to filter log messages using flags.
console.warn(object [, object, …])
The console.warn() method will log a message to the console with a warning flag.
Altogether:
Now, all the debug information is more easy to read and at the same time is more easy to identify potential problems thanks to the new way of we display all that info.
Note: In order to support old browsers like IE 7, we added a polyfill in the code to support the use of the console object.
Similar posts:
Reference
I really hope you find this information useful.
Recently on Base22 we started to evaluate Electron:
