Unique way of styling console messages in developer tools
By: Sairam Potta
Tags: Unique, Typescript, Debugging, JavaScript, Console

Developer tools are used to debug the client-side Javascript application in the web browsers like Chrome, Mozilla Firefox, and internet explorer, etc., The console is used to debug any function, to display a message in the browser console.

The console is one of the powerful object in the developer tools to debug the Javascript application.

In a web browser, the console is a global scope object, that can be accessed from anywhere in the application. Developers may write an ’n’ number of console messages to debug an application. To differentiate those messages developers write extra unique information to identify easily. In this blog, I’m going to cover a few functions available in the console to debug an application in a unique way and to easily differentiate the console messages.

I believe many developers are using basic console functions like

console.log(“message”) — To display the basic console message in the browser console. console.warn(“message”) — To specify the mentioned message as a warning message, we can use “console.warn” function. It differentiates the basic console message with a warning symbol along with distinct color i.e. “yellow highlight”. console.error(“message”) — To specify the mentioned message as an error message, we can use “console.error” function. It differentiates the basic console message with an error symbol and distinct color i.e. “red”.

The above-mentioned console functions are differentiated internally with a distinct color. To differentiate our console message with a unique style. I’m providing some functions

By adding unique style for console message

To add a color for your console message, we can use “%c” as a parameter in anywhere of the line and specify your defined styles in another attribute.

console.log("%c hello world!", "color: green; font-size: 20px");

Styling the message in the console

To display normal text names in console

To check variable value is/are available or not. Many developers will prefer the below way.

var userName = "Lorem ipsum";

console.log(userName);

The output in the console mentioned below

To identify variable value in a function having multiple messages is difficult. Easy way to view the value instead of directly declaring the variable in console specify as an object like below

console.log({userName});

Plane data as an object in the console

To display the JSON object in the console

Many times response from the API is on JSON format data, to check the data Usually, we wrote console.log(jsonKey);

To understand JSON data in a readable format. We can use the table function in a console like below

var details = [

{

name: 'abc',

age: 10

},

{

name: 'cab',

age: 11

}]; console.table(details);

console.table function display the information in table format with keys as table header as like below

Table function in console

Grouping the messages in the console

If small scale applications, will write few functions and basic console messages are fine. Large applications have many functions that leads to writing more console messages, then finding particular function messages is more complex. To group the messages for easy tracking.

To implement grouping, we will write “group” and “groupEnd” functions.

To start the group will write console.group(“group name”);

To end the group will write console.groupEnd(“group name”);

Note: Open group function name and Close group function name should be same.

Syntax below shows, how to implement

console.group('person');

console.log('Name: Lorem');

console.log('Age: 12');

console.groupEnd('person');

In the above console, the group name defined as “person”. The person group contains “name” and “age” as messages. Shown in a group tree.

Grouping in console

Check how many times function executed

To count, how many times functions/Loops are executed. Usually, we will declare a count variable and will increment the count value to display in a console. Instead, we can use the count function without declaring any variable.

Syntax below shows, how to implement

console.count('message name');

internally, count function increases the count and display in the console like below

message name: <count number>

Count function

To reset the count, have a special function

console.countReset(‘message name’);

above mentioned countReset function, will reset already existing count function and start with ‘1’.

Note: count function name and countReset function name should be same.

References

For more reference, please visit the below link: