Use a development browser for Joomla work.

Written by Merav Knafo on . Posted in Tips & Tricks. 6,249 views

development browserJust like a carpenter or a dentist, you need the proper tools to do your work. As a website admin/creator you will need a dedicated browser for daily work. One that has a variety of tools to allow you to get your job done. Firefox is currently the best bet for website editing and development. It has the most robust set of tools for administrators and website developers. I personally use Chrome as my daily browser and Firefox as my developer browser. I encourage you to do the same.

Web Developer Toolbar

The first tool you will want to install is the Web Developer toolbar. This tool is infinitely helpful for you to debug most anything. Some of the features I use almost daily are:
  • Flush cookies (domain, session, path, all
  • Disable Cache
  • Edit CSS
  • Find broken images
  • Find image paths
  • CSS/HTML/XHTML validation
Anybody who has ever tried to debug a user login issue, a website caching issue, a broken image problem or other similar annoyances, will immediately see the usefulness of this tool. This is the first extension I add to any fresh install of Firefox and can’t imagine my day without it.

Firebug

It’s obvious when somebody is new to website design and development. They ask questions like:
  • “How can I change the color of this font/box/thing?”
  • “How can I move this font/box/thing?”
Well it’s incredibly easy. Install Firebug. With Firebug you can easily edit css and html on your site, live. Once you edit things how you want them, copy the edited css into your sites custom.css file or into your templates .css. That is WAaaaaaay easier than editing css, saving, upload via ftp, saving, flushing your browser cache, then pressing refresh.

Nightly Tester Tools

Firefox updates a lot. Plugins do not always update as frequently. (with the exception of Firebug. They update directly from bleeding edge builds) So one day you wake up, update Firefox and discover all of your favorite developer add ons no longer work due to being incompatible. This is another incredibly simple fix most people are not aware of. Install the Nightly Tester Tools plugin. This will allow you to quickly override any add ons to work on fresh Firefox builds. You no longer have to wait for 6 months to update Firefox, simply because one of your plugins cannot update.

Other add-ons

I can go on and on about extensions for Firefox. The previous ones I absolutely cannot live without. Here are a few that I find very useful, but if they break I’m not weeping gently into my pillow in the corner.
  • ColorZilla – Advanced Eyedropper, ColorPicker, Gradient Generator and other nifty stuff.
  • DNS Flusher – Flush your browser DNS cache after making changes to your hosts file or when you change the DNS records on a remote server
  • ScreenGrab – Grab screenshots of entire webpages without scrolling. (This is EOL, but you can find other options by following the link.)
  • MeasureIt – Measuring tool. This is a easy way to figure out how wide a picture needs to be to fit in an article, or the approximate height you want a button to be.

What are your must have tools?

Those are the tools I must have on my developer browser. What are some of yours?

Tags: , , , , ,

Trackback from your site.

Merav Knafo

Merav Knafo is the founder and CEO of iJoomla, Inc. She loves writing about Joomla, usability and Social Networking.

Comments (3)

  • ALnews

    |

    from the extensions for Firefox i like most the screengrab as it is very useful for presenting a website through images

    Reply

  • ALnews

    |

    from the extensions for Firefox i like most the screengrab as it is very useful for presenting a website through images
    http://www.lajm-shqip.com
     

    Reply

  • subhas13q

    |

    I personally use Chrome as my daily browser and Firefox as my developer browser. I encourage you to do the same.

    Reply

Leave a comment