Debugging

This article is a stub. You can help the W3C wiki by expanding it.

Debugging Web applications is similar to debugging any other application, but there are often multiple techniques and tools needed for the variety of formats and components. Among the differet types of content to be debugged are:

• Markup: HTML, SVG, and MathML are 3 common types of markup used in Web applications, and may contain validity of well-formedness errors that cause problems
• Style: CSS, a special kind of markup, changes other markup, and has a tricky cascading model
• Scripting: The most common clientside browser scripting language, Javascript, is most like traditional procedural debugging, and has may associated APIs
• Server code: sometimes the error may originate in the Ruby, Python, PHP, Node.js, or other serverside code that generates the client code or handles interactions
• Network: HTTP, caching, cross-origin scripting, XHR, and so on each may hold the key to debugging problem
• Declarative animations: SVG, CSS, and SMIL offer declarative animation, and getting it just right can be a challenge.

In addition, because webapp client-side code must run in a variety of User Agents (UAs), some of which are the common browsers, a developer needs to test in all of the expected UAs (for example, you should test your code in at least Internet Explorer, Firefox, Opera, Google Chrome, Apple Safari, and often in different versions of each; it should also be tested in various mobile UAs. Bugs may appear in any of these target runtimes, and production code should ideally run bug-free in them all.

Tools

Each browser has at least a "console", a log that reports which errors occurred, and often on what line the error was detected; note that the reported line may not be where the error started, but it should give you an idea of where it went critical.

In addition, most browsers may have a more sophisticated built-in or optional debugging tool in the browser, which allows you to drill down into various aspects of the markup, style, or script in real-time.

add tools

Techniques

Here are a few simple principles to keep in mind when debugging:

1. Create tests early: define how the app is meant to run, and design tests that allow you to see when it's not working right
2. Test often: check frequently that your code works as expected
3. Bugs arise in logic and in data: sometimes your code has a logical or procedural flaw, or sometimes the input or output wasn't what you expected.

add techniques for each type of debuggable content