Replacing console log with JavaScript loggers

A popular tool during JavaScript development is console log, which lets you send messages to your browser's console.

This is quick and easy to add to your code. Problem is that your console log lines have to be managed individually. And when you go live, you have to modify your code to remove the console log lines.

You can achieve the same benefits with JSNLog JavaScript loggers, without the drawbacks. Here is how.

Log to the console instead of to the server

You can send log messages from your JavaScript loggers to the console instead of the server, using JSNLog's ConsoleAppender. To make that happen, modify the debug version of your web.config:

<!-- Debug version of web.config -->
<jsnlog>
    <!-- Create console appender -->
    <consoleAppender name="consoleAppender" />

    <!-- Send all log messages to console appender -->
    <logger appenders="consoleAppender" />
</jsnlog>

Then replace your console logs with JavaScript loggers:

console.log('debug message');
JL().debug('debug message');

Guaranteeing no live console loggers in live site

To ensure your console loggers are disabled in your live site, make sure that the Release version of your web.config stops all debug messages and that it doesn't create the console appender:

<!-- Release version of web.config -->
<jsnlog>
    <!-- Stop all messages with severity lower than fatal -->
    <logger level="FATAL" />
</jsnlog>

That way, you and your team can be sure there will be no live console loggers in your live site.

Just in case, it is easy to maintain Debug and Release versions of your web.config using web.config transform files.

Managing logging to console

You can use named loggers and logging levels to determine what gets logged to the console. Logging to the console is essentially the same as logging to the server - only the destination of the log messages is different.

Logging to both the console and the server

To log to both the console and the server, create a ConsoleAppender and a AjaxAppender, and then send all log messages to both:

<!-- Debug version of web.config -->
<jsnlog>
    <!-- Create console appender and AJAX appender -->
    <consoleAppender name="consoleAppender" />
    <ajaxAppender name="ajaxAppender" />

    <!-- Send all log messages to both -->
    <logger appenders="ajaxAppender;consoleAppender" />
</jsnlog>

What about logging to the server only? Here there is no need for configuration. When you do not create any appenders, JSNLog uses a default AJAX appender and tells all JavaScript loggers to send their messages to that appender.