Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Arm yourself to destroy UI and JavaScript bugs

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Starting
Chandan Luthra, Deepak Mittal

Arm yourself to destroy UI and JavaScript bugs
$20.99
$34.99
RRP $20.99
RRP $34.99
eBook
Print + eBook
$12.99 p/month

Want this title & more? Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.
+ Collection
Free sample

Book Details

ISBN 139781847194961
Paperback224 pages

About This Book

 

  • Expand your toolkit by learning to use Firebug to help you monitor, debug, develop and edit web pages on the fly
  • Create your own Firebug extensions and learn about popular third-party extensions
  • Covers JavaScript, AJAX, and CSS development
  • Covers all of Firebug's features
  • Clear explanations with easy-to-follow examples of HTML and JavaScript

Who This Book Is For

This book is written for frontend web developers building software and pages using HTML, CSS, JavaScript, and AJAX, who want to learn Firebug for the reasons outlined above. The book assumes that readers have a very basic knowledge of HTML, JavaScript, and CSS. The examples in the book can be understood by someone who has just been introduced to web development.

Table of Contents

Chapter 1: 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
Chapter 2: Firebug Window Overview
Console tab
HTML tab
CSS tab
Script tab
DOM tab
Net tab
Summary
Chapter 3: 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
Chapter 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
Chapter 5: JavaScript Development
The command line API
The console API
JavaScript debugging
Summary
Chapter 6: Knowing Your DOM
Inspecting DOM
Modifying DOM on the fly
Adding/removing the DOM elements' attributes
JavaScript code navigation
Summary
Chapter 7: 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
Chapter 8: AJAX Development
Tracking XmlHttpRequest
Viewing live modifications on DOM
Debugging AJAX calls using properties of a console object
Summary
Chapter 9: Tips and Tricks for Firebug
Magical cd()
The hierarchical console
Configuring Firebug to our taste
Summary
Chapter 10: Necessary Firebug Extensions
YSlow
Firecookie
Pixel Perfect
Firefinder
FireQuery
CodeBurner
SenSEO
Page Speed
Summary
Chapter 11: 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

What You Will Learn

 

  • Explore Firebug's tabs and their functions
  • Understand how to use Firebug to inspect, edit, search, and play with the HTML source of the document
  • Get to grips with useful tools and utilities provided by Firebug for CSS development
  • Learn the command-line API and console API of Firebug and debugging JavaScript
  • Modify the values of properties and constants of any DOM object using Firebug
  • Discover various ways to analyze the performance of your web application on the browser
  • Learn how to track XmlHttpRequest and Response as well as debugging AJAX calls
  • Tips and tricks to experiment with the features that Firebug provides
  • Explore Firebug extensions like YSlow, FireCookie, and Page Speed that are useful for development and Performance tuning
  • Develop a Firebug extension and learn how to set up a development environment, file, and directory structure for it

In Detail

With the advent of RIA (Rich Internet Applications), most web pages are driven by a combination of JavaScript, AJAX, CSS, and so on. Web developers and designers find it hard to debug and fix the issues that crop up on the client side. Firebug is a wonderful toolkit to have in your arsenal for handling all such issues. This book covers all of Firebug's features and will help you utilize its capabilities with maximum efficiency. AJAX development and debugging is not one of the easiest tasks; this book explains step-by-step, how to develop and debug AJAX components in your web page in a very easy way, thereby increasing your productivity. Topics like performance tuning of the web page are covered in detail.

This book discusses how to become more efficient in various aspects of web development by using Firebug. It is a very easy-to-understand, step-by-step guide that explains all the features of Firebug with concise and simple examples. With this book in hand, you will be able to deal with the painful areas of web development like JavaScript and AJAX debugging using Firebug.

The book takes you from the basics of Web Development like editing HTML and CSS on the fly to advanced features like AJAX, JSON, Monitoring, and Performance Tuning of web pages. It assumes that you have some very basic knowledge of HTML and JavaScript. For those of you with a sound knowledge of these technologies, this book can help you increase your productivity by using Firebug effectively, taking full advantage of its rich and powerful features and the console API. Towards the end, the book explains how to create your own powerful extensions for the Firebug community. 

Authors

Table of Contents

Chapter 1: 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
Chapter 2: Firebug Window Overview
Console tab
HTML tab
CSS tab
Script tab
DOM tab
Net tab
Summary
Chapter 3: 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
Chapter 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
Chapter 5: JavaScript Development
The command line API
The console API
JavaScript debugging
Summary
Chapter 6: Knowing Your DOM
Inspecting DOM
Modifying DOM on the fly
Adding/removing the DOM elements' attributes
JavaScript code navigation
Summary
Chapter 7: 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
Chapter 8: AJAX Development
Tracking XmlHttpRequest
Viewing live modifications on DOM
Debugging AJAX calls using properties of a console object
Summary
Chapter 9: Tips and Tricks for Firebug
Magical cd()
The hierarchical console
Configuring Firebug to our taste
Summary
Chapter 10: Necessary Firebug Extensions
YSlow
Firecookie
Pixel Perfect
Firefinder
FireQuery
CodeBurner
SenSEO
Page Speed
Summary
Chapter 11: 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

Book Details

ISBN 139781847194961
Paperback224 pages
Read More