(Even More) FireFox Goodness.
There I was last Friday, explaining to a client about how a quick hack I wrote for their website worked and using the Web Developer Extension to show them how the CSS worked and what the bits were called, when I realised that I have only ever mentioned this extension in passing ( and seeing as how I spent more time showing the client how Web Developer worked than the hack) I thought it might be worth having a quick look at today.
Lets start with some hype…
Web Developer Extension for FireFox is an extremely useful add-on for FireFox that allows web developers to analyze the compete structure of the page, including elements like CSS style sheets, forms, cookie data, ID and Class details, Java Scripts, images and much more. It also allows you to edit the current style sheet of the page and see the effects in real-time, load a user defined style sheet, or disable styles altogether. The extensive outlining options allow you to visualize the CSS and HTML elements of the page by outlining tables, DIVs, frames or any other element that you define. You can also view form input data along with field names and values and manipulate forms for testing. Other features include links to online code validations, browser window resizing, source viewer with syntax highlighting and more.
So from a quick scan of all that we can see
- A: It is a “swiss army knife” type of tool
- B: It doesn’t make coffee
What I really love about this extension is that it doesn’t force you to use it “their” way. In fullscreen mode? No problem. The Web Developer extension adds a menu as well as a toolbar to the browser in full screen mode you just have to right click and there is the Web Developer menu.
This is one of those can’t live without extensions, along with Scrapbook and Performancing. I use it for checking how other websites solve problems, achieve certain effects, how a site looks at different screen sizes, you name it.Notice something not quite right in the layout, there are rulers, an on the fly CSS editor so you can make the adjustments live and then copy the CSS file back to the server when you get it right.
If you haven’t loaded up a copy of FireFox and you have a cursory interest in webpage design you need to , get Firefox and download this extension. Then head over to say Digital Grin for a quick tutorial.
Go on do it now. We’ll wait.
If you use a MAC have a look at Xyle scope (it costs about US$20) and comes highly recommended.
Overview : Xyle scope : Cultured Code or
mezzoblue § Xyle scope
For me I’ll just pop a few bucks in Chris’ Pay-pal account.
Update: Firebug by Joe Hewitt is another extension that offers similar great tools. Haven’t had a crack at it as yet, but it gets good press. Caveat Emptor.