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
- CSS (Disable, Edit, View)
- 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)