My essential firefox extensions
Autor: Gabriel Ricci | Publicado: 2011-11-23T16:09:00-02:00

Hello, today I want to share the extensions I use in Firefox when I'm developing a website.  Firebughttp://getfirebug.com/Firebug integrates with Firefox to put a wealth of web development tools  at your fingertips while you browse. You can edit, debug, and monitor  CSS, HTML, and JavaScript live in any web page.  MeasureIthttps://addons.mozilla.org/en-US/firefox/addon/measureit/Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.  JSONViewhttp://jsonview.com/JSONView is a Firefox extension that helps you view JSON documents in the browser. <!--more-->Besides the normal extensions, there are also extensions that work only with firebug.  Code Coverage for Firebughttp://code.google.com/p/code-coverage-for-firebug/downloads/listThis Firebug extension is used to report Javascript code coverage  CSS usagehttps://addons.mozilla.org/en-US/firefox/addon/css-usage/Firebug extension to view which CSS rules are actually used.  EventBughttp://getfirebug.com/wiki/index.php/Firebug_Extensions#EventbugEventbug is a Firebug extension that lists all of the event handlers on the page grouped by event type  Firefinderhttp://robertnyman.com/firefinder/Firefinder is an extension to Firebug (in Firefox) and offers the functionality to, in a quick way, find HTML elements matching chosen CSS selector(s) or XPath expression. It allows you to instantly test your CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted. Additionally, you can auto-select elements when hovering or via the context menu.  FireFontFamilyhttps://addons.mozilla.org/en-US/firefox/addon/firefontfamily/?src=apiHighlight the rendered font-family in Firebug CSS panel  Firepickerhttp://thedarkone.github.com/firepicker/Adds a small color picker dialog when editing CSS rule in Firebug. The addon scans for values that can be parsed as CSS colors (#abc, rgb(1,2,3), blue, red etc.) and displays them in a drop-down list right below the firebug's CSS editor box. Clicking on the color value in the drop-down brings up a color picker dialog.  FireQueryhttp://firequery.binaryage.com/FireQuery is a Firefox extension integrated with Firebug.    jQuery expressions are intelligently presented in Firebug Console and DOM inspector  attached jQuery data are first class citizens  elements in jQuery collections are highlighted on hover  jQuerify: enables you to inject jQuery into any web page  jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)    Flashbughttp://blog.coursevector.com/flashbugFlashbug is a Firebug extension for Flash. It displays all the running .SWF file trace output and requires Flash Player Debugger to work properly.    Utilizes Firebug&rsquo;s built in search feature &ndash; When you search for any words in the logs, the words will be highlighted in real-time.  Displays Trace logs &ndash; Displays the traces emitted from all Flash instances playing in any browser.  Displays Policy logs &ndash; Displays the policy log traces emitted from the Flash Player. These traces usually occur when using cross-domain policies or loading assets from a different domain.  Configure Debug Player settings &ndash; The Flash Player itself can be configured to trace out data differently. Those options are available in the preferences window.  Trace filters &ndash; There are a few builtin filters to display your traces differently.  Built-in Links &ndash; Any URLs that are detected in the traces will be dot underlined.  Read SharedObject &ndash; Read any Shared Objects associated with a page.  Read AMF/Remoting Request/Response Data &ndash; View AMF data sent to and from the page to the server.  Read SWFs &ndash; View SWF internal assets and data. Export SWF assets directly from Flashbug.    Inline Code Finder for Firebughttp://robertnyman.com/inline-code-finder/Inline Code Finder is a tool to traverse through all elements in a web  page, and when it finds a HTML element with any of these, it will  highlight them:    Inline JavaScript events  Inline style  javascript: links    Page Speed for Firebughttp://code.google.com/speed/page-speed/Page Speed is a tool for optimizing the performance of             web pages, it allow you to evaluate the performance of                 your web pages and to get suggestions on how to                 improve them.  &nbsp;  Pixel Perfect for Firebughttp://www.pixelperfectplugin.com/Overlay a web composition over top of the developed HTML. By toggling the composition on and off, the developer can visually see how many pixels they are off in development.Pixel percect has an opacity option so that you can view the HTML below the composition. By being able to see both the composition and the HTML you can now simultaneously use Firebug while Pixel Perfect is still in action.