Skip to main content
Mar 28, 2011

Effective Web Application Debugging

Modern, AJAX-heavy web development is complicated and difficult to debug. The real problem is lack of information- the quintessential example is "The Silence", when you expect something to happen and you get nothing back, and you have to investigate based on intuition. Javascript often crashes without giving any error message, making it even harder to pinpoint where the problem lies. Here are some tools and best practices to make debugging as painless as possible.

Firefox is my preferred browser for development. Chrome and Safari have come a long way, and Safari definitely has comparable tools, but Firefox is (in my opinion) aesthetically superior and has the most add-ons. Firefox 4.0 dramatically increased its performance and speed, and is worth checking out.

Install Web Developer, Firebug, and HTML Validator.

Web developer makes it easy to examine element information such as HTML attributes, CSS, and session/cookie information. I'm especially fond of the 'style' tool, which can be invoked by Command+Shift+Y on Mac. It gives you a target cursor, and clicking an element displays relevant CSS information. This is very handy for CSS fine-tuning. Also, under the "View Source" tab is the "View Generated Source" feature. On a dynamic page, this will update the source code to its current state, allowing changes from DOM manipulation and AJAX to be reflected in the HTML source.

Firebug is super useful for AJAX debugging. Clicking the 'Net' tab allows you to see server requests, including the payload and response from the server. It even renders the response (if it is HTML) for easy viewing. The 'Script' tab allows you to set breakpoints in your code, and to modify variables on a live page. I recommend turning Firebug off when you aren't analyzing page information as it slows down browsing.

HTML Validator is more of a best practice. Every time you make changes to a page, make sure you see the green check mark in the validator icon. Ensuring that every single page passes HTML validation allows certainty that errors are the result of your server-side code or Javascript, and not the markup itself. The goal is to limit potential sources for error, saving you time in the debugging process.

For Javascript debugging, Firefox's built in Error Console is a good choice, which is listed under Tools. JSLint would be the industry standard, but as the website itself says: "WARNING: JSLint will hurt your feelings." I've found JSLint to be overkill, occasionally finding errors with perfectly acceptable code related to jQuery. Firefox Error Console is best used by clearing the log immediately when the page finishes loading, and then checking it periodically for errors as you interact with the page.

Sometimes Javascript will crash without giving any error message in the Error Console. For instance, you associate a function with a button, and when you click the button, nothing happens. When all else fails, you have to use the alert() function line-by-line until you find the exact location causing the problem. If you liberally use jQuery, make sure you aren't passing the wrong data type as an argument, or chaining incorrectly. jQuery often crashes Javascript without providing any information or error log notification, which is the hardest kind of bug to diagnose.

If the problem is server side, the log file can be a more effective tool than sending output to the client (such as echo() in PHP). Add functions to your custom library that make sending information to the log file cleaner, like separating information with several new-line characters. Log files help avoid line-by-line debugging by printing output and exiting. They are a powerful tool to generate data for analysis.

With these tools, you should be prepared to debug any web issue. One final note: Be sure to check your code on every major browser before you deploy. Internet Explorer seems to cause more than its share of compatibility problems, but I've found specific problems in Safari and Firefox. Get yourself a good virtual machine like VMware or Parallels to make Windows testing easier. IE-Tester helps you quickly test IE 5.5, 6, 7, and 8 if you want to support older versions. There's nothing worse than seeing everything look perfect in Firefox, deploying, and then discovering that the entire page looks garbled on Internet Explorer. Good product needs good testing, and testing on every browser is vital to a successful product. Good luck!


More from the Blog
May 07, 2018

It's Time To Get Serious About Application Security

Apr 02, 2018

How to Detect App Threats to Protect Your Business

Apr 02, 2018

Protecting Apps Is Not Enough: Why You Need Threat Analytics

Every app downloaded via an app store is running in a
Read more