Monday, March 28, 2011

Which Web Development Browser Plugins Do You Find Useful?

I find that when I am doing web development there are a few browser plugins that are very useful to me.

For Firefox I am using:

Firebug - Great for inspecting the HTML elements and working with CSS.

YSlow for Firebug - Developed by Yahoo! and gives timing and tips about page resources.

Live HTTP headers - Lets you inspect the headers that are sent to your browser.

For IE I am using:

Fiddler - "a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet"

I am always looking for other great tools to use. So what is everyone else using?

From stackoverflow
  • IE Developer Toolbar
    Venkman debugger for Firefox

  • In addition to what you have:

    Web Developer toolbar adds alot of extra functionality (cookie, form, image inspection, viewing generated DOM, etc).

    HTML Validator - great for a quick check to make sure your pages are valid. Also good when there are display errors, you can quickly see if it's from improperly generated HTML.

    ColorZilla - I use this alot to pull exact colors from a page to the clipboard.

    cletus : I typically use Color Cop for extracting colors. It's a Windows app (free).
  • Fireshot -- takes screenshots and annotates them convieniently, helpful.

    cletus : +1 for Fireshot. Never seen that before. It looks awesome.
  • Firecookie and console 2

  • How about twitterfox to help twitter with developer colleagues and friends.

  • Extended Statusbar modifies the status bar to show speed, percentage, time, and loaded size (useful for seeing how many images are being loaded, page weight, etc)

    ShowIP Displays the IP address of the current page in the status bar

    external IP Displays your external IP address in the statusbar

    On a side note, I also find it useful to run these extensions in FirefoxPortable, so that I've got a browser setup specifically for development work with the relevant extensions installed, and to avoid slowing down or destabilizing my primary browser (eg. Firebug used to crash my browser all the time when accessing Gmail).

  • URL Params (Firefox extension) to view the POST and GET parameters of a webpage. Useful for checking your forms.

  • MeasureIt

    For getting exact size of items rendered on a page in FF.

    tj111 : This is available in the web developer toolbar as well.
  • HttpFox

  • Firebug - Also let's me see the JS requests being sent from one page to another and which data is being sent.
    - I can see the data inside the JS variables
    - Replaces Error Console. It also outputs in the statue if it has found an error, so I can inspect it.
    - Good for seeing the structure of the html when developing AJAX application.

  • The one that prevents you from accessing StackOverflow is pretty useful.

  • All of these are Firefox plugins.

    • Firebug for Javascript and CSS debugging. Firebug allows for example to examine DOM tree while javascript modifies it. Firebug is my main tool.

    • Live HTTP Headers for looking at what data actually is inside request and responses.

    • Web Developer toolbar contains smaller utilities. For example it can validate html and CSS.

    • Dust Me Selectors finds which pieces of CSS are unused.

  • I can't live without DebugBar (IE only)

    It allows you to view the source (syntax highlighted) of any frame, view the DOM, view JS and CSS. It also has a rather handy colour picker which you can drag onto any part of your screen, it will then put the #RRGGBB in to the clipboard.

    I also use Fiddler2 quite a bit.

    rball : DebugBar costs moola. Darn...
    Antony Scott : not much though, and I think it's free for personal use.

0 comments:

Post a Comment