Book Image

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

By : Chandan Luthra, Deepak Mittal
Book Image

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

By: Chandan Luthra, Deepak Mittal

Overview of this book

<p>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.<br /><br />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.<br /><br />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.&nbsp;</p>
Table of Contents (18 chapters)
Firebug 1.5: Editing, Debugging, and Monitoring Web Pages
Credits
About the Authors
About the Reviewers
Preface
Index

Command line API reference


The Firebug command line allows user-entered expressions to be evaluated in the page, similar to having scripts in our page. It is one of the most useful and powerful features of Firebug. Here is the quick cheat sheet for command line:

Command

Purpose

$(id)

Returns a single element with the given ID

$$(selector)

Returns an array of elements that match the given CSS selector.

$x(xpath)

Returns an array of elements that match the given XPath expression.

dir(object)

Prints an interactive listing of all properties of the object. This looks identical to the view that we would see in the DOM tab.

dirxml(node)

Prints the XML source tree of an HTML or XML element. This looks identical to the view that we would see in the HTML tab. We can click on any node to inspect it in the HTML tab.

cd(window)

By default, command line expressions are relative to the top-level window of the page. cd() allows us to use the window of a frame in the page instead.

clear()

Clears the console.

inspect(object[, tabName])

Inspects an object in the most suitable tab, or the tab identified by the optional argument tabName.

The available tab names are HTML, CSS, SCRIPT, and DOM.

keys(object)

Returns an array containing the names of all properties of the object.

values(object)

Returns an array containing the values of all properties of the object.

debug(fn)

Adds a breakpoint on the first line of a function.

undebug(fn)

Removes the breakpoint on the first line of a function.

monitor(fn)

Turns on logging for all calls to a function.

unmonitor(fn)

Turns off logging for all calls to a function.

monitorEvents(object[, types])

Turns on logging for all events dispatched to an object. The optional argument types may specify a specific family of events to log. The most commonly used values for types are mouse and key.

The full list of available types includes composition, contextmenu, drag, focus, form, key, load, mouse, mutation, paint, scroll, text, ui, and xul.

unmonitorEvents(object[, types])

Turns off logging for all events dispatched to an object.

profile([title])

Turns on the JavaScript profiler. The optional argument title would contain the text to be printed in the header of the profile report.

profileEnd()

Turns off the JavaScript profiler and prints its report.