Code Inspection Tools for all Major Browsers

If you do any kind of web development, and you’re a Firefox user, chances are you know about Firebug.  I began using it a couple years ago when I needed to do some serious Javascript debugging, but it has since become indispensable to me for more basic web design.  It allows you to inspect the HTML and CSS code behind web pages, letting you see exactly why any particular element of a page is displayed how it is.  See an example here of inspecting the Clients link at the bottom of our home page (click for larger):

Picture 5 Code Inspection Tools for all Major Browsers click for more about on the fly edit/preview, and tools for IE and Safari…

Bypassing Your Browser Cache

Have you ever encountered a situation where you or someone else made an update to a website, but you couldn’t see the change? It’s usually due to how browsers don’t get fresh versions of files from a website you’ve already seen, unless it thinks there are newer versions. Sometimes that process breaks down for various reasons, and a browser doesn’t think there is a new version of a particular file when there actually is, and even clicking the reload button doesn’t help.

In such situations there are special key sequences, different for each browser of course, which force the browser to re-download every file for a page. You can also clear out your browser’s cache for every page in its history. Instructions for both are detailed in this helpful Wikipedia page, broken down by browser for all the major ones, and a couple obscure ones too. Note that the two most common browsers (IE and Firefox) do share one method of cache bypass: Control-F5. Although note that’s Command-F5 in Firefox on a Mac (there’s no IE for Mac).