What JSLog looks like
When collapsed, it sits unobtrusively in the upper left-hand
corner of the page like so:
When expanded, it looks like this:
Why you should use JSLog
- alert() forces you to acknowledge each message, which makes it very bad for debugging things like loops and mouseovers
- there's no graceful way to begin "productionizing" your code when it has a bunch of alerts() in it -- you have to go through and delete all the alerts or comment them out
- alert() notifications are incredibly intrusive, and while they are there in your code, it's impossible to ignore them
- once you acknowledge an alert() box, it's contents are gone and you can't refer to it again
Expanding and Collapsing the logging panel
A double-click on the "handle" expands or collapses the logger display. Regardless of whether it's expanded or collapsed, you can log messages to it, and if it's collapsed, the number in the handle increments to show you the total number of logged messages.
If you have the scriptaculous libraries available, JSLog will automatically detect their availability and allow you to drag the logging panel to anywhere on the screen. In between page refreshes, JSLog remembers its location and state (expanded/collapsed). So, you can bring it front and center to debug something, and then just as easily place it out of the way in a corner somewhere.
Let's get started! Installation and usage
Installation is dead simple. Download the one .js file (see the top of this page), and include it on your page. That's all you need -- no additional stylesheets or anything (in case you're wondering, JSLog appends it's own small stylesheet on instantiation. But you don't need to worry about it, it happens behind the scenes).
To use, just place calls to JSLog where ever it makes sense for development or debugging -- in mouseovers, onclicks, pageloads, loops, etc. Here are some examples to get you started:
Try it. Your whole page should look like this:
This will log a message immediately upon page page load.
Next, add some event-based log entries to get a feel for how it works:
Methods on the JSLog Object
So far you've seen two methods on the jslog object -- jslog.info() and jslog.debug(). Here are all the methods:
- These methods all create entries in JSLog. The only difference is the severity of the entry created:
- The next method places text in JSLog's text box -- the one at the botom of the JSLog panel. This is useful if, during debugging, you need a convenient place to put a large block of text which wouldn't fit well in a normal JSLog entry.
Configuration: enabling/disabling JSLog
In the jslog.js file, find the line: var Config_Logging_Enabled = true;
When set to true, this enables JSLog on every page on which JSLog included. When set to false, JSLog will not appear on any page, regardless of whether or not the jslog.js file is included. The idea is allow you to switch your entire site from development/debug mode to production mode by simply changing this one configuration setting.