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

HTML tab


The HTML tab is the next tab of Firebug's Console tab, which allows us to edit HTML on the fly and play with our HTML DOM in our Firefox. There is an HTML source panel to the left-hand side. The right-hand side contains four subtabs or panels—Style, Computed, Layout, and DOM.

The HTML tab will quickly help us find how a particular web page is structured and how Firefox interprets the HTML page. In the HTML source panel, one cannot see the CSS hacks or other HTML tags that are meaningful for non-Firefox browsers. The HTML tab also allows us to edit HTML and tweak CSS dynamically on the fly for the live document that we are viewing.

The following is the list of things we can do with the HTML tab:

  • Inspect an HTML element

  • Explore the Style (CSS) of a particular HTML element in the document

  • Explore full HTML DOM of the document

  • Edit any existing HTML elements and CSS on the fly

  • Search the internal HTML element instead of text content on the page

  • Set Break Points on the HTML nodes, which...