Optimizing Mozilla Firefox for Developers – The Tools

Part One (The Tools)

This article is part one of a two-part series about how to optimise Mozilla Firefox. Part One (The Tools) is all about the must-have plugins that any developer should have in their Firefox toolbox. Click here for Part Two (The tricks).

At IDR Solutionson the odd occasion we get requests from customers to fix some subtle bugs that have occurred during converting from PDF to HTML5, having a fast browser and the right tools greatly increases the speed at which we can detect what the problem is and fix it.

Quick Links:

  1. FireFTP
  2. MeasureIt
  3. FireBug
  4. Empty Cache
  5. IE Tab
  6. Opera View & Chrome View
  7. FireShot
  8. PageDiff
  9. YSlow
  10. ColorZilla

FireFTP :

FireFTP is a very useful plugin that essentially allows you to have a FTP client straight from your browser. This handy plugin has all the nifty little features you would expect from any FTP application. Setting it up is very fast, simply put in your FTP details and then you can start dragging and dropping files to and from the server. One of the useful features is when working with HTML files, you can open and edit the file on the FTP and then save any changes you make and it will directly save to the file on the FTP server, this is very useful as it reduces mouse clicks and removes the wait times of file copying, thus increasing productivity!

fireFTP

Measureit :

Measurelt is a great plugin that adds a virtual ruler to your toolkit, the virtual ruler can be used on any web page for measuring any elements or items, this tool is very useful as many of our HTML5 pages on our website rely on precise measurement and positioning, it’s a tool we frequently use when positioning div elements when customizing our online converter page.

Measureit

Firebug :

Firebug is a fantastic little plugin that allows you to inspect and highlight HTML elements and modify the CSS and HTML in real-time, it also allows you to analyze network usage and debug Javascript. This little tool is great for narrowing down bugs, for example we may have a bug with our converted files that we think is related to fonts, by disabling font styling on an element with Firebug we can easily see in real-time if our intuition was true.

FireBug

Empty Cache :

Empty cache is a must-have tool for any web developer. This tool allows you to quickly empty your browser cache and refresh the page all with a single mouse-click. We often make changes to our online PDF converter and after we have deployed the service it is easy to assume something in the build went wrong when images or text arn’t displaying correctly. When actually the problem is that our browser is spitting out the old version of the file instead. Empty Cache comes with configurable options to hide or show notifications and options which allow you to choose what should be reloaded after clearing the cache.

EMpty Cache

IE Tab :

IE Tab is a handy tool that allows you to open a tab in Firefox that will show you what the webpage will look like in internet explorer. This tool is fantastic for when you want to make sure your code changes are compatible across all browsers. We use it when testing converted PDF files to ensure they are bug free across all browsers.

IE Tab

Opera View :

Much like IE Tab and IE View, Opera View allows you to open pages in Opera from Firefox context menus, this again is great for testing code changes across all browsers straight from your Firefox window.

Chrome View :

Much like IE Tab and Opera View, Chrome View allows you to open pages in Chrome, however this plugin will load a chrome browser rather than opening it in a tab within Firefox. Nonetheless this plugin is still very useful for cross-browser testing at the click of a button.

ChromView1

FireShot :

Fireshot is a nice screenshot and developer tool, it allows you to capture webpage screenshots in Firefox entirely. It has some very nice features that allow you to add highlight boxes, crop and add annotations/notes and then save the file in either PDF/PNG/GIF/JPEG/BMP. We often use this tool when highlighting bugs on converted PDF files and adding annotations containing information which we believe our bug fixing team may find useful.

Fireshot

Page Diff :

Page Diff is a handy plugin that helps web developers to see HTML code differences between two web pages. This is great for those moments when you make a code change, save the code file and notice a nasty bug but can’t remember what code change caused it! Page Diff will allow you to spot the differences between a previously backed up HTML page and a more recent one.

PageDiff2

YSlow :

YSlow is a very useful performance analysis tool. It allows you to benchmark your webpages front-end performance and will assist you in ways to optimize your web design for fast response times. It does this by identifying performance issues in a very useful list format.
We often use this tool if we notice a slowdown in speed with our webpage after a recent code change, it is very useful when combined with PageDiff.

YSlow

ColorZilla :

ColorZilla is a plugin that all browsers should have by default, built in. It allows you to get a color reading from any point in your browser, this is great for finding the custom color values of text on other pages, it’s incredibly useful for keeping consistent colors across your website. It also features a gradient generator which is very easy to use and DOM spying features.

colorpicker

Check in next time for Part Two (The Tricks and Tips) where I’ll be looking at changing the Firefox advanced settings to greatly increase your browser speed.

Are there any tools/plugins you use that I missed? Let us know by commenting below!

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (TwitterFacebook and Google+) or the  Blog RSS.

Ebook Page Link

The following two tabs change content below.
Nathan is a developer at IDRSolutions, focusing mainly on the development of HTML5 and Form support for the online PDF converter. He was a speaker and exhibitor at JavaOne 2013, co-presenting a session titled 'Lessons Learned from Using GlassFish with NetBeans". Nathan also enjoys writing technical blog-articles.

Related Posts:

Nathan

About Nathan Howard

Nathan is a developer at IDRSolutions, focusing mainly on the development of HTML5 and Form support for the online PDF converter. He was a speaker and exhibitor at JavaOne 2013, co-presenting a session titled 'Lessons Learned from Using GlassFish with NetBeans". Nathan also enjoys writing technical blog-articles.

One thought on “Optimizing Mozilla Firefox for Developers – The Tools

  1. Mozilla Firefox The best Browser

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>