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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!