PacktLib: Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Credits

About the Authors

About the Reviewers

Preface

Getting Started with Firebug

What is Firebug?

The history of Firebug

The need for Firebug

Firebug capabilities

Installing Firebug on different browsers

Opening and closing Firebug

Firebug modes

Summary

Firebug Window Overview

Console tab

HTML tab

CSS tab

Script tab

DOM tab

Net tab

Summary

Inspecting and Editing HTML

Viewing source live

Seeing changes highlighted

Modifying the source on the fly

Inspecting page components, editing, and reloading

Searching within an HTML document

Finding an HTML element on the page

Copying HTML source for an HTML element

Setting breakpoints on HTML element

Summary

CSS Development

Inspecting cascading rules

Preview colors and images

Tweaking CSS on the fly

Enabling and disabling specific CSS rules

Inspecting our stylesheet

Modifying CSS from Firebug's UI

Inspecting and tweaking the box model

Searching under the CSS tab

Summary

JavaScript Development

The command line API

The console API

JavaScript debugging

Summary

Knowing Your DOM

Inspecting DOM

Modifying DOM on the fly

Adding/removing the DOM elements' attributes

JavaScript code navigation

Summary

Performance Tuning Our Web Application

Network monitoring

Breaking down various requests by type

Examining HTTP headers

Analyzing the browser cache

XMLHttpRequest monitoring

How to find out the download speed for a resource

Firebug extensions for analyzing performance

Summary

AJAX Development

Tracking XmlHttpRequest

Viewing live modifications on DOM

Debugging AJAX calls using properties of a console object

Summary

Tips and Tricks for Firebug

Magical cd()

The hierarchical console

Configuring Firebug to our taste

Summary

Necessary Firebug Extensions

YSlow

Firecookie

Pixel Perfect

Firefinder

FireQuery

CodeBurner

SenSEO

Page Speed

Summary

Extending Firebug

Setting up an extension development environment

Getting started with a small "Hello World!" extension of Firebug

Taking "Hello World!" to the next level

Summary

A Quick Overview of Firebug's Features and Options

A Quick Overview of Firebug's Features and Options

A Quick Overview of Firebug's Features and Options

A Quick Overview of Firebug's Features and Options

A Quick Overview of Firebug's Features and Options

A Quick Overview of Firebug's Features and Options

Index