8 min read

(For more resources related to this topic, see here.)

Console panel

The console panel offers a JavaScript command line. The JavaScript command line is a very powerful weapon of Firebug. This feature provides you with the power of executing arbitrary JavaScript expressions and commands on the fly at the command line without even reloading the document. You can validate and execute any JavaScript on the command line before integrating it on your web page.

When something goes wrong, Firebug will quickly let you know the details and information about:

  • JavaScript errors and warnings

  • CSS errors

  • XML errors

  • External errors

  • Chrome errors and messages

  • Network errors

  • Strict warnings (performance penalty)

  • Stack trace with errors

  • XHR (xmlHttpRequest) info

HTML panel

The HTML panel displays the generated HTML of the currently opened web page. It allows you to edit HTML on the fly and play with your HTML DOM (document object model) in Firefox. It differs from the normal source code view, because it also displays all manipulations on the DOM tree. On the right-hand side it shows the CSS styles defined for the currently selected tag, the computed styles for it, layout information, and the DOM variables assigned to it under different tabs.

CSS panel

When you want to alter CSS rules, the CSS panel is the right place for this. It allows the user to tweak the CSS stylesheet in his/her taste. You can use this panel for viewing/editing CSS stylesheets on the fly and view the results live on the current document. This tab is mostly used by CSS developers to tweak the pixels, position, look and feel, or area of an HTML element. This tab is also useful for web developers when they want to view those elements whose CSS property display is set to none. Furthermore it offers an exclusive editing mode, in which you can edit the content of the CSS files directly via a text area.

Script panel

The Script panel is the next gem that Firebug provides for us. It allows you to debug JavaScript code on the browser. The script panel integrates a powerful debugging tool based on features such as different kinds of breakpoints, step-by-step execution of scripts, a display for the variable stack, watch expressions, and more.

Things you can perform under the Script panel

A few tasks that you can perform under the Script panel and play with JavaScript are as follows:

  • View the list of JavaScript files that are loaded with your document

  • Debug the JavaScript code

  • Insert and remove breakpoints

  • Insert and remove conditional breakpoints

  • View the stack trace

  • View list of breakpoints

  • Add new Watch expressions

  • Keep an eye on the watches for viewing the values of variables

  • Debug an Ajax call

DOM panel

HTML elements are also known as DOM elements. Document Object Model (DOM) represents the hierarchy of the HTML elements and functions. You can traverse in any direction within the DOM using JavaScript. The DOM elements have parent, child, and sibling relationships between them therefore for objects and arrays it offers an expandable tree view. Clicking on them (objects and arrays) limits the display of the DOM tree to the context of these objects and shows the current element path as a breadcrumb list on the DOM panel’s toolbar.

The DOM panel in Firebug shows:

  • DOM properties

  • DOM functions

  • DOM constants

  • User-defined properties

  • User-defined functions

  • Inline event handlers

  • Enumerable properties

  • Own properties

Net panel

The Net panel allows you to monitor the network traffic initiated by your web page. It shows all collected and computed information in a tabular form to the user. Each row in the table represents one request or response round trip made by the web page. You can quickly measure the performance of your web page by analyzing the following information:

  • Time taken to load the page

  • The size of each file

  • The loading time of each file

  • The number of requests the browser sends to load the page

The Net panel also provides the facility to filter the type of request or response that you want to focus on. You can choose filters to view only HTML, CSS, JS, Image, Flash, Media, and even XHR (Ajax) requests.

Cookies panel

The Cookies panel allows you to view, manage, and debug cookies within your browser via Firebug. Within the context of the current domain, this panel displays a list of all cookies associated with the current web page. Each entry in the list shows the basic information about a cookie (Name, Value, Domain, Path, Expires, and so on).

Inspecting page components

Sometimes, something in your page doesn’t quite look correct and you want to know why; you want to understand how a particular section of the page has been constructed. Firebug’s Inspect functionality allows you to do that in the fastest possible manner using minimal clicks or mouse strokes. As you move around the web page, Firebug creates visual frames around various page components/sections and shows the HTML and CSS behind the page section. In fact, this is one of the most frequently used features while tweaking the look and feel of your web application. Inspecting page elements and doing tweaks (editing HTML attributes, CSS rules, and so on) are real time savers during the fine-tuning of a web application’s look and feel.

In this section, you will learn how to perform one of the core tasks of Firebug; inspecting and editing HTML. The following steps will help you perform this task.

You can activate Firebug by pressing the F12 key or by clicking on the (bug) icon on the top-right side of the browser’s toolbar. Similarly, you can close or deactivate Firebug by pressing the F12 key or by clicking on the (bug) again.

 

Step 1 – open Firebug

To start inspection of your web page, you first need to activate Firebug.

  • Go to your web application’s page in the browser

  • Press the F12 key or click on the (bug) icon on the top-right side of the Firefox browser’s toolbar

Step 2 – activate inspection tool

In this step, you activate the inspection tool and search for the block/component/HTML element in your web page using the mouse:

  • Click on the Inspect button on the Firebug console toolbar (the inspect button is like a mouse arrow pointer on the toolbar of Firebug), as shown in the following screenshot:

  • Move your mouse cursor over the page component/section that you want to inspect

Step 3 – selecting the element

While moving the mouse pointer, a visual frame is created around the element and the HTML source of the element is shown highlighted in the Firebug window. Now, after activating the inspection tool, select the block/component/HTML element to inspect.

Click on the page component/section to select the element in the HTML panel.

Quick inspect

You can even inspect an element with minimal fuss by right-clicking on the element in the Firefox window and selecting the Inspect Element with Firebug option from the context menu. This allows you to inspect an element without first activating the Firebug window. In this way you can inspect an element with minimal mouse-clicks when the Firebug window is not already activated.

Editing page components

Firefox and most other browsers have a feature for viewing the source of the HTML document sent by the server. Firebug’s HTML panel shows you what the HTML currently looks like. In addition to the HTML panel, there are three tabs on the right which let you view and modify properties on an individual element, including the CSS rules that are being applied to the element, the layout of the element in the document, and its DOM properties.

Firebug’s HTML panel has more advanced features than the default View Source of Firefox. It shows the HTML DOM in a hierarchical structure or tree view with a highlight color. It allows you to expand or collapse the HTML DOM to navigate and provides easy visualization of the HTML page. It is a viewer as well as an editor, and it allows you to edit/delete the HTML elements or attributes on the fly and the changes are immediately applied to the page being currently viewed and rendered by the browser.

In order to edit the HTML source on a web page, do the following steps:

  • Open Firebug.

  • Click on the HTML tab. This will show the source of the document.

  • Simply click on the Edit button under the HTML panel. On clicking this button, the HTML panel turns into an editable text area. You can now edit the HTML and see it taking effect instantly as shown in the following screenshot:

Summary

Firebug is armed with lot of weapons to deal with UI and JavaScript bugs. You have the JavaScript command line, the Console panel, HTML panel, CSS panel, Script panel, DOM panel, Net panel, and Cookies panel to tackle a variety of issues. Inspection is the most common task that you will perform almost every time you find yourself surrounded by hair pulling client side issues. Editing and viewing changes on the fly (without making changes on the server side code) is the specialty of Firebug.

Resources for Article :

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here