Browser Console

When working on ServiceNow portal widgets, etc, it can be useful to write out information to the browser’s console log.

You can display the browser console by pressing F12 but, as you’ll notice, the console is a bit noisy. Writing information to the console is useful, but it can be difficult to spot the exact information you’re looking for.

There are a number of console commands, but in this article we’ll only focus on the log action and how that can be used to simplify debugging a service portal widget in ServiceNow.

In javascript, all that’s needed to write to the log is…

console.log('this is important information')

But try finding that in your log when the log extends for a few pages.

There are a couple of tricks to simplify this, one is to add a dash of color.

console.log('%cthis is important information','color:red')

You can even add different colors to highlight different pieces of information by adding multiple styling breaks.

var thisObject = {'name':'John Smith', 'address':'123 Eagle St', 'company':'JDS Australia', 'occupation':'ServiceNow consultant'}

for (var thisField in thisObject){
console.log('%c' + thisField + ' = %c' + thisObject[thisField], 'color:green', 'color:red');
}

As you can see, it’s very easy to find the debugging information we’re looking for, but there’s one other tip that might come in handy and that’s using the console filter.

At the top of the console log there’s a filter that can allow you to isolate exactly what you’re looking for, allowing you to remove all the noise.

If we add a unique preface to all our log statements, we can then filter on that to see only the information that’s important to us. In this example, we’ll use a double colon (highlighted in yellow in the image below).

console.log('%c::this is important information','color:red');
var thisObject = {'name':'John Smith', 'address':'123 Eagle St', 'company':'JDS Australia', 'occupation':'ServiceNow consultant'}

for (var thisField in thisObject){
console.log('%c::' + thisField + ' = %c' + thisObject[thisField],'color:green','color:red');
}

The console log is a useful way of streamlining portal development so use it to the fullest by filtering and/or coloring your inputs so you can debug your widgets with ease.