Website troubleshooting tools - Browser tools - Part 1

One of the most challenging aspects of web development is troubleshooting problems. No matter how long you’ve been developing websites, you’ll always encounter those pesky issues you just can’t seem to fix quickly yourself. Thankfully, if you know how, the modern browsers can help.

A good web designer can expect to have several different browsers installed and running at any given time. Mac users typically work and test in Safari, Firefox, and Chrome (then test IE on a Windows machine), while Windows users primarily deploy Firefox, Chrome, and IE, then test in Safari either on an iPad or iPhone, or by installing it directly on their Windows machine.

In addition to these basic browsers, many developers use a few plug-ins or special features to enable troubleshoot sites from within their browser of choice. The oldest and perhaps most comprehensive
is a little plug-in for Firefox called Firebug.

Notes for Firefox :
To add Firebug to your copy of Firefox, open the browser and select Tools > Add-ons from the top menus. Then search for ‘Firebug’ and follow the directions to install.

1. After installing Firebug, simply right-click (or Control-click on a Mac) a web page item in Firefox, then choose ‘Inspect Element with Firebug,’
2. Choosing to ‘Inspect Element with Firebug’ displays a series of new panes in your browser window

Notes for Google Chrome :
Chrome also offers the option to ‘Inspect Element,’ with similar results.

Website troubleshooting tools - Browser tools - Part 2