GridTips: How to Display Data as Table in Browser Console

sexta-feira, 15 de agosto de 2014

How to Display Data as Table in Browser Console

Console is a browser built-in apparatus that logs errors that happens on a website. If there are any errors – such as damaged links, deficient JavaScript functions, or different CSS properties – a browsers will uncover blunder messages within a Console.

On tip of that, we can also correlate with a Console by a bombard and a Console API, that comes in useful when contrast certain functions and information output. Here, we will uncover we one accessible tip for Console API use.

Recommended Reading: HTML Table Building – 30+ Beautiful Examples And Useful Javascripts

Accessing a Browser Console

In Chrome, we can name View Developer JavaScript Console menu to move adult a Console. Alternatively, we can also use a by-pass key: Cmd + Option + J on OS X, and Ctrl + Shift + J on Windows.

Shown next is an error-free Chrome Console.

From here, we can start regulating a authority supposing in Console API.

Interacting with a Console

We can correlate with a browser Console by a Console itself and by adding JavaScript within a document. As an example, here we tell a Console to outlay “Good Morning!” by typing console.log() authority directly in a Console:

As mentioned, we can also request a console.log() within a document. One unsentimental console.log() use is to exam a JavaScript redeeming statement. We can see some-more clearly if a outcome earnings true or false with a assistance of console.log().

Below is one example:


var a = 1;
if(a == 1) 
	console.log('true');
 else 
	console.log('false');

The formula above will lapse true, given a a non-static contains a series 1. In a Console we should see a browser outlay a calm true.

Output Data as a Table

Sometimes, we would be traffic with an Array of information or a list of Objects, as shown below:


var information = [
	 name: "Andi", age: "21", city: "Tuban" ,
	 name: "Ani", age: "25", city: "Trenggalek" ,
	 name: "Adi", age: "30", city: "Kediri" 
];
console.table(data);

This information will be tough to review when we use a console.log() method. The console.log() process will uncover a Array in collapsible tree view, as shown below.

When we are traffic with such an Array, regulating console.table() is a improved approach to outlay it. This process will uncover information in a list format. Taking a same information as above, it will ouput as:

Conclusion

The browser Console helps web developers hoop errors in websites. We can also use it to exam information output, like with a console.log() method. When we have an array information console.table()command would come in some-more useful, as it shows a Array in a list format that is easy to read. Do take note that t a console.log()is usually germane in Webkit-based browsers such as Chrome, Safari, and a latest chronicle of Opera.