Whenever a site is being built or new features are being added, it is inevitable that you are going to run into issues with the execution of the new programs or scripts being implemented.  Being able to troubleshoot these problems is crucial in moving forward with the planned changes and knowing where to find the best tools can make the difference between getting the job done today versus canceling the changes altogether.  In this article, the aspects of troubleshooting faulty HTML and JavaScript templates in Mozilla Firefox will be analyzed, seeing as how Firefox is one of the most popular browsers and the best browser for debugging and troubleshooting known issues.

Firebug

Hands down, Firebug is the best debugging tool available for the Firefox browser and is a free extension available for download from within Firefox.   You are able to view errors and code in real time not only in HTML and JavaScript, but a variety of other codes such as CSS and PHP as well.  Virtually all debugging from within the Firefox browser can be done with this nifty tool and it runs alongside the browser, meaning it can be opened directly from within a tab at any given time.

View Source Chart

Yet another useful add-on, View Source Chart can be downloaded from the Firefox Extension Library much like Firebug.  This extension takes code and displays it in a colorful, graphical fashion that allows you to see the extent of select pieces of code: where they begin and end and what other pieces of code they have an effect on within any given page.  By representing each piece of code with a different color and indentation, it becomes much easier to isolate and locate specific errors within your JS or HTML coding.  With other features included such as the ability to zoom into complex parented code, it remains to be seen if another extension can outperform this little gem.

JSView

Designed especially for use with JavaScript applications, JSView gives Firefox users the ability to backtrack their steps and to see not only the view source of the page but also the source code for external files.  When troubleshooting JavaScript, this feature can come in handy quite often as the originating problem may be with an external file, script or application.  This extension supports compatibility with all forms of pages: scripts, stylesheets and frames are all viewable and can be troubleshooted with the click of a mouse.

Savegenpage

With this extension, you are able to see the HTML code that your JavaScript scripts are generating and therefore are able to determine whether or not there are output errors that need to be fixed. This tool comes in handy especially when dealing with JS-generated menus and frames.

It is also helpful to use Pingler’s Browser Details Tool to quickly determine the specifications of your machine and browser.  By knowing all of the browser details, you can determine whether or not the error you are seeing is due to coding or simply to do with a particular version of an internet browser.