Must Have

Web Devel­oper

An essen­tial exten­sion for any web developer/designer as it pro­vides a raft of incred­i­bly use­ful fea­tures all under one roof. You will won­der how you ever man­aged with­out it!

Mea­sure It

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

Col­orZilla

Advanced Eye­drop­per, Col­or­Picker, Page Zoomer and other col­or­ful goodies.

View Ren­dered Source

Dis­plays ren­dered source as the browser has inter­preted it. Great trou­bleshoot­ing tool for HTML, JavaScript, CSS and XML/XSL devel­op­ers: any­one who needs to ana­lyze ren­dered source code.

- Should Have

Screen grab!

Screen­grab saves entire web­pages as images. You can save the entire page as an image (it scrolls around the page tak­ing shots and stitches it together), just the vis­i­ble por­tion, or the browser window.

JavaScript Debug­ger

Venkman is the code name for Mozilla’s JavaScript Debug­ger. Venkman aims to pro­vide a pow­er­ful JavaScript debug­ging envi­ron­ment for Mozilla based browsers.

HTTP Live Header Monitor

This tool lets you watch the head­ers sent between web servers and your browser.

View For­mat­ted Source

Dis­plays for­mat­ted and color-coded source and optional CSS infor­ma­tion for each element.

Fangs Screen Reader Emulator

Ren­ders a text ver­sion of a web page sim­i­lar to screen reader out­put. Helps devel­op­ers find acces­si­bil­ity issues fast.