Here are 3 common debug tools available which are useful for examining HTML and CSS on a web page.
Microsoft Internet Explorer Developer Toolbar
current link: http://www.microsoft.com/downloads/deta ... laylang=en
Firefox add-on Web Develepor
current link: https://addons.mozilla.org/firefox/60/
Firefox add-on FireBug
current link: https://addons.mozilla.org/firefox/1843/
These last two are both Firefox "Recommended Add-ons" (https://addons.mozilla.org/firefox/recommended/).
Features:
These tools have lots of features but some to use on the more common html/css problems are:
- Live inspection mode showing html and css for the item under the cursor on a web page. IE Developer Toolbar, Firefox FireBug, Firefox Web Developer. Note: Firefox Web Developer has a more limited display than the other two tools.
- Live CSS inspection with link to actual location in CSS. Firefox FireBug
- View > CSS. Firefox Web Developer
- Displaying outlines of block level elements. This lets you quickly see if there are overlap issues with div and table elements. IE Developer Toolbar, Firefox Web Developer