Enhancing Web Development with Browser Add-ins and Toolbars for Presentation Tier Optimization

Table of Contents

Browser Add-ins and Toolbars Supporting Development of the Presentation Tier

3292708267_f056885d4a.jpg

Background and Problem

Significant framework changes in last two years

jQuery and plug-in development combined with Ajax. Frameworks have improved in the past couple of years for Web Development which increases the complexity of the presentation tier.

Rendered HTML may diverge from presentation to user

Themed plug-ins and intermediate page states manipulate the DOM. Polling would update underlying HTML.

Industry best practices requires improved separation of markup from presentation.

Application or UI limits on testing

Validators (client XSS rules) or CSRF checks limit classic review strategies.

Scope

Three add-ins and one toolbar

Tamper Data - View and manipulate HTTP requests
Web Developer - Inspect page update user state
Firebug - Object introspection and debugging
MSIE Debugger - Firebug for MSIE

Productivity tools, build tools, IDEs, etc. not discussed

Google: "firefox add-ins"

Context

When talking about each of the tools some effort will be made to discuss the following:

When Used: SDLC

Development, integration, maintenance, testing, debugging.

Why Used: Tensions

Performance (PLT), security (CSRF), best practices (Progressive Enhancement, Graceful Degradation), product delivery, UI/UX/product requirements.

What Benefits: External

Add-ins and Toolbars

Tamper Data (Jason)

Replaces: Proxy log or accesslog

Scenario: Form support and data or load activity

Manipulate form submission for neighborhood:

http://www.classmates.com/community/add

Scenario: Monitor web bugs or Ajax calls

Web Developer (Jason)

Replaces: Test JSP updates

When: Development, review

Show: Disable cookies

Show: Consolidated styles

Scenario: Find source of cascaded styles

Scenario: Debug forms

Show: Simplify session clearing

Goal: UI requirements

Firebug: HTML (Jason)

Replaces: View source

When: All

Show: Inline manipulation of content

Goal: Progressive enhancement

Firebug: Console (Jason)

3293531994_17a2fbe6d8.jpg

Replaces: Test JavaScript updates

When: All

Show: jQuery manipulation

Scenario: In-place binding of plug-ins

Firebug: DOM (Jason)

3293814102_222e31b2ef.jpg

Replaces: Conditional / for in JavaScript

When: Debugging

Show: Base structure and iframe support

Scenario: Loading of third-party libraries

Firebug: Net (Stephen)

Replaces livehttpheaders

Show: Requests on RUHP

Stage: Debugging and performance

Firebug: CSS (Stephen)

Replaces: Test JSP updates

Show: Live update of styles

Scenario: Quickly tweak CSS

Firebug: Script (Stephen)

Replaces: JavaScript alert() debugging

Show: Stop on errors and breakpoints

Show: Popup control

Scenario: Maintain existing pages or debug new features

Firebug: YSlow (Stephen)

Show: Score on page structure

Stage: Maintenance

MSIE Debugger (Stephen)

Show: Stop on errors and breakpoints

Author: Jason Walsh

j@wal.sh

Last Updated: 2025-07-30 13:45:27

build: 2025-12-23 09:11 | sha: a10ddd7