Web Developer Plug-Ins

Wednesday, December 9, 2009


  • We have meeting topics scheduled through April
  • January: CFA Online Admission application
  • February: Web Security
  • March: Fonts/Copyrights, Video Tags, HTML 5
  • April: Know Your Blackhat: Common Web & Server Vulnerabilities and Exploits


  • Co-chair nominees: Matthew Munsey, Chris Foree
  • Matthew elected by a majority.
  • Web Developer nominees: Cheri Darling, Tracey Hummel, Samrat Miller
  • Samrat elected unanimously.

Presentation: Web Developer Plug-ins
Presenter: Matthew Munsey, College of Fine Arts

  • Web Developer Toolbar (Firefox)
    • Allows for manipulation of page view
    • Feature Categories
      • Cookies
      • CSS (Disable, Edit, View)
      • Forms
      • Images
      • Information (ID & Class Details)
      • Miscellaneous (Ruler)
      • Outline (Block-level) – This is very cool especially with ID & class details
    • Question: Which tools do you use from the Web Developer Toolbar that you prefer over Firebug's equivalents?
    • Answer: Resize to custom dimensions, Validate CSS/HTML/feed
  • Firebug (Firefox)
    • Activated by the bug icon in the lower-right corner
    • HTML tab allows for:
      • Collapsible source view
      • Live css editing
      • Viewing of CSS cascade overrides
      • Inspect tool allow one to find an element in the source
      • Editing HTML live
      • Viewing Layout – visual representation of box model
    • Question: Does Firebug work with the IETab extension?
    • Answer: No.
    • Net tab allows for debugging HTTP Headers and POST forms.
    • Pixel Perfect – separate add-on that plugs into Firebug. It will put an image overlay over your page at a specified opacity.
    • Question: Does Firebug work on every operating system that Firefox runs on?
    • Answer: Yes
  • WAVE Toolbar (Firefox)
    • Shows accessibility problems, e.g., missing alt attribute.
    • Allows one to see heading structure.
    • Question: Does it display tab order?
    • Answer: Yes, under the "Structure/Order" tab.
  • MeasureIt (Firefox) – allows for measuring elements on a page.
  • Dust-Me Selectors (Firefox) – for finding unused CSS selectors.
  • Lazarus: Form Recovery (Firefox) – recover forms. Great for testing!
    • Question: How does it handle security?
    • Answer: Check Options -> Security.
  • Question: What are the green checkboxes in the upper right?
  • Answer: They're part of the Web Developer Toolbar.
  • Firebug Lite (IE, Safari, Opera) – a stripped down clone of Firebug
    • Inspect is buggy
  • Other tools
    • CSS Vista
    • IE Developer Toolbar
    • Debug bar for IE
    • IE Tester
    • IE Tab (Firefox)