Here’s a more advanced method of doing javascript logging than the javascript debugging technique I suggested before. Check it out! 🙂

This article will introduce fvlogger (available for download here), a library that brings simple logging functionality to JavaScript and the browser.

Logging in JavaScript with fvlogger

Whereas logging packages in the languages listed above provide a complex class/package structure built on top of inheritance and other object-oriented concepts, fvlogger borrows concepts from Log4J and its cousins, but eschews their complexity by providing a simple API and offloading the heavy lifting onto the DOM.

The library defines four basic functions (and provides a few others that can be considered optional), a few flags that can be set to define its behaviour, and several CSS classes that can be used to govern how the log will appear. It requires just one special element to be placed in the document, and including fvlogger in your pages is as easy as adding the following two lines to the head of your documents:

<script type="text/javascript" src="/fvlogger/logger.js" />
<link rel="stylesheet" type="text/css" href="/fvlogger/logger.css" />

Essentially, all fvlogger does is append new elements to a specific element in the document. These new elements contain the logging messages that will assist you in debugging your script(s). The four functions used to create the log messages are: debug(msg), info(msg), warn(msg), and error(msg). Each function expects a single string that will be appended to the document.

Read article: A List Apart: Articles: JavaScript Logging