How to Display Data as Table in Browser Console

Console is a browser built-in tool that logs errors that happens on the website. If there are any errors – such as broken links, incomplete JavaScript functions, or unknown CSS properties – the browsers will show error messages within the Console. On top of that, we can also interact with the Console through the shell and the Console API, which comes in useful when testing certain functions and data output. Here, we will show you one handy tip for Console API use.

Accessing the Browser Console

In Chrome, we can select View > Developer > JavaScript Console menu to bring up the Console. Alternatively, we can also use the shortcut key: Cmd + Option + J on OS X, and Ctrl + Shift + J on Windows. Shown below is an error-free Chrome Console. From here, we can start using the command provided in Console API.

Interacting with the Console

We can interact with the browser Console through the Console itself and by adding JavaScript within the document. As an example, here we tell the Console to output "Good Morning!" by typing console.log() command directly in the Console: As mentioned, we can also apply the console.log() within the document. One practical console.log() use is to test a JavaScript conditional statement. We can see more clearly if the result returns true [...]