One of the most powerful utilities I use to build websites is the Web Dev Toolbar from FireFox. This tool packs a number of useful features I just can’t live without. They have been extremely effective in reducing my development time, labor and headaches.
I’ll discuss some features with the intention of helping someone else in their development work. If you’re not sure weather to get this plugin or not, then let me first give you some reasons why it should be in your arsenal. For one it’s completely free. It’s very light weight and non obtrusive. There’s really is no reason to not get this toolbar if you write HTML and CSS code.
When you write or edit website code, often you will want to check changes using a browser like FireFox. But, if your browser caches web pages, then there’s a problem. You can’t see the updates because an older version of the page is given. This version might be a few minuets, day, weeks, or months old, depending on when you last viewed the site before making changes.
This is useful for the casual surfer. But developers must get the latest version of pages in order to see edits in effect. There’s a feature of the Web Dev Toolbar I always keep activated to see a fresh page. It’s the “Disable Cache” option. This is accessed by clicking the Disable button on the far left of the bar. It will be the first option on the drop down menu. When it is checked, caching is disabled.
Another need I have is seeing a list of images the page uses. This is helpful in cases where an image cannot be accessed using a right mouse click, and I don’t have a copy on my computer. This usually happens when an element loads on top of another.
To solve this problem, I click on the Images button on the toolbar. Slide 8 options down and click “View Image Information”. It will display a list of all images used on that page. I find the image I want, save it to my desktop for editing. And it also gives the full image path, so I can dump the updated version back in the same location without touching code in many cases.
The most powerful feature on this toolbar is one I use constantly. It’s the 6th option under the Information button, “Display Element Information”. What this does is it allows you to slide around on the page and outline almost any element. This means div, span, p, a, li, and many other tags.
When you find an element to inspect, left click and a box will appear usually on the left side with some vital information.
Here is what it might look like:
The first row gives the element. In this case it’s td. That’s a sub element of Table. Next to it is .htext which is the class name. That’s useful when CSS changes are needed. You can use the Find Function in almost any IDE to jump to the location of this class in the CSS or HTML file. That’s sure to speed up edits.
There’s also other very useful information in this box. If you build websites, I’m sure you can see a few that’s useful. Like the height and width. Font info and Ancestors are also very important. Ancestors by the way are elements that enclose the current highlighted element.
One thing I find useful with this feature is finding nofollow/dofollow attributes on the a tag. Very helpful when trying to find sites to get backlinks from.
Finally (for this article), there is some validation options under the Tools button. This allows you to check the site for CSS or HTML errors among other inspections.
If you build websites and don’t use the Web Dev Toolbar for Firefox, I suggest you get it now. It has helped me in so many ways. This is often a secret weapon I use to do rapid development/editing on a website. Often to the surprise and delight of my clients.
If you use this toolbar and can share some insight, please let us know in the comments.
Comments are closed.