Think beyond console.log()

While working with javascript we often use this popular method console.log(). During debugging when we need some insight about the happenings we use console.log(). There are a lot more methods to debug your code alternative to console.log(). These alternative console.log() methods are useful in data visualization, debugging etc.,

Alternative to console.log():

1.console.table()

This console.table() method is useful when we want to get a visual form of a group of objects that can be represented in a tabular form. It takes one mandatory argument data, which must be an array or an object, and one additional optional parameter columns. For example let us take 2 employee details and see in console.log() and console.table() methods

Using console.log():
const employee = [{id:101, name:'Anna'},
                    {id:102,name:'Tom'}];
console.log(employee);
Using console.table();
const employee = [{id:101, name:'Anna'},
                    {id:102,name:'Tom'}];
console.table(employee);

2.console.assert()

This console.assert() is great for debugging process. It takes an assertion and writes an error message when the assertion is false. If it is true nothing happens. Mainly used while debugging code. For example lets check whether a number is even and throw an error message if it is not.

const isEven = n => n % 2 === 0;
for (let i = 0; i < 3; i++) 
{
    console.assert(isEven(i), '%s is not even!', i);
}

3.console.count()

console.count() is used to count the number of times the line has been called.

for (let i = 0; i < 3; i++){
    console.count();
}

4.console.trace()

console.trace() helps you output the current stack trace at the location where you call it from. This helps in displaying a trace that show how the code ended up at a certain point.

function a() {
  b();
}

function b() {
  c();
}

function c() {
  console.trace();
}
a();

5.console.error()

console.error() is the second most popular method. It displays the error message.

console.error('This is an error message');

6.console.dir()

This method console.dir() will display the interactive view of the objects we want to log.

const employee ={
    name: 'Anna',
    age:'22',
    id:'101'
}
console.dir(employee);

7.console.warn()

console.warn() displays the warn message in yellow color.

console.warn('This is a warning message');

8.console.time()

console.time() is used to measure how long a particular operation in a program takes. This starts a timer you can use to track the time of a particular operation

console.time();

for (let i = 0; i < 100; i++) {
  // some code
}
console.timeEnd();

9.console.group()

console.group adds a level of indentation to any methods that comes after it. console.groupEnd() resets the indentation to the level it was before.

console.group('group 1');
for (let i = 0; i < 3; i++) {
    console.log(i);
}
console.groupEnd('group 1');

console.group('group 2');
for (let i = 0; i < 3; i++) {
    console.log(i);
}
console.groupEnd('group 2');

How to determine the active HTML Element in Google Chrome

Active HTML Element : When the user clicks on a control such as Button, label or Textbox, then then focus is set on this control. For example, if the user has clicked on a button. Then the active HTML Element is the Button.

The active HTML Element can be determined by typing the command document.activeElement in the console after selecting the control of interest. Please see below image as an example.

How to jump in to the code in JavaScript sources from console

Let us see how to jump into the code in JavaScript sources from console by following the steps below

  1. Get the control instance in the console window ==> var control_instance = $($0)
  2. call the method name of the instance without the paranthesis. ==> control_instance.method
  3. It will print out the lines of code from the method ‘method’ of control_instance class.
  4. now double click on those lines of code. It will take us to the corresponding javascript file/code in the Sources tab of chrome developer ( Please see below picture )