Firefox addon makes web development easy
A few months ago, in a burst of enthusiasm for Firefox’s extensions[/1], I installed the Web Developer extension. Not actually being a web developer, however, after a few minutes of playing around with it I grew bored and it has since sat unused on my browser.
Only recently, while putting together a website in Joomla[/2] and doing some research on editing templates was I reminded about the Web Developer tool. Looking to edit templates without having to get into the nitty gritty of cascading style sheets (CSS), I scoured a couple of forums. The gist that I picked up was that there was no way of avoiding dealing with CSS, but an interesting tip was to use the Firefox Web Developer tool.
With the Web developer tool, although any changes have to be coded in, the effects of these can be seen immediately, making it a WYSIWYG (what you see is what you get) editor of sorts.
The extension displays 12 icons or category titles on the Firefox menu. These are:
- Cookies With this one can disable cookies, add new ones, view cookie information, clear the session’s cookies and delete both domain and path cookies.
- CSS Containing a host of CSS functions, the main tools allow one to view the style information relating to specific parts of a page or the entire site. The sites entire CSS file can be viewed and edited, with changes occurring on the page as they are made.
- Forms Here are several tools for manipulating forms. Some features include the ability to convert between GETs and POSTs, display the form method and action, view the element’s IDs and names for all forms and populate form fields with their names as their value.
- Images This allows one to hide images on the page as well as get useful information on the page’s images such as file size, dimensions and paths.
- Miscellaneous This mixed bag category includes options to edit the page’s HTML, drag a magnifier around the page to enlarge certain areas for closer viewing, resize forms, make the page linear and to clear the browser cache, history, and cookies
- Outline This section will outline elements on the page, such as frames, tables, headings and links. Elements can also be outlined according to their positioning, ie absolute, floated, relative or fixed.
- Resize This allows one to resize your browser to see how a page looks in different size browsers. Custom sizes can be used and there is an option to zoom in and out of the page.
- Tools Here are all the tools for checking that the validity of aspects of the site, such as CSS, HTML, links and feeds. A speed report can also be given. These particular tools are in fact links to sites specialising in the various forms of validation, rather than having the extension carry out the validation itself.
- View Source Used for viewing the pages source code in a popup window. This can be further broken down by frames or as generated source.
- Options These functions relate to the extension itself, allowing for customisation such as setting up of keyboard short cuts for the various tools.
As more of a tinkerer rather than a full-on web developer, my experience of the tools was fairly limited, but I found a few to be particularly handy for my needs.
One of these was the "View Style Information" option. With this activated, as one moves the mouse across the page, a red box highlights the div section which the particular area of the page falls under. A bar in the browser also shows the relevant style information.
For my purposes, and knowing only a smattering about CSS, I was trying to dissect and pull apart existing Joomla templates which I had loaded on my page. Using this, I was able to easily identify where to find each part of the page in the template’s CSS file.
Clicking on a particular section or part of the site, would split the browser window, opening a window on the side that would show all the relevant CSS information. Usefully, it also includes the line number at which the chunks of code can be found in the CSS file.
Activating the "Edit CSS" option, a new tab opens in the style information window. Once this window is open, changes can be made to the code which immediately appear on the page. One thing lacking from the edit tool was an indication of the line number. However, a handy embedded text search tool allows one to just copy the text, paste it into the search tool and find the relevant section in the CSS template.
Once changes have been made, they can be saved onto your own computer. Using an FTP program (gFTP), I was able to upload these changed files to replace the originals in fairly quick time.
Although this extension is aimed at the more experienced web developer, I found it a handy tool in learning more about the structure of websites. The ability to look under the hood, as it were, of any site you come across is useful in learning how others have compiled their sites and the little tricks that they may have implemented.
At only 174KB to download, the add-on packs a lot into a small space and is well worth the trouble to install if you have any interest whatsoever in developing web pages.