Hi! I’m Shein Min Htet, working as a PHP Developer at Spiceworks Myanmar Co., Ltd. Today I would like to share about 10 Fundamental Firefox Add-Ons for Developers.
One of the most popular and powerful add-ons for Firefox, considered by many the ultimate developer’s tool. Firebug offers a wealth of development tasks at your fingertips: You can edit, debug and monitor CSS, HTML and JavaScript live on any web page. 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.
Amplify Firebug further with a wealth of available extensions , like FirePHP, which, when used with Firebug, can help create a fully-featured development environment.
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.
Greasemonkey is a unique add-on that lets you add JavaScript to any web page, allowing you to make quick changes to a web page’s content (termed “augmented browsing”).
Run (user) scripts that alter a given website; then every time you subsequently visit the page, Greasemonkey will apply the active script(s), making the change effectively permanent.
You could edit your favorite websites to suit your own particular requirements and aesthetic.
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.
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.
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.
If you’ve viewed the source on any website over the past few years, you will likely have seen Minified JavaScript, where all the whitespace and unnecessary characters have been removed.
It reduces the size of JavaScript files and helps improve a website’s page load performance, however, it makes reading and debugging JavaScript difficult. JSDeminifier integrates into Firebug and uses the algorithm from JSBeautifier.org to beautify and elegantly format the JavaScript.
It can be enabled and disabled for a tab by clicking on the JSB ON/JSB OFF text in the status bar, but will not apply to JavaScript already loaded.
It is off by default until enabled, and is a nifty time-saving tool for both developers and Greasemonkey authors to help edit and debug minified or poorly written JavaScript.
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.
