In my first days of web development it used to be “modify a file – upload using ftp client – refresh browser – repeat from start”. Then I changed this because I used Notepad++ and other tools to skip the ftp part, or at least build it into saving. Nowadays though there are more powerful tools that you can use as a browser addon to modify, check out and analyze pages, like the Web Developer Toolbar Addon for Firefox.
Once installed, it will give you a host of useful options for developers, and even some for non-development usage. You can disable cookies, clear the cache, resize to different resolutions, validate links, code, disable images, show alt attributes and the list just goes on and on. Possibly the best feature is the ability to edit the css and view the results instantaneously. This of course doesn’t actually edit the source css, but a simple copy and paste will enable you to apply these changes to your page in reality.
Features for the common user
You can manipulate images in a few ways too. Choosing to disable them via the images menu will save you bandwidth if you need it, and may give you a better reading experience overall. What’s really cool though is you can disable only external images and you can also replace images with their alt attributes if you want to keep some pics, but not waste bandwidth on the rest.
You can display some info on the site too, like abbreviations, although this only works if the site author uses the appropriate tags. You can also take a peek into the meta information, page information and link information if you are doing research, or trying to find the author of a page for example.
Web development features
While the toolbar can be used for normal browsing, the additional features you get as a developer are what makes this addon really worthwhile. As I mentioned earlier, my favorite features can be found in the CSS menu, where you have all sorts of options to manipulate the styles of a page.
First and foremost, you can disable styles. Not just altogether, but you can choose to just disable browser default styles, embedded styles, linked styles and so on. This is great for finding that stupid error which makes the div container go in a weird place.
Among other features here, my two favorites are the view CSS and the edit CSS options. By enabling view CSS (ctr+shift+Y) you can view the styling of that particular piece of code. You can see a red box around the element you’re viewing, giving you a good idea of dimensions as well. Clicking will bring up a sidebar showing you the exact css code applied to that section. While this is a very helpful feature, it would be nice if you could go ahead and edit the details you see right away, since this mode only enables you to view. Also, depending on how garbled your code is, it may be hard to select underlying elements like divs and so on. I only run into this problem once a while and it’s no biggie, but it would be nice to implement some sort of sorting mechanism here.
The edit CSS feature brings up another pane with the css code inside. You will also see, and be able to edit multiple linked styles, and any changes you make will be shown automatically. This is especially awesome because there’s no need to save, and upload and refresh, you can see it right there in the browser window. If you are happy, just copy the code into your actual stylesheet and save. One problem I have is that searching in the code doesn’t always work for me. If you don’t know the code too well this is a big problem, you will spend a lot of time searching in this case. A feature to upload via ftp would be nice, although one that’s not very sorely missed, at least by me.
One of my other favorite features is actually a very simple one, the resize feature. This enables you to resize the window to any resolution, making cross-resolution development a cinch. You can input some common presets for use in the future, or resize to a given value at any time. Since I have a widescreen laptop this is an invaluable tool which I use to check for the standard 1024×768 compatibility.
The outline menu is also very useful for selecting and highlighting various parts of a page. Outlining depreciated elements, headings, links and so on may also help you in debugging, or helping you arrange your page in the fashion you want to. Apart from my favorites shown here there really are many features you could use as a developer, this tool has made my life so much simpler.
One awesome feature would be the interaction with the popular addon named [NO LONGER WORKS] IE tab. This addon enables you to view a page with the Internet Explorer engine in Firefox, again, very helpful for catching and correcting those annoying problems with IE. It would be nice if Web Developer worked with this addon, showing you all the info as it does with the Mozilla engine. Overall one of my favorite addons is this though and I heartily recommend it to any developer.