Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Display data as table in browser console
Browser’s in-built tool “Console” is basically a log file keeps all errors record of websites opened using the particular browser. Browser displays error messages in case of network issue, JavaScript and CSS code functions and properties issues, security errors, etc… with the help of Console. This tool can be accessible through the shell and the Console API that are useful in terms of testing data, functions and properties.
Here, we will show you how to access and use the Console API,
The Browser Console API
In the Google Chrome web browser, go to the Customize and Control Google Chrome Tools Developer Tools / JavaScript Console menu to open Google Chrome Console or press “Cmd + Option + J” on OSX and “Ctrl + Shift + J” on Windows for the keyboard.
Given below figure shows the Google Chrome Developer Tools Console,
We can use the browser Console by adding JavaScript command on that. For example, here we will type console.log () command on console to output “Good Evening”.
We can use console.log() Scommand within the document. Let’s see how to use console.log() command to test JavaScript conditional statement and the resultant will be True or False.
From the above code, the resultant will be true. Although, the variable A contains the value 10, the Console will return the text true.
Output Data as a Table in browser console
Sometimes, we would be dealing with an Array of data or a list of Objects, as shown below,
Difficult to read the data using console.log() method. The console.log() method will display the Array in the console tree, as shown in the figure below,
The above Array method with console.table() is a good way to present output in a table format. For that, just take all above data, the output will display like the given below figure,
Conclusion
The browser’s in-built tool is very much helpful for developers to handle errors comes with websites, also helpful to test data output in the table with the help of console.log() and console.table() array command. Table displays Array that is easy to read. The console.table()command is only valid in Webkit-based browsers, such as; Chrome, Safari, etc…
1K+ Views
