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

How to log to the 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:

An Example Using String Substitution

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

Which will output:

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()

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.

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

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

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

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.

Roberto Sanchez

Questions or Comments? Ask Roberto!

Ask a question and Roberto will respond to you. We strive to provide the best advice on the net and we are here to help you in any way we can.