Firebug is a free add-on to the Firefox browser that gives the user access to an array of web-development tools. With Firebug you can monitor, edit and even debug CSS/CSS3. HTML/HTML5 and JavaScript on a live website.
Firebug has become a favorite tool of WordPress developers because it is simple to access and use. It can be opened in a separate window, or as a Firebug panel at the bottom of the browser. Firebug has been designed to stay out of your way until you need it. With a click of your mouse you can minimize — Firebug still on but running in background waiting for you to access; or close Firebug — turn off application until you next need it.
Note: Once you close Firebug you will loose the console information. So unless you actively changed the site’s actual code lines that you viewed, changed or debugged in Firebug window/bar, it is gone. Everything you are doing in the console, HTML, CSS, JavaScript is temporary. Any of the edits you want to be permanent must be copied and saved in a code editor.
Where can I get a copy of the Firebug program
You can download and install Firebug from three sources:
Go to: https://addons.mozilla.org/en-US/firefox/addon/firebug/ and click +Add to Firefox
OR
From Firebug’s release page to get latest release or beta version of future releases: https://getfirebug.com/releases/
OR
Access program from the Firebug Source page: https://getfirebug.com/wiki/index.php/Source
Note: although Firebug was written as a Firefox add-on, If your primary Browser is Chrome or any other “modern browser” read not IE, you can use a version of Firebug, Firebug Lite which is written in JavaScript.
Installing Firebug
As indicated above, Firebug can be can download and installed from https://addons.mozilla.org/en-US/firefox/addon/1843/ by clicking the DOWNLOAD button. This will bring up a Click on the Install Button option. The download can take a few minutes and you will have to restart your Firefox browser to reboot. To activate Firebug, go to the top left corner of your Firefox browser then to > Web developer, and click that icon.
Getting Started with Firebug
Upon completion of your FireBug installation, a Gray ‘FireBug’ Icon will appear along the top of the Firefox navigation tool bar window. When you click on the Bug icon the Firebug application will open in the bottom section of your web page.
Firebug lets you view any site’s code structure
When you open Firebug, three tabs are activated: HTML, CSS, and DOM. With these basic settings you can scan the web page’s HTML code, CSS styling and its document object model. Firebug does add additional processes to your browser, which can slow down your webpages. Firebug tries to help, but the more features you turn on the slower things will get.
How to use Firebug to Inspect and Edit HTML Code
Firebug is a great tool for those new to WordPress, and just beginning to understand how HTML elements build a web page, examine and understand how the various HTML code lines are affecting the structure of that page. Firebug lets you edit the HTML live so you can instantly see the results of real-time corrections. Firebug’s HTML tab shows you what the HTML looks like right now.
Additionally, the tabs on the right side of the Firebug screen demonstrate the properties of an individual HTML element, indicating the CSS rules that are styling it, the pixels that define its position and size, and the document object model (DOM) properties accessible from JavaScript.
Firebug highlights your changes, in yellow, as they occur
As HTML elements are continuously created, modified and sometimes removed from JavaScript enabled web pages, Firebug lets you track what, when, and where these changes take place. These changes are noted in real time and are highlighted in yellow so you can track what is happening to the code and why.
How Firebug helps you edit the HTML in real-time
Firebug allows WordPress developers /site managers make HTML changes and see the result immediately This feature gives you a way to experimentally edit, delete, or create HTML attributes and follow the results of any changes as you key-in your work.
If you right-click an element and choose “Edit HTML” from the menu, Firebug allows you to edit the entire HTML source of any element.
Finding answers with the Firebug ‘Inspect’ Button
When something on your web page doesn’t look the way you expected, the fastest way to find out why, is to go to the Firebug’s toolbar and to click on the “Inspect” Button. As you move around the page, whatever is beneath the mouse’s curser is revealed the HTML and CSS code that is building the page.
Firebug lets you inspect, edit than reload page
With Firebug you can inspect an element in the HTML tab, then you can reload the page, and if that element still exists, Firebug will continue to show that same element. This makes it easy to test changes made in an editor and then return to Firefox to see how it looks.
Firebug gives you an easy way to copy the source
When you right-click on any element, Firebug offers you several options for copying parts of that element to the clipboard that identifies the aspect of the element uniquely.
How Firebug helps you understand how CSS affects the style of a website
The Firebug CSS tabs lets you examine the style of your web page, make real-time changes and review those corrections immediately.
Using Firebug to inspect the cascade
What happens when the type on your web page is the wrong color? Using CSS Tab on your Firebug panel you can identify the CSS element that caused the problem.
The FireBug screen shows how the rules cascade together to style each element. Rules are sorted in the order of precedence, and properties that have been overridden are stricken out. Each rule has a link back to the file where it came from which you can click to jump to the line.
Preview colors, images and fonts
As you mouse over colors, fonts, gradients or image URLs within the CSS tab, a tool-tip appears that previews the value and provides details. This feature is really helpful when you need to write CSS to make an element fit the size of an image precisely. The image tool-tip can show the dimensions of the image file. The font-preview feature displays example text.
Firebug lets you tweak your CSS to your heart’s content
You can tweak the page’s CSS by clicking any CSS property to make a little text editor will appear. The changes you type in are applied immediately. Firebug features list of possible values for the property you are editing, and autocompletes as you type the correction. If you change your mind about the edit, you can use the escape key to cancel any of the changes you have made. You can move from one property to the next by using the tab key.
Making the number line up
Using the up and down arrow keys in Firebug is the best way to edit a number. Firebug will increment or decrement the number by one. You can also use Shift+Up/Down and Ctrl/⌘+Up/Down to increase/decrease by 10 resp. by 0.
Firebug can help you learn CSS
Firebug is a great tool for sharpening your CSS skills. By using the up and down arrow keys while editing a CSS property, you can cycle between all possible properties in alphabetical order. Firebug offers a complete dictionary of standard CSS keywords in its memory is a big help for beginning coders.
Firebug gives you the ability temporarily disable specified CSS properties
Frequently web developers can identify a solution to a style problem by disabling a few CSS properties and seeing what the page looks like without them. As a developer/site manager moves the mouse curser over each property a little circular icon appears on the left. Clicking on that icon will disable the property and re-clicking it can turn it back on.
How to use Firebug to inspect any style sheet
You can inspect the CSS of a single element with the HTML tab. The main CSS tab lets you review entire style sheets. When you click on the list of files in the toolbar and you will see an outline of all the style sheets imported into the page.
How Firebug helps you copy colors and image URLs
Firebug makes it easy to copy-and-paste colors and image URLs. When you ‘right click’ a context menu with clipboard possibilities will appear. When you copy an image URL, Firebug will copy the absolute URL of the image, even if the CSS is showing it relatively.
Firebug allows you to open CSS files in external editor
Any CSS files displayed by Firebug can be opened in external editors or IDEs (Independent Development Environment).
Firebug displays CSS style values
Firebug displays a panel that shows all the CSS style values calculated by the user agent while interpreting the given CSS information for the selected node inside the HTML Panel.
Firebug indicates errors when editing CSS properties
The Firebug inline editor used to edit CSS properties and their values indicates whether an input is invalid. If the editor’s shadow color is red, the value is invalid. Green type indicated correct formatting.
Firebug inspects CSS pseudo-classes
Firebug lets you to inspect code that uses pseudo-classes such as: hover, :active and :focus. The user can ‘lock’ selected elements so mouse movements don’t change it.
FireBug allows ‘source’ edit or ‘live’ edit
For the most part Firebug shows live objects directly out of the browser. Thus the editing in Firebug is live, you are not editing source. However, the CSS panel also supports source editing. In this case the user is editing directly the source of loaded style sheets.
Firebug helps you explore the DOM
When a web page is uploaded to a browser, that browser creates a Document Object Model (DOM) of the page. The DOM is a W3C (World Wide Web Consortium) standard that defines a standard for accessing documents.
“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”
The HTML DOM is a standard object model and programming interface for HTML that defines:
- The HTML elements as objects
- The properties of all HTML elements
- The methods to access all HTML elements
- The events for all HTML elements
The HTML DOM is a standard for how to get, change, add, or delete HTML elements. The structure of the HTML DOM gives JavaScript the facility it needs to create dynamic HTML and the ability to access and change all the elements of an HTML document as needed including:
- changing all the HTML elements in the page
- changing all the HTML attributes in the page
- changing all the CSS styles in the page
- removing existing HTML elements and attributes
- adding new HTML elements and attributes
- reacting to all existing HTML events in the page
- creating new HTML events in the page
Firebug helps you find DOM objects quickly and then edit them on the fly.
The HTML Objects Structure
Firebug can identify the difference between the standard DOM and your own JavaScript code
Firebug can tell the difference between the two kinds of objects and functions, and shows you your own script-created objects and functions in bold at the top of the list. Additionally you can use the options menu to completely hide different kinds of objects.
Firebug graphically differentiates objects
Firebug does its best to graphically differentiate the different kinds of objects while providing as much information as possible. Objects are color coded so that HTML elements, numbers, strings, functions, arrays, objects, and nulls are all easy to distinguish. These objects display brief summaries of their contents to speed the editing review.
Real-time DOM editing
Using Firebug you can make changes to the DOM by Double-Clicking the white space of any row in the DOM tree structure. A small editor window appears that lets you change the value of the chosen variable.
The DOM editor is a miniature JavaScript command line. Write any JavaScript expression you want, then hit enter. The JavaScript is then evaluated and the result will be assigned to the variable.
Editing the DOM with autocomplete
FireBug’s autocomplete feature makes editing the DOM easier. You can complete the name of object properties by using the tab key. You can cycle through the complete set of possibilities and then use shift-tab to go backwards.
With Autocomplete you can use the tab feature to cycle through global variables before you type anything. You can hit tab after typing “document.d” to cycle through all properties that start with “d”. You can even hit tab after a complex expression like “document.getElementsByTagName(‘a’)[0].” to see all properties of the first link in the document.
Navigating JavaScript code
Firebug’s DOM explorer gives you an easy way to find the JavaScript functions you need to debug. When you click on a function in DOM explorer, Firebug takes you to the Script tab and highlights that function.
Using the DOM explorer for local and session storage
If you need to explore local or session storage, use Firebug’s DOM. It shows you individual items in storage which are displayed as an expandable tree with support for inline editing.
Note the images used in this post are from: https://getfirebug.com/whatisfirebug
Leave a Reply