Top Firefox Addons

By , March 20th, 2013 , Tags: , , , , , , 3 Comments
3 Flares Twitter 1 Facebook 1 Google+ 1 StumbleUpon 0 LinkedIn 0 Email -- 3 Flares ×

Top Firefox Addons

1. Firebug

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.

2. Web Developer

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.

3. FireFTP

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.

4. YSlow

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.

5. Greasemonkey

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.

6. JSONView

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.

7. RESTClient

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.

9. JS Deminifier

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.

10. Fireshot

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.

3 Flares Twitter 1 Facebook 1 Google+ 1 StumbleUpon 0 LinkedIn 0 Email -- 3 Flares ×

Leave a Comment



  • http://www.baidu.com baidu censor

    Other countries censor content and not just rogue regimes such as the Iranian mullocracy. Poor people! http://www.baidu.com

  • http://qrchains.com/profiles/blogs/user/JohnnyMcge similar web page

    If you are going for best contents like myself,
    simply go to see this website everyday because it
    offers quality contents, thanks

  • Brock

    My brother recommended I might like this website. He was entirely right. This post actually made my day. You can’t imagine simply how much time I had spent for this information! Thanks cssmatter.com!

I'm a hardworking web person from Mumbai, India. My main skills in the front-end development of websites. I'm very friendly so please don't hesitate to get in touch regarding any quotes or general inquiries you may have. I founded CSS Matter in 2013 with the sole ambition of design, development, creativity and innovation on the Internet, which recognize and promote the best web designers, developers and web users in the world. I'm skilled, talented, creative and very passionate about my work. - I can make websites that look and function great. - I can design branding that portrays your organization or business perfectly. - I can make eCommerce stores so that you can sell goods or services online. - I can make content manageable websites that are flexible and simple to operate. - I can make any website look great on every mobile device that exists, - I can do loads of stuff. I like to work closely with people to ensure that each stage of a project goes great every step of the way. I like to ensure that all of my finished projects/work reflect how highly I would like to be perceived. I'm confident that with your ideas and my expertise we can create something that makes us both smile. If you like what I do, and think we could work together then don't hesitate to get in touch with me. Skype IM : cssmatter And Email

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.

Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.

Subscribe to the RSS feed

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.