Top Firefox Addons
It’s extremely powerful and can help you quickly find errors, monitor network activity, explore DOM objects and even view and manage cookies. The Layout tab also features rulers and guides, particularly useful when working with CSS, where precision is key.
Web Developer adds an array of custom tools and menus. Use it in tandem with Firebug for maximum functionality and control over code, and analyze, validate and optimize web pages. One main feature of the Web Developer toolbar is the ability to edit CSS on the fly, allowing you to test different fonts, inspect and edit the background, borders, padding, margins and much more — and changes appear instantly.
Tasks are conveniently grouped into intuitive categories, such as “CSS” or “Images,” with options to display a ruler and image paths, and resize the current window to rest various resolutions. Use it to check website compliance to web standards and accessibility guidelines.
FireFTP is a browser-based FTP client that provides easy, intuitive access to your server via Firefox, and has all the features you would expect from most standalone FTP apps. It can handle multiple accounts, support secure transfers and boast a well organized drag and drop interface. It’s cross-platform and lets users import and export account settings and features support for directory synchronization, comparisons, time-stamp syncing and auto-reconnect.
Once installed, it’s easy to get started. Input your FTP credentials, drag and drop from your computer to the server or right-click on a hosted file and edit within Firefox, then update the file directly on the server.
YSlow from Yahoo integrates with Firebug to analyze web pages and fine tune their performance. It grades web pages based on one of three pre-defined rulesets, or a user-defined custom ruleset, and offers suggestions and tools (such as Smush.it or JSLint) for improving the page’s performance. With Google now counting page speed as a ranking factor, it is essential to optimize your website to ensure fast response and load times.
YSlow works by crawling the DOM to find all the components, retrieving information about each component and then taking the data gathered and generating a grade for each rule, which produces the overall grade.
Much like CSS allows you take control of a web page’s style, Greasemonkey user scripts let you control any aspect of its appearance. If you do not want to create your own, the dedicated resource UserScripts.org has thousands of scripts, which you can download and save to your own library.
Working in the browser with JSON data when developing RESTful web services can be a huge pain; the raw data is unformatted and you are forced to download it to view in an external text editor. However, JSONView adds content type checking for application/JSON results and then renders and formats the raw JSON data within the browser, along with collapsible regions for objects. The document is formatted similar to XML and is highlighted and indented, and even if the document contains errors, JSONView will still show the raw text.
You can still use “View Source” to view the raw JSON string returned, with an option to send application/JSON in HTTP Accept headers. If you are working with AJAX result data and using GET and REST style URLs, JSONView can be quite the time-saver.
Testing and debugging web services can be a thankless task and often means using a bulky IDE (integrated development environment). However, RestClient is a simple, intuitive add-on for Firefox, an easy way to preview responses for HTTP requests and inspect their response headers. It’s particularly useful when working with APIs. Specify the URL, method (POST, GET, PUT) and any request headers and body — RESTClient will then tell you if the request succeeded and you can examine the response.
It also works with REST services and JSON data, and will even post back and receive XML. While it’s a quick and simple add-on, it’s also a powerful, very effective tool which can help save time and streamline your development workflow.
8. Empty Cache
If you’ve already cached a new live change or feature, the browser could continue serving the old version of the file instead of the most recent change. That’s why as a web developer it’s so important to clear your cache. With Empty Cache, quickly clear your browser’s cache and reload the page with a single click, without interrupting your browser session. It offers a single button to clear four types of cache (Memory, Disk, Offline and Favicon) with fine-grained, configurable options to hide or show notifications, and what to reload after the cache has been cleared.
While the option to clear the cache sits within the developer toolbar or down several levels in the menus, having a button positioned on your main toolbar is a quick and elegant option, and more reliable than forced reloads.
This extremely useful add-on can capture not just the visible area of a page but also the entire page, no matter how long. You can add graphics and notes directly to the screen capture and save the file as a BMP, JPG, GIF or PNG. You can also export screenshots (to clipboard), upload them to social networks, email or save them to the free Fireshot hosting server. It’s incredibly simple to add text annotations or quickly resize, crop, highlight, erase or blur desired elements on the capture.
Once captured, the screenshot is displayed on a separate window in Fireshot, where you can do basic editing. The edit toolbar appears as a floating window, which you can use to make adjustments. The PRO version adds further functionality.