Mootools Remote Debugger

January 2 2009

Without question one of the best things to ever happen to web development was the Firebug console. The ability to eliminate alert function calls in favor of console.log calls was one of the greatest things of all times. But since IE still sucks ass in this regard (unless you just happen to have CompanionJS installed the only other option, in many cases, is to use a remote debugger. Here is one way to do that both in local development environments as well as in production environments without causing your website visitors any angst or causing the ever annoying "console is undefined" error.

Basic Premise

This really is pretty simple when you break it all down. Basically you need the following:

A JavaScript function that receives debug messages and stores them in an array
A JavaScript process that watches for new debug messages and, when enabled, either outputs them to a console or submits them to a server-side process
A server-side process that can receive debug messages and output them to a log file

See? Like I said, this really is pretty simple.

JavaScript Portion

You will need to download and install Mootools Core and Mootools More in the HEAD of your document. I never bother picking pieces and parts from Mootools to make my libraries smaller. Instead I just opt for using gzip/deflate enabled Apache servers.

mootools-1.2.1-core.js
mootools-1.2-more.js

<script type="text/javascript" src="/js/mootools-1.2.1-core.js"></script>

<script type="text/javascript" src="/js/mootools-1.2-more.js"></script>

Now you need the JavaScript instructions that will manage your debug calls. Place this code after your Mootools library.

Debug.js

Warning: file_get_contents(http://www.tobymiller.com/js/Debug.js) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 404 File Not Found in /home1/tobiusho/public_html/tobymiller/_/lib/blueprint.php on line 121

Server-Side Portion

And finally you'll need a remote debugger. This can be anything that receives a "key" and "msg" query string name/value pair and outputs that result into a log file that you have access to. My example is in PHP but feel free to do this part however you want and in whatever language you want.

$key = (isset($_REQUEST['key']) ? $_REQUEST['key'] : 'default');

$msg = (isset($_REQUEST['msg']) ? $_REQUEST['msg'] : null);



if ($msg != null) {

  $line = date('Y-m-d H:i:s.') . (microtime(1)*1000) . ' ' . $msg . "\n";

  $log = $key . '-' . date('Ymd') . '.log';

  error_log($line, 3, $log);

}

header('Content-Type: application/x-javascript');

exit;

Configuring For IE

Since the ideal way to debug is to use console logging your first option should always be to install CompanionJS. This will allow "Debug.log" calls to output to a console output similar to the one in Firebug. However, there are certain situations where that's just not an option (like live troubleshooting on a client's machine) which is where a bookmarklet comes in really handy. Assuming that you didn't hard code the path to your debugger into your production code (tsk tsk). You'll probably want a quick bookmarklet that will activate this for you. You can use something like this (right-click to bookmark). Oh, and don't forget to store this bookmarklet on a public URL some place where you can easily get to it from anyones machine.

Remote Debugger Bookmarklet

Live Test

Since I already have this installed on this website you can test it out here. Use this form to test it out, or better yet set this up on your own server so you can actually test out the remote debugger.

Happy Debugging and may IE6 die a very horrible death some day very soon! =)