Tag Archives: debug

Fiddler Web Debugging Proxy CodeUnit 14 DEC 2010

If you are a serious web developer (and you happen to be working off a Windows platform), then chances are good that you currently have the excellent Fiddler web debugging proxy installed on your machine.

If you don’t, then perhaps you should consider rectifying this situation.

What Fiddler is at the heart of it all, is a simple web debugging proxy which basically logs all HTTP(S) traffic between your machine and the Internet. This allows you inspect all traffic, set breakpoints and basically fiddle with all outgoing and incoming data.

As a bonus, it comes with a powerful event-based scripting subsystem and can be extended using any .NET language – not to mention the multitude of add-ons already available for the system.

It is freeware, available for almost all version recent Windows versions and is able to debug traffic from virtually any application, including Internet Explorer, Firefox, Opera and Dropbox for example.

In other words, an invaluable tool in your web developer toolbox!

Related Link: http://www.fiddler2.com/fiddler2/

Javascript Debug Window Script CodeUnit 07 JUN 2010

I found this little snippet of code floating around the Internet and despite its age, it still proves to be quite a handy little guy to have around when you are looking to quickly pop in a debug window in order to test some values against when in the middle of debugging some of that existing code of yours.

The premise for the script is pretty simple. Create a popup window and direct all debug comments into the new “debug” window, meaning that your site display remains clean and tidy but at the same time you’re are getting all the hidden variable values you really care about.

So no more print_r and annoying alerts to break the flow of your web application in other words! :P

// Show the debug window
function showDebug() {
  window.top.debugWindow =
      window.open("",
                  "Debug",
                  "left=0,top=0,width=300,height=700,scrollbars=yes,"
                  +"status=yes,resizable=yes");
  window.top.debugWindow.opener = self;
  // open the document for writing
  window.top.debugWindow.document.open();
  window.top.debugWindow.document.write(
      "Debug Window
n");
}

// If the debug window exists, then write to it
function debug(text) {
  if (window.top.debugWindow && ! window.top.debugWindow.closed) {
    window.top.debugWindow.document.write(text+"n");
  }
}

// If the debug window exists, then close it
function hideDebug() {
  if (window.top.debugWindow && ! window.top.debugWindow.closed) {
    window.top.debugWindow.close();
    window.top.debugWindow = null;
  }
}

To use is pretty simple really. At the start of your page, generate the debug window by calling showDebug(). Then, whenever you want to print something out, simply make use of the debug function, a little like this: debug(“this is a debug message”). Finally, if you are a purist, you may as well close your popup debug window by using hideDebug().

Of course, today’s awesome tools like Firefox’s plugin extraordinaire Firebug and even Internet Explorer’s built in debugger makes debugging Javascript pretty simple, but still, it remains pretty useful when you want to do something yourself and that little something you want to check doesn’t quite fall under the auspices of the existing tools at hand! :)