Firefox addon makes web development easy

By   |  September 26, 2007

A few months ago, in a burst of enthusiasm for Firefox’s [1]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 [2]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:

  • Disable Used to disable various actions on the page, such as Java and JavaScript, the popup blocker and CSS. You can also disable referrers, page colors and the browser cache.
  • 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.
  • Information With 24 options appearing on the drop down menu, this allows one to find out almost anything one would care to know about the web page. This includes the div order, access keys, anchors, ID and class of all elements on the page, link paths, cookie information, JavaScripts and object information
  • 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.

Comments

6 Responses to “Firefox addon makes web development easy”

  1. capdog
    September 26th, 2007 @ 6:45 pm

    Far better than Web Developer Toolbar is \”Firebug\”:

    http://www.getfirebug.com/

    When I found Firebug I abandoned Web Developer completely – check it out, it\’s like chalk and cheese.

  2. Adam
    September 27th, 2007 @ 10:37 am

    Firebug is indeed good, but it is different from web developer. I use them both.

  3. ram sambamurthy
    September 27th, 2007 @ 11:19 am

    agree absolutely, firebug rocks. i don\’t know what i\’d do without it.

  4. m4verick.com
    September 28th, 2007 @ 6:14 pm

    Awesome tool!

  5. sam
    September 28th, 2007 @ 11:40 pm

    you should give a link to download the fire fox add on here.

  6. Jacklee
    June 1st, 2009 @ 2:01 pm

    I loved the topics covered, found some of it hilarious myself (not in a bad way). :)

    I think when it comes to the web, one of the things I find out is that there are many tools out there. But nothing beats learning core concepts the the basic fundamentals for yourself.

    I’ve been told that I should just program my websites (I like both design/coding) and not to mix my skills but what happens when something goes wrong? Then you have to pay someone to do it for you.

    Obviously I agree that you should learn the core language first before you use a tool to do it for you, because it gives you more control.

    There are many ways to get a solution on the web. Nothing is really bad just by the nature of it, it too depends on how you proceed with a particular technology and that you understand what this is going to do and how it will effect the web environment.

    Knowing when to utilize a technology and knowing the limits are a key aspect to not using the wrong tools for the job.

    Interesting topic here, if it works then don’t fix it. But if it doesn’t work well enough, refine it.

Comments are closed