Firefox – tons of tools for web developers!

One of the goals of Firefox have always been to make the lives of web developers as easy and productive as possible, by providing tools and a very extensible web browser to enable people to create amazing things. The idea here is to list a lot of the tools and options available to you as web developers using Firefox.

Native developer tools in Firefox

We are working on building a great set of developer tools for you included in Firefox. They are described much more in detail in Developer Tools in Firefox Aurora 10 and there are some very interesting implications for what we can accomplish with them!

We are evaluating and experimenting with a number of user interfaces and code approaches to try and find the most optimal ways to work with code in a page. If you install Firefox Aurora you can try them out right now! Let us know what you think.

A picture of the native Developer Toosl in Firefox Aurora

Also stay tuned to this blog, since we will post updates on progress and features for the native Developer Tools.

Firebug

By far, the most well-known web developer tool in a web browser is the Firebug extension, and without a doubt, for a long time it set the bar for how web developing and debugging should be. Firebug is still a very important tool with lots of powerful features, including a vast number of extensions (see below).

Just something you need to be aware of, though, is with everything that Firebug offers it can be quite heavy when it comes to consuming memory, so use it accordingly.

Firefox extensions for web developers

Over the years, a lot of extensions have been developed to help web developers utilize Firefox to the maximum. Some of the most used and well-known are these ones, but please let us know if we have missed any that helps you!

Accessibility Evaluation Toolbar

Support web developers in testing web resources for accessibility features.

All in One Sidebar

AiOS lets you open various windows as sidebar panels, and quickly switch between them. So it put an end to the window chaos! In addition to bookmarks and history it opens dialogues such as downloads, add-ons and more in the sidebar.

Cache Status

Easy cache status & management from status.

CacheToggle

Disable (and optionally clear) the browser cache with the flick of a switch.

Colorzilla

Advanced Eyedropper, ColorPicker, Gradient Generator and other colorful goodies.

Console²

Console² (pronounced Console Squared or Console Two) replaces the JavaScript Console with what could be the next generation Error Console. From v0.5 includes the Console Filter extension previously available separately from the Console² website.

CSS Reloader

CSS Reloader is an extension that allows you to reload all the CSS of any site without you have to reload the page itself.

DOM Inspector

DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL application. The DOM can be navigated using a two-paned window displaying a variety of different views on the document and all nodes within.

Firefogg

Video and audio encoding for Firefox. With Firefogg you can encode most media files to Ogg and WebM. Firefogg also provides an API to integrate encoding into the upload process.

FireFTP

FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers.

FireUnit

JavaScript Unit Testing Extension

FoxGuide

Display horizontal and vertical floating guides, exactly the way you use it in photoshop. Helps improving layout, placing elements in proper grids, laying out elements symmetrically and structure a design.

FoxyProxy Standard

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

Geolocater

Geolocate you where you want.

GreaseMonkey

Customize the way a web page displays or behaves, by using small bits of JavaScript.

HTML Validator

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon.

HttpFox

An HTTP analyzer addon for Firefox.

iMacros for Firefox

Automate Firefox. Record and replay repetitious work. If you love the Firefox web browser, but are tired of repetitive tasks like visiting the same sites every days, filling out forms, and remembering passwords, then iMacros for Firefox is the solution you’ve been dreaming of!

Jenkins Build Monitor

Monitor Jenkins (http://jenkins-ci.org) builds and display the status on Firefox status bar.

jQuery extension

jQuery and jQuery UI embedded in browser.

JSONovich

Pretty-prints JSON content in the browser for easy, unobtrusive viewing.

JSONView

View JSON documents in the browser.

JSView

If the website you are viewing contains any external js/css files, an icon will appear that says “SS”, “JS”, or both. Each individual file can then be viewed by clicking on the filename. The file will be opened in a new window.

Link Widgets

Eases navigation within sequences of pages (e.g. Web comics, forums, or technical specifications such as the HTML 4 Recommendation) by providing toolbar buttons for the first, previous, next, and last page.

Live HTTP Headers

View HTTP headers of a page and while browsing.

LiveReload

LiveReload refreshes a web page when files change.

MeasureIt

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

Modify Headers

Add, modify and filter the HTTP request headers sent to web servers. This addon is particularly useful for Mobile web development, HTTP testing and privacy.

NoScript

The best security you can get in a web browser! Allow active content to run only from sites you trust, and protect yourself against XSS and Clickjacking attacks.

PageSpeed

Page Speed is an open-source project started at Google to help developers optimize their web pages by applying web performance best practices.

PixelZoomer

PixelZoomer takes a screenshot of the current website and provides various tools for pixel analysis. You can zoom into websites (up to 3200%), measure distances and pick colors with an eye dropper.

Pixlr Grabber

Grabbing screens and pulling images from the web just got a bit easier. With the Pixlr Grabber add-on, you can copy, save, share or even edit your final grabs – including any image or background – with just a right-click.

Poster

A developer tool for interacting with web services and other web resources that lets you make HTTP requests, set the entity body, and content type. This allows you to interact with web services and inspect the results.

QuickJava

Allows quick enable and disable of Java, Javascript, Flash, Silverlight, Images, Stylesheets and Proxy from the Statusbar and/or Toolbar without having to open any dialogs!

Rainbow Color Tools

Color tools for web development. Color picker and eyedropper + saving colors and trying out colors with drag and drop.

Regular Expressions Tester

Testing tool for regular expressions with color highlighting (including submatches) and helpers for creating expressions.

Remove Cookie(s) for Site

A very simple extension to remove all the cookies of currently opened site. It adds an option to the Right Click menu of the page, and a Clear Cookies Button to perform this operation. It displays the status of operation in the status bar.

Screenshot Pimp

Capture, grab, save, download, or copy anything you see in your web browser with only one click! Screenshot pimp is by far the most customizable, and user friendly screenshot toolbar available for both Windows and Mac!

SQLite Manager

Manage any SQLite database on your computer.

Selenium IDE Buttons

Just one simple toolbar button to open Selenium IDE. You need to have installed Selenium IDE: http://seleniumhq.org/projects/ide/

SeoQuake SEO extension

Seoquake is a Firefox SEO extension aimed primarily at helping web masters who deal with search engine optimization (SEO), social media optimization (SMO) and internet promotion. Seoquake allows to investigate many important SEO parameters.

ShowIP

Show the IP address(es) of the current page in the status bar. It also allows querying custom information services by IP (right click) and hostname (left click), like whois, netcraft, etc. Additionally you can copy the IP address to the clipboard.

Stylish

Restyle the web with Stylish, a user styles manager. Stylish lets you easily install themes and skins for Google, Facebook, YouTube, Orkut, and many, many other sites. You can even customize Firefox and other programs themselves.

Tamper Data

Use tamperdata to view and modify HTTP/HTTPS headers and post parameters.

TAW3

You can have an idea, with a single click, of how accesible web sites are.

Tilt 3D

A WebGL-based 3D visualization of a webpage.

Total Validator

Perform many different validations in one go. This multiple validator works with external, internal, or local web pages using a local copy of the desktop tool obtained from http://www.totalvalidator.com/downloads/extensiontool.html.

TryAgain

TryAgain keeps trying to load a webpage when the server cannot be reached.

User Agent Switcher

The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of a browser.

Wappalyzer

Wappalyzer is a browser add-on that uncovers the technologies used on websites.

Web Developer

The Web Developer extension adds various web developer tools to a browser.

Firebug extensions

There exists a lot of extensions for Firebug for a number of different use cases, and a number of them are listed here:

Acebug

Syntax highlighting for the Firebug command line using Ace. Fuzzy auto completion.

Code Coverage v2 for Firebug 0.1

This Firebug extension is used to report the Javascript code coverage.

CSS Usage

Firebug extension to view which CSS rules are actually used.

Firecookie

Firecookie is an extension for Firebug that makes possible to view and manage cookies in your browser.

Firefinder

Finds HTML elements matching chosen CSS selector(s) or XPath expression.

FirePHP

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

FireQuery

Firebug plugin for jQuery development.

friendly bug

Makes firebug friendlier and easier to use

Inline Code Finder for Firebug

Inline Code Finder is an add-on to Firebug, to be able to find HTML elements with any of these issues: Inline JavaScript events, Inline style, javascript: links.

FireRainbow

Javascript syntax highlighting for Firebug.

NetExport

NetExport is a Firebug extension that allows exporting all collected and computed data from the Net panel. The structure of the created file uses HTTP Archive (HAR) format (based on JSON).

Pixel Perfect

Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.

YSlow

YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.

There are even more extensions available for Firebug, available in the Firebug Extensions wiki.

View full post on Mozilla Hacks – the Web developer blog

Tagged on: , , ,

20 thoughts on “Firefox – tons of tools for web developers!

  1. Robert Nyman

    With Firebug you only change the layout and other things of the web page you have loaded in your own web browser for testing purposes. Those changes are only available to you, and if you reload the page they will be gone.

  2. Caitanya Dasi

    Please Help me! I thought I was creating a blog page, and used Firebug. However, this did not happen (doesn’t matter); instead the page layout for my email and facebook is now the layout for what I thought was a blog page.
    It is driving me crazy, as there is a huge 2″ black margin at the top of the page, and everything is sort of scrunched up. How do I undo this layout?
    Yes, I am a dummy, and did not know what I was doing. Thank you.

  3. pd

    I can understand how Firebug might adopt the new picker’s lightbox effect and it’s local HTML breadcrumb/path/branch speech bubble/door hanger. I guess it would be possible to limit the width of the new structured HTML view, get rid of it’s non-window panel non-title bar and just style it differently for placement inside the Firebug HTML tab. However unless Firebug gets an (IMHO overdue) option to show/hide the RHS section, wide structured HTML views will not be possible.

    On this note Jan, is there a core reason why such a feature (show/hide the Firebug RHS section) has never been implemented? If not, if you think it’s something an extension might be able to add to Firebug, I’d be interested in trying to write such an extension. I’m forever dragging the separator left and right to try and view verbose vendorware HTML with duplicate class and id values stretching out the tags.

  4. Jan 'Honza' Odvarko

    > I do not see much evidence of Firebug inspiration in the new
    > developer tools thus far.
    Yes, it’s just too soon. Also note that Firebug wants to keep its UI and share rather the backend services/APIs (one exception could be the inspector/highlighter).

    Honza

  5. Jan 'Honza' Odvarko

    > Web Console does not clear the log on page refreshes.
    You can check a “Persist” button in the Firebug Console panel and logs will be persisted across page reloads. The same for the Net panel.
    Honza

  6. Robert Nyman

    You will always have developers who want native tools and those who won’t. Mozilla wouldn’t be building Native Developer Tools unless a majority wanted them and we believed it was in the best interest for the future.

  7. Robert Nyman

    Thanks for your opinions. As you understand, there are a lot of different opinions, and I believe the people in charge of the Developer Tools will form the best decision based on all that feedback and the needs they see.

  8. Robert Nyman

    I can’t comment on the design specifically, but naturally it, as well as the tools themselves, goes through a number of iterations and testing.

  9. Robert Nyman

    Not sure at this time of writing, but my guess would be exposed APIs rather than a XUL-based approach.

  10. James

    wow, this is probably one of the most comprehensive list of tools ive seen in a long time. Great posts!

  11. Rahul

    Hi Robert

    I want to submit, this add on to the list, take a look robert

    friendly bug 1.8.0 used with firebug

    and thank you for the compilation..it helped me a lot

  12. pd

    I should say, to be objective, that the new inspector’s efficiency does seem very encouraging. If Firebug could integrate that without losing any related functionality, that’s looks like a huge win. I’m not sure however about the ‘lightbox’ styling. At first it really does help to highlight the element. However I doubt it would work well on a site with a dark colour scheme. What do others think? Maybe there could be some sort of simple option (caps lock) to invert the colour of the semi-opaque effect around the hovered/selected element? Additionally it would be handy, maybe this is one for extension writers, to be able to modify the opacity.

    I really don’t like the HTML viewer’s UI though and the Inspector and the HTML tree are pretty much hand in hand. The UI provides a lot of width for viewing bloated code which is great. It’s annoying that Firebug’s RHS section cannot be temporarily disabled for this purpose. However that should be a simple adjustment to the otherwise fine Firebug UI, rather than going with the completely floating non-window that the initial native HTML UI has opted for. Suggestion: create a mode whereby all the new native tools UI can be organised identically to Firebug with the addition of an ability to hide the Firebug RHS panel (the bit where the Style, Computed, DOM and Layout tabs live).

    As for the sidebar, I just do not understand that at all. Please stick to the Firebug simplicity of Style, Computer and DOM tabs.

  13. pd

    It’s great to hear the tools will be available to extension writers. However will this be in the relatively shallow form of a Jetpack API or a deeper form of old school XUL-based extensions?

  14. pd

    With respect Robert, I do not see much evidence of Firebug inspiration in the new developer tools thus far. Firstly the UI is completely differently structured. I absolutely hope this is temporary but I would hope that Mozilla’s developers are talented and zippy enough to do releases that are closer to finished than what the new developer tools look like. So I presume there’s two possibilities; the tools are close to what they will look like, or Mozilla’s native tools developers are not quite as good as I’d hope. Which is it? Who said that the HTML viewer had to be some randomly floating pallete/dialog/something? There’s much more Adobe influence in that decision, not Firebug’s nicely placed sub windows. Why make the style viewer a sidebar that crunches the viewport space, along with the console from the top of the viewport as well? Did some bright young spark come along and state the tools have to dictate and hog as much screen/viewport space as is possible, leaving the actual web page looking like a postage stamp? We don’t all develop for the mobile web only. Not all of us as sucked into the narrow columnar design paradigm like every wordpress theme or facebook. They have invented widescreen monitors, after all! Anyway, sorry I’m ranting a bit.

    It’s great to see so many people willing to stand up to Mozilla in these comments and tell them how they feel. Mozilla must listen!

  15. pd

    I hope this is not just a semantics correction reply for the sake of it. However I’d say Firebug is more than fantastic, it’s critical. It’s what a hammer is to a carpenter; a trowel is to a bricklayer; socket wrench to a mechanic … True browsers have *tried* to copy Firebug but in the case of IE, have failed wholeheartedly. I reckon the best way to discuss web developer is BF (before Firebug) and AF (after Firebug). Yet it is far from perfect and could do so much better and so much more. Isn’t it time to be admitting that as amazing as volunteer contributors can be, Mozilla should be committing full time resources to developer tools in general, not just Honza (champion though he is) compared to how many working full time on (native) “Developer Tools”. This is what I object to: reducing the priority given to Firebug. Let’s not forget that it was built initially by one man: all praise to Joe! AFAIK Joe man didn’t have to deal with a whole lot of politics and shuffling of priorities.

    Please Mozilla, focus on providing the best developer tools, not merely native tools or tools developed under this or that project/politics/auspices.

  16. pd

    I don’t think Robert you’re whatever will be, will be approach is acceptable so thanks Honza for the update. However there should be more than one full time Firebug developer if Mozilla is serious about supporting developers IMHO.

    I guess the most important thing is that Firebug never goes backward or allows it’s functionality to be replaced by inferior code simply because that code is native.

    It’s highly amusing that there seems to developers and non-developers who don’t necessarily want native dev tools. I have been along for the Firefox ride since the beginning. I’ve never contributed code, unfortunately, but I like to follow the strategy and direction of the project. In this time I’ve seen so many Firefox / Mozilla people rebut the need to have more functionality built-in to the browser. Now on the developer tools front, it’s the opposite. Crazy.

    Long live Firefox, long live high-quality web developer tools!

Leave a Reply