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
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 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!
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).
Draw out a ruler to get the pixel width and height of any elements on a webpage.
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.
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 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 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.
View JSON documents in the browser.
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
Feature rich XPath generator, editor, inspector and simple extraction tool.
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.
Advanced proxy management tool that completely replaces Firefox’s limited proxying capabilities. It offers more features than SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc.
integrates with Firebug, to extend it with reference material for HTML and CSS.
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.
Validates a page using the W3C Markup Validation Service.
Adds a menu and a toolbar button to switch the user agent of the browser.
Explore and Play
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.
You can use the JSView extension to solve the problem.
Powerful and user-friendly selector utility for selecting elements and doing various actions on them.
Other Useful Plugins
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 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.
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! 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.