vs debug

This page compares ulog to debug.

Open devtools

Open the browser developer tools (F12).

Enable logging

No output will be visible until you enable logging. To enable logging in both debug and ulog, set debug=*.

You can do this using the developer tools GUI (tab Application in Chrome), or in the Console tab run this command: localStorage.setItem('debug', '*'), or you can press the button below:

Log some messages

Press the buttons to log messages with both loggers:

You should get output like this:

ulog monitors the config

You may notice that debug is not producing any output, whereas ulog is. That's because ulog monitors the configuration at runtime but debug doesn't. So to get debug to pick up our configuration change, reload the page (F5). Then, press both buttons again. This time, we can see debug and ulog output side by side:

The output of ulog and debug is very similar. Both loggers add the name of the logger to the message and both loggers show some timing information. Also, both loggers use colors to produce more clear output. But, there are actually more differences here than initially meet the eye.

ulog preserves the callstack

One big difference between debug and ulog is marked with arrows in the screenshot. ulog preserves the callstack, meaning file names and line numbers shown in the console point to the client code. This is in big contrast to debug, which injects it's own formatting function in the callstack, meaning all file names and line numbers point to that function in the debug minified source file. Not very convenient!

ulog has configurable formatting

debug only allows some tweaks to it's formatting. ulog allows you to take full control of formatting. You can change the format for all or some loggers using config option log_format. For example, let's try adding the time to the message. Set log_format=time lvl name perf in the devtools or press the button below: