Web Diagnostic tools may either come included with your browser or can be installed for free. These tools assist you to target styles for changing the look of your web pages and help to diagnose problems with the layout, how fast the page is loading and they can help you see if specific content is being loaded into the page at all.

Diagnostic tools allow you to look at the DOM structure and HTML for the current web page. From here you can click on any element on the page and see where it lies in the HTML and what styles are being applied to it. These tools also provide a Console log. You can also look at which style sheets and what JavaScript files are being loaded with the web page.

You may ask if you need to install each of these extensions for the various browsers, you may find that you don't need to, that one will do, but it helps if you are having a specific problem on one browser vs. others.


The Mozilla Firefox browser: Firebug and Web Developer Tools

The Firefox browser has Add-ons that you can install for specific functionality for the Firefox browser. To install Add-ons in Firefox, pull down the Tools menu and select Add-ons. You will see a list of installed Plugins, Extensions, Appearance settings and Services

Install Firebug

Firebug is an Add-on and is one of the most popular tools for web developers. 

From the Add-on menu, click on Extensions and see if Firebug has already been installed and is enabled. If not, click on Add-ons and select Firebug from the displayed Add-ons or go directly to getfirebug.com and install it from there. Once Firebug is installed, your firefox browser will display a little insect icon in the upper right of the screen. Click on the icon and the Firebug interface will appear. You can also click on the F12 key to launch Firebug.

Install Web Developer for Firefox

Web Developer is a toolbar for Firefox that has many very useful tools for web developers. This can be installed from Get Add-ons or you can go directly to https://addons.mozilla.org/en-US/firefox/addon/web-developer/ and install it from there.

Once Web Developer is enabled, you will see a new tool bar across the top of your screen. This tool bar has a number of dropdown menus with various tools for Web Developers.


Internet Explorer Web Developer Tools

Internet Explorer also has a set of tools for web developers. You can download the Internet Explorer Developer Toolbar from: http://www.microsoft.com/en-us/download/details.aspx?id=18359

With an IE browser window launched and active, click on the F12 key when in an IE browser and the tools, similar to Firebug, will appear at the bottom of the screen.


Chrome Web Developer Tools

Chrome also has a Web Developer toolbar that you can install from the Chrome Web Store: https://chrome.google.com/webstore/category/apps

With a Chrome browser window launched and active, click on the F12 key. A window will appear at the bottom of the screen. This window allows you to look at the various features of the current web page for inspection.


Safari Web Developer Tools

The Safari browser also has Web Developer tools. You can research these tools at https://developer.apple.com/safari/tools/