Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Table of Contents

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Credits

About the Authors

About the Reviewers

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code for the book

Errata

Piracy

Questions

1. Getting Started with Firebug

What is Firebug?

The history of Firebug

The need for Firebug

Firebug capabilities

Installing Firebug on different browsers

Installing Firebug on Firefox

Installing Firebug on non-Firefox browsers

Opening and closing Firebug

Firebug modes

Dock view

Window mode

Summary

2. Firebug Window Overview

Console tab

Command line JavaScript

Errors and warnings

Status bar error indicator

Errors can be descriptive and informative

Executing JavaScript commands

HTML tab

The hierarchy of DOM nodes (the HTML source panel)

Options for HTML source panel

Editing HTML on the fly

Editing an existing attribute of HTML element

Editing an HTML element

Logging events

CSS tab

CSS inspector

List of CSS files

Modifying CSS

Script tab

DOM tab

Net tab

Summary

3. Inspecting and Editing HTML

Viewing source live

Seeing changes highlighted

Modifying the source on the fly

How to modify the value of an HTML attribute

How to add a new attribute to an existing HTML element

How to delete an HTML element

How to modify the source for an HTML element

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

4. 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

5. JavaScript Development

The command line API

$(id)

$ $$(selector)

$x(xpath)

dir(object)

dirxml(node)

clear()

inspect(object[, tabName])

keys(object)

values(object)

debug(fn) and undebug(fn)

monitor(functionName) and unmonitor(functionName)

monitorEvents(object[, types])

unmonitorEvents(object[, types])

profile([title]) and profileEnd()

Columns and description of the profiler

The console API

console.log(object[, object, ...])

console.debug(object[, object, ...])

console.info(object[, object, ...])

console.warn(object[, object, ...])

console.error(object[, object, ...])

console.assert(expression[, object, ...])

console.dir(object)

console.dirxml(node)

console.trace()

console.group(object[, object, ...])

console.groupCollapsed(object[, object, ...])

console.groupEnd()

console.time(name)

console.timeEnd(name)

console.profile([title])

console.profileEnd()

console.count([title])

JavaScript debugging

Steps to debug JavaScript code with Firebug

Conditional breakpoints

Summary

6. Knowing Your DOM

Inspecting DOM

Filtering properties, functions, and constants

Modifying DOM on the fly

Auto-complete

Losing the starting element

Adding/removing the DOM elements' attributes

Removing attributes

Adding attributes

JavaScript code navigation

Summary

7. Performance Tuning Our Web Application

Network monitoring

Description of information in the Net panel

Load-time bar color significance

Browser queue wait time

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

8. AJAX Development

Tracking XmlHttpRequest

Request/response headers and parameters

GET/POST request

Viewing live modifications on DOM

Debugging AJAX calls using properties of a console object

console.debug(object[, object, ...])

console.assert(expression[, object, ...])

console.dir(object)

Summary

9. Tips and Tricks for Firebug

Magical cd()

The hierarchical console

Configuring Firebug to our taste

Summary

10. Necessary Firebug Extensions

YSlow

Firecookie

Pixel Perfect

Pixel Perfect options menu

Firefinder

FireQuery

CodeBurner

SenSEO

Page Speed

Summary

11. Extending Firebug

Setting up an extension development environment

Setting up the development profile

Development preferences

Getting started with a small Hello World! extension of Firebug

The chrome.manifest file

The install.rdf file

The helloWorldOverlay.xul file

The helloWorld.js file

Packaging and installation

Taking Hello World! to the next level

The prefs.js file

The helloWorld.js file revisited

Summary

A. A Quick Overview of Firebug's Features and Options

Keyboard and mouse shortcuts reference

Global shortcuts

HTML tab shortcuts

HTML editor shortcuts

HTML inspect mode shortcuts

Script tab shortcuts

DOM tab shortcuts

DOM and watch editor shortcuts

CSS tab shortcuts

CSS editor tab shortcuts

Layout tab shortcuts

Layout editor shortcuts

Command line (small) shortcuts

Command line (large) shortcuts

Console API reference

Command line API reference

Firebug online resources

Features expected in future releases of Firebug

Firebug 1.6

Some improvements in this version

Scrolling panel tab bar

FBTest support for Firebug extensions

Locales as extensions

Extension points for panel buttons and main menu options

Breakpoint column for the HTML panel

Break on next CSS change and CSS breakpoints

Options for the break on next feature (mainly a UI-related issue)

Net panel improvements

Script panel improvements

JavaScript function support

Firebug 1.7

Separate modules and panels

Issue: File names versus folder names

Components replaced by SharedObjects

Issue: SharedObject API

Recode TabWatcher/DOMWindowWatcher

Sandboxed extension loading

Memory panel

Index

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Deepak Mittal

Chandan Luthra

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Copyright © 2010 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: April 2010

Production Reference: 1300310

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 978-1-847194-96-1

www.packtpub.com

Cover Image by Filippo Sarti (<[email protected]>)

Credits

Authors

Chandan Luthra

Deepak Mittal

Reviewers

Balaji D Loganathan

Michael Ratcliffe

Michael Sync

Acquisition Editor

Dilip Venkatesh

Development Editor

Dilip Venkatesh

Technical Editors

Gaurav Datar

Rukhsana Khambatta

Copy Editor

Sanchari Mukherjee

Indexer

Hemangini Bari

Editorial Team Leader

Gagandeep Singh

Project Team Leader

Lata Basantani

Project Coordinator

Poorvi Nair

Proofreader

Aaron Nash

Graphics

Geetanjali G. Sawant

Production Coordinator

Adline Swetha Jesuthas

Cover Work

Adline Swetha Jesuthas

About the Authors

Chandan Luthra is a Software Development Engineer with IntelliGrape Software, New Delhi, India—a company specializing in Groovy/Grails development. He is an agile and pragmatic programmer and an active participant at local open source software events, where he evangelizes Groovy, Grails, Jquery, and Firebug. Chandan is a Linux and open source enthusiast. He also involves himself in writing blogs and is an active member on various tech-related mailing lists. He has developed web applications for various industries, including entertainment, finance, media and publishing, as well as others.

He loves to share his knowledge and good coding practices with other team members in order to hone their development skills. In his free time, he loves to contribute to open source technologies.

Chandan also loves to code in jQuery and Firebug, which makes development very easy for him. He is a very fond user of Firebug and has been using it since 2007.

I would like to thank my family for their love and support during my far-flung adventures into esoteric nonsense. Thanks also to all my cooperative colleagues at IntelliGrape for their feedback and suggestions. I would also like to thank Deepak Mittal for co-authoring and motivating me to write this book. Finally, I wish to thank Dilip Venkatesh (Acquisition Editor at Packt), Poorvi Nair (Project Coordinator at Packt), Micheal Sync (Reviewer), Micheal Ratcliffe (Reviewer), and Balaji Loganathan (Reviewer) for giving a perfect shape to this book. Special thanks to S. Vivek Krishna for his help on the Preface of the book.

Deepak Mittal is a software developer based in New Delhi, India, and he has been involved with software engineering and web programming in Java/JEE world since the late 1990s. Deepak is a Linux and open source enthusiast. He is an agile practitioner and speaks about open source, agile processes, and free software at various user group meetings and conferences. He has designed and built web applications for industries including pharmaceutical, travel, media, and publishing, as well as others. He loves to explore new technologies and has been an early-adopter of quite a few mainstream technologies of today's world.

In early 2008, he co-founded IntelliGrape Software, an agile web application development company focused on Groovy and Grails. At IntelliGrape, he has been occupied with building world class applications on Grails and also mentors and trains other team members.

Deepak is a veteran user of Firebug and has been using it since 2006.

I want to thank all my colleagues at IntelliGrape for their valuable feedback and suggestions, my family for putting up without me for weeks, and all the contributors of Firebug. My special thanks go to Dilip Venkatesh (Acquisition Editor at Packt), Poorvi Nair (Project Coordinator at Packt), Chandan Luthra (my co-author), and all the reviewers of the book.

About the Reviewers

Balaji D Loganathan has 10+ years of experience in the software field, is a CEO and Co-founder of Spritle Software—a software development company in Chennai, India. Balaji is an Agile Guru specializing in Agile Offshore, a Certified Scrum Master. Balaji has a Master's degree in IT from the RMIT, Australia and a Bachelors Degree in Engineering from the Annamalai University, India.

When Michael Ratcliffe was 9 years old he saw a movie called Wargames. Like many kids his age he became very interested in computers. A few weeks later he was playing Roland in the Caves on a friend's Amstrad CPC 464 when the game crashed and the command prompt displayed Illegal Operation. Believing that he had hacked something, he decided that he wanted to become a full time hacker and therefore became much more determined to learn how computers work and what can be done with them.

At 12 years of age, his parents bought him an Acorn Electron Microcomputer as a Christmas present. Within 6 months he had written his first game, Wargames, in BBC Basic. By the time he was 14, he was regularly writing programs in 6502 Assembly language and would regularly send pokes (infinite lives, invulnerability, and so on) to computer magazines to help people with their new games.

At 15 years of age, he started work in IT as a support engineer. His use of programming languages extended to Turbo C, C++, Pascal, Delphi, C#, VB, VBScript, VB.NET, HTML, JavaScript, ASP, PHP, Perl, and so on. Some years later he discovered that he was spending a large amount of time writing tools to help his colleagues with their work and decided that he should get the paper qualifications he would need. He started as a computer science major but, after receiving a ton of job offers in the field, he just dropped out of university and has been professional ever since.

Michael is currently working for Comartis AG, Switzerland on e-Learning software called i-qbox Human Performance Suite. He works daily with VB.NET, C#, and JavaScript but prefers JavaScript, claiming that its quirks just make the language more fun. As the JavaScript Guy he uses Firebug to get his work done