JavaScript - Log to Console (console.log vs. frameworks)

Javascript Log To Console

Developers need to know what their code is doing while it’s running JavaScript, whether in the browser or the NodeJS environment. Such information can help verify code, find bugs, or measure performance. Printing data via the console is the most basic way to do that.

In this article, we’ll discuss logging to the browser console using the console.log() method and logging using popular frameworks and libraries.

Basic: Logging to the Browser Console Using console.log()

On the client side or in the browser, you can use console.log() to log any data within JavaScript.

Using console.log() in Javascript or the Browser

Hit the F12 key to open the browser console. Make sure the “Console” tab is selected, then you can copy and paste these examples directly into the console command line:

console.log( 'foo' ); // string
console.log( 'foo value: ', 100 ); // string with some value
console.log( 'foo', 'bar', 'baz' ); // multiple strings
console.log( { name: "Simon", id: 5 } ); // object
console.log( [ 1, 2, 3 ], [ 'a', 'b', 'c' ] ); // multiple arrays
console.log( new Date() ); // date

An Example Using String Substitution

You can also use string substitution, which is especially useful with code loops.

var contacts = [
{ name: 'Simon', id: 5, age: 25 },
{ name: 'Ben', id: 7, age: 54 },
{ name: 'Lisa', id: 9, age: 32 }
];
for (var i=0; i 

Which will output:

Name: Simon, Age: 25.
Name: Ben, Age: 54.
Name: Lisa, Age: 32.

Intermediate: Other Useful Console Logging Functions

There are a few other methods similar to console.log(), but all of their visual outputs differ slightly:

console.info() and console.warn()

console.info("Here is some informative text to just let you know what's up.");
console.warn("You didn't do something terrible, but maybe you want to double check?");

NodeJS Tip: When considering these methods, keep in mind that in the NodeJS environment, console.error and console.warn will output to stderr instead of stdout. There are also many colored logging libraries, which can help improve the readability of logging output in NodeJS.

console.table()

If you need to output a lot of tabular data, the logging method console.table() is helpful; however, it is currently not supported by certain browsers, including Internet Explorer, Opera, and Safari.

console.table( [
{ name: 'Simon', id: 5, age: 25 },
{ name: 'Ben', id: 7, age: 54 },
{ name: 'Lisa', id: 9, age: 32 }
]);

The output looks like this:

browser console tab

Other Methods

Here are some other, more esoteric, logging commands that you can read up on:

When you want to log errors using the NodeJS console, you could use console.error(), instead of console.log(). This way, the errors can be redirected in the shell process to stdout, stderr, and/or a logfile. Logging non-errors can be done by directing console.log() to stdout.

Shell Input/Output → redirects 1> to stdout and 2> to stderr.

An Example of How to Redirect Output in NodeJS

console.log('This is just noisy debug stuff');
console.error('This means someone broke something again');

We can redirect both output (stdout) and errors (stderr) to different files:

node test.js > out.log 2> err.log

We could also redirect both output and errors to the same file:

node test.js > everything.log 2>&1

Advanced: Using Frameworks & Libraries to Log to the Console

For a more advanced logging solution in the browser, log4javascript can be useful. For more serious NodeJS logging purposes, it can be good to use a well-tested logging library, such as

Logging to the Browser Console Using JS Framework: log4javascript

This is a JS logging framework with an API based on to the popular Java logging library log4j.

Main Features of log4javascript:

  • By default, it logs to a pop-up console window with powerful search (including regular expression) and filtering features. The window can also be used as an inline iframe on the page.
  • Log messages can be sent to the server via HTTP (or AJAX, if you like).
  • It’s highly configurable using familiar methods from log4j, including PatternLayout, which gives the developer complete control over the format of the log messages.

JS logging - log4javascript
Here’s a lightweight version of log4javascript (supports a core subset of the original features).

Logging to NodeJS Console Using a Library: Winston, Node-Bunyan, & Tracer

Depending on the process context, the asynchronous nature of logging can lead to lost log messages if not handled properly. That’s where logging libraries for NodeJS become quite useful.

1. Winston Library

The most popular NodeJS logging library seems to be Winston, which is designed to be simple and universal. Winston supports asynchronous transports (or storage devices for your logs), so each instance can have multiple transports configured at different levels. For example, you can have error logs consistently stored in a remote location (like a database), but all logs output to the console or a local file.

2. Node-Bunyan Library

The Node-Bunyan library provides a simple and fast JSON logging module for NodeJS. The idea of this library is that server logs should be structured and that JSON is a good format for that. A log record is one line of JSON.stringify() output. There is also a special command line tool for the printing and filtering of Bunyan logs.

3. Tracer Library

Tracer is a customizable NodeJS logging library that can print log messages with a timestamp, file name, method name, line number, path, or call stack. Tracer also has support for user-defined logging levels, custom output templates, other transports, and colored output.

Advertiser Disclosure

HostingAdvice.com is a free online resource that offers valuable content and comparison services to users. To keep this resource 100% free, we receive compensation from many of the offers listed on the site. Along with key review factors, this compensation may impact how and where products appear across the site (including, for example, the order in which they appear). HostingAdvice.com does not include the entire universe of available offers. Editorial opinions expressed on the site are strictly our own and are not provided, endorsed, or approved by advertisers.

Our Editorial Review Policy

Our site is committed to publishing independent, accurate content guided by strict editorial guidelines. Before articles and reviews are published on our site, they undergo a thorough review process performed by a team of independent editors and subject-matter experts to ensure the content’s accuracy, timeliness, and impartiality. Our editorial team is separate and independent of our site’s advertisers, and the opinions they express on our site are their own. To read more about our team members and their editorial backgrounds, please visit our site’s About page.