Get the most out of that browser

Okay… first, if you don’t know what a browser is (don’t feel ashamed if you don’t – and no, it is not Google) but a browser is a program that allows you to access websites.  Here’s a quick video explanation:

The 4 most popular web browsers are: Internet Explorer, Firefox, Google Chrome and Safari.  Internet Explorer is the most dominant at 60% of the market (which is much lower than I was actually expecting), followed by 20% Firefox, 8% Chrome and 7% Safari.  The latest versions of all 4 of these browsers allow you to add extensions.

As a web developer, extensions have become very important with helping me get through everyday things – mostly with debugging (i.e. finding issues).  These are a few notable ones that I find the most useful.

1. Firebug (Firefox and Chrome)

Firebug is definitely one that’s catered for developers.  For front end developers, it’s great to inspect HTML and modify the style and layout of a page in real-time.  For other developers, it’s great for debugging javascript.  (Again, don’t worry if those last two sentences mean nothing to you.)  Now, I’m not condoning this BUT I’ve found a non-developer use for photo websites where they purposefully try to prevent you from downloading their images.  Using the tool, you can use the “inspect” function to hover over the images and expose the web address for the photo (i.e. the location for the .GIF or .JPEG) so that you can copy it into another window, open and download the image directly.

2. Screen Capture (Chrome) and Screengrab (Firefox)

Both of these are nice screen capture extensions.  Yes, you can take screenshots by pressing CTRL + PrintScr (or ALT + PrintScr for a specific window only) but these are much better.  For one thing, they allow you to choose between just capturing the visible content (which CTRL + PrintScr only allows), the whole page or even just a specific region.  Screen Capture also has an additional feature that allows you to highlight/underline certain areas in your screenshot.

3. FireFTP

First, FTP stands for File Transfer Protocol.  FTP clients are used to copy one file from one host to another.  So whether you have your own web hosting account or you are trying to access someone else’s, a FTP client lets you move files to and from that host.  FireFTP is nice because you don’t have to install another standalone FTP client, such as SmartFTP or WS_FTP.  Instead, you can easily open it directly as another tab right in your browser.

4. Web Developer (Firefox and Chrome) and IE Developer Toolbar (IE Versions 7 or Less)

This one is probably not for the non-developer.  However for us code monkeys, it’s great for allowing real-time CSS and HTML editing.  You can display the ruler to measure specific areas on the page.  You can toggle certain features like cookies, javascript, images, etc.  You can have it display all sorts of information about the anchors, ids, class names, tab index, etc.  It makes it easy to clear your cache, cookies and other private information.  You can use it to resize your browser window to a specific size.   You can validate your HTML, CSS, Feed; validate if you are 508 compliant even.  It’s definitely a time saver for things that might have previously required you to go line by line through the code.

For IE 8 users, you don’t need to install a separate toolbar.  It automatically comes as part of the browser.  You can find it under “Tools” -> “Developer Tools” or just press F12.

5. HttpWatch (IE and Firefox) or HttpFox (Firefox)

This one also is mostly for developers also.  It’s great for monitoring how your website loads.  If you were ever wondering if a certain element was slowing your site down, you’ll be able to see exactly in the order that it is loaded on the page and how long it took.  You can also see other details in the headers and cookies.