Javascript Log To Console

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

Written by: Roberto Sanchez

Roberto Sanchez

Roberto has been a professional full-stack developer for more than 10 years. Triaging and resolving the most mysterious bugs found in code is one of his many technical specialties. He loves experimenting with emerging programming languages and tools — and sharing his experience with the HostingAdvice readership.

See full bio »

Edited by: Lillian Castro

Lillian Castro

Lillian brings more than 30 years of editing and journalism experience to our team. She has written and edited for major news organizations, including The Atlanta Journal-Constitution and the New York Times, and she previously served as an adjunct instructor at the University of Florida. Today, she edits HostingAdvice content for clarity, accuracy, and reader engagement.

See full bio »

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 < contacts.length; i++) {     console.log('Name: %s, Age: %d.', contacts[i].name, contacts[i].age);  }

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:

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:


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.

ABOUT THE AUTHOR

Roberto Sanchez

Roberto Sanchez got his start with web hosting when he was still in high school, with a Perl script to conjugate verbs on a shared host. Roberto has been involved with web development ever since, experimenting with many web languages and hosting types. Roberto is on the web development team at Digital Brands Inc., where he applies his knowledge of PHP and WordPress to improve performance for the firm's various web properties. Roberto also leverages NodeJS to develop exciting products at Digital Brands Inc. and is eager to share his experience with HostingAdvice.com users.

« BACK TO: HOW-TO
Follow the Experts
We Know Hosting

$

4

8

,

2

8

3

spent annually on web hosting!

Hosting How-To Guides