Firebug 1.5: Editing, Debugging, and Monitoring Web Pages Arm yourself to destroy UI and JavaScript bugs Chandan Luthra Deepak Mittal BIRMINGHAM - MUMBAI 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 Editorial Team Leader Chandan Luthra Gagandeep Singh Deepak Mittal Project Team Leader Lata Basantani Reviewers Balaji D Loganathan Michael Ratcliffe Project Coordinator Poorvi Nair Michael Sync Proofreader Acquisition Editor Aaron Nash Dilip Venkatesh Development Editor Graphics Dilip Venkatesh Geetanjali G. Sawant Technical Editors Production Coordinator Gaurav Datar Adline Swetha Jesuthas Rukhsana Khambatta Cover Work Adline Swetha Jesuthas Copy Editor Sanchari Mukherjee Indexer Hemangini Bari 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 properly. In 2008 he began logging Firebug issues and soon began spending lots of time fixing bugs to make his work easier. He worked for a time on Firebug Lite but spends most of his "spare time" now working on improving the Firebug Inspector, which he likes to think of as "Aardvark on Steroids." He would like to thank his wife Sabine for her patience during the many hours spent performing technical reviews on this book. Michael Sync has lately been associated with Memolife as a Solution Architect, responsible for building their products using Silverlight and other .Net technologies. Prior to venturing into this, he was creating a niche in Web Application Development using ASP.NET, AJAX, JavaScript, and so on. He had always believed in the concept of "Sharing Knowledge", which is the key to building his in-depth understanding of the technology. That's the main reason why he always tries to participate in public forums and local newsgroups for helping fellow technologists; benefits are also received, as learning is a two-way process. Being a member of Microsoft WPF/Silverlight Insider team, he really enjoys playing with early drops of Silverlight and giving his feedback to the team. Table of Contents Preface 1 Chapter 1: Getting Started with Firebug 7 What is Firebug? 7 The history of Firebug 8 The need for Firebug 8 Firebug capabilities 9 Installing Firebug on different browsers 9 Installing Firebug on Firefox 10 Installing Firebug on non-Firefox browsers 10 Opening and closing Firebug 11 Firebug modes 11 Dock view 12 Window mode 12 Summary 13 Chapter 2: Firebug Window Overview 15 Console tab 15 Command line JavaScript 16 Errors and warnings 17 Status bar error indicator 18 Errors can be descriptive and informative 19 Executing JavaScript commands 19 HTML tab 20 The hierarchy of DOM nodes (the HTML source panel) 21 Options for HTML source panel 22 Editing HTML on the fly 23 Editing an existing attribute of HTML element 23 Editing an HTML element 24 Logging events 26