30 Kickass Firefox Plugins for Web Developers

I work closely with web developers (I am one, when it comes to tweaking pluGGd.in) and have often witnessed how they stumble at simple things – especially when it comes to following specifications from the UI team.

Here is an attempt to bring useful firefox plugins that web developers (as well as UI team) should use:

Highly Recommended Firefox Plugins

Web Developer

Adds a menu and a toolbar with various web developer tools. Lets you resize the window to check out how the site will look like on different screen resolutions.

Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML etc. You aren’t a web developer, if you aren’t using this!

Firefox for Web Developers

Total Validator

Provides true HTML validation (HTML 2.0 to XHTML 1.1) using the official DTDs, plus added attribute checking. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly (they don’t use the official DTDs).

Also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (5 languages), and takes screenshots using 32 browsers on Windows, Linux, and OS/X.

Please note that thisplugin performs the validation OUTSIDE of the browser (so can’t be used for pages that require authentication).

MeasureIt

Draw out a ruler to get the pixel width and height of any elements on a webpage.

Live HTTP Headers

View HTTP headers of a page and while browsing. The plugin hasn’t been updated for a while – and needs a lot more to be desired.

CSSViewer

It helps testing web applications – it quickly can wipe ‘session’ cookie or it helps to identify cluster node in clustered environments using cookie value.All things Indian Startups, Tech and Biz › Edit Post — WordPress

Deep Dive into Code

FirePHP

FirePHP enables you to log to your Firebug Console using a simple PHP method call.

FirePHP is ideally suited for AJAX development where clean JSON or XML responses are required. All data is sent via a set of X-FirePHP-Data response headers. This means that the debugging data will not interfere with the content on your page.

Yslow

YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites. The addon is integrated with the Firebug web development tool. A must have plugin.

JSONView

View JSON documents in the browser.

View Source Chart

View Source In Color-Coded Chart.

  • Graphically Displays HTML Tag Boundaries
  • Graphically Defines Tag Nesting Order, Structure and Hierarchy
  • Adds A Simple but Powerful User Interface *TO* Source Code

XPather

Feature rich XPath generator, editor, inspector and simple extraction tool.

Server Switcher

Easily switch between your development and live servers.

Server Switcher is a navigational help tool for web developers. It allows you to easily switch between sites on your development (hosting the temporary version you are currently working on) and live servers, so that you can immediately see the differences.

FoxyProxy

Advanced proxy management tool that completely replaces Firefox’s limited proxying capabilities. It offers more features than SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc.

docked JS-console

docks the JS-Console to the Bottom of the Browser. Useful for analyzing the page.

CodeBurner

integrates with Firebug, to extend it with reference material for HTML and CSS.

View Dependencies

View Dependencies adds a tab to the Page Info window, in which it lists all the files which were loaded to show the current page.

Jiffy

Adds a new panel to Firebug for displaying timing measurements for JavaScript applications (use this for performance measurement).

XUL Profiler

Javascript profiler. It shows elapsed time in each method as a graph, as well as browser canvas zones redraws to help track down consuming CPU chunks of code.

JavaScript Deobfuscator

This add-on will show you what JavaScript gets to run on a web page, even if it is obfuscated and generated on the fly. Simply open JavaScript Deobfuscator from the Tools menu and watch the scripts being compiled/executed.

Page validator

Validates a page using the W3C Markup Validation Service.

User Agent Switcher

Adds a menu and a toolbar button to switch the user agent of the browser.

Explore and Play

Font Finder

Simply highlight a single element (e.g. a paragraph or a strong tag ), right-click and select `Font Finder`, then marvel as the full CSS text styling of the selected element appears.

JSView

Most websites store their javascripts and style sheets in external files and then link to them within a web page’s source code. Previously if you wanted to view the source code of an external javascript/stylesheet you would have to manually look through the source code to find the url and then type that into your browser.rnrnWell now there’s a much easier way.
You can use the JSView extension to solve the problem.

Aardvark

Powerful and user-friendly selector utility for selecting elements and doing various actions on them.

Other Useful Plugins

IE View

Lets you load pages in IE with a single right-click, or mark certain sites to *always* load in IE. (for Opera, use OperaView)

PageDiff

Pagediff is a simple page compare application. It helps web developers and designers to see HTML-code(text) differences between web pages.

It doesn’t take original page source. It takes browser generated DOM compliant view source. It omits Doctype declaration and HTML tags.

Library Detector

Detects what javascript libraries are being used on the current page and displays the result as icons with detailed tooltips in the statusbar. Currently supports jQuery, jQuery UI, Prototype, Scriptaculous, Dojo, YUI, Qooxdoo, MooTools and Spry.

Greasemonkey

Allows you to customize the way a webpage displays using small bits of JavaScript.

Stylish

Stylish allows easy management of user styles. User styles empower your browsing experience by letting you fix ugly sites, customize the look of your browser or mail client, or just have fun.

Screengrab

Screengrab! saves webpages as images… It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard.

Use this when you are fighting with your UI team.

Any plugins we have missed? Tell us.

img credit