After discovering that browser compatibility was an issue that is a universal issue we asked designers to share with us some of the tools they use to solve these problems once they are discovered. Here is a list of the top 5.

Most server side problems can be debugged at compile time and the remaining ones at run time. These issues usually relate to errors with business logic or syntax errors. The challenge is discovering the source of errors on the browser. These can come from many different places including external resources, javascript runtime errors, or stylesheet related issues. When you have errors on the browser these tools can help you identify problems and fix them.

  1. Firebug – “[This tool] helps bring to the surface any issues that the browser may not explain, as well those that are not obvious when reviewing HTML before the browser renders the document into its Document Object Model,” says Khrysti Nazzaro, Director of Optimized Services, MoreVisibility
  2. Firefox Developer Tools – “We do use a number of external tools as well, including the wonderful suite of developer tools available as FireFox plugins. These are an invaluable resource for trying to get to the bottom of a particular bug or error, ” George Evanko, owner of George Evanko Communications
  3. W3C HTML Validator – “One of the most important tools we offer developers is our Mark up Validation Service. This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.” Vera Newhouse, PR Agent for the W3C, Edelman
  4. W3C CSS Validator
  5. MeasureIt & Colorzilla – These are great for finding out how far off a color or location of an object rendered in the browser. This stops the guess work and tweaking, save, upload, test process.

Can you guess the most popular browser for debugging web application front ends? Firefox. That being said, Google Chrome does have a decent element inspector and profiler that can be helpful in understanding how stylesheets and html were interpreted by the browser. Internet Explorer 8 also will come with basic javascript debugging tools, which will be a welcome change to using the resource intensive Visual Studio or the very basic Microsoft Script Debugger.

If you have any other tools you have found helpful in debugging browser rendering issues please post them in the comments.