• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar

HANDS ON WORDPRESS

Making a Living with WordPress

  • Home
  • Blog
  • About
    • About Hands On WordPress
  • The Austin WordPress Community
  • Contact
  • Show Search
Hide Search
You are here: Home / WordPress / A Firebug Tutorial— Using a Web Page Editing Tool

A Firebug Tutorial— Using a Web Page Editing Tool

sandibatik · March 27, 2014 · Leave a Comment

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.

1.Firebug Scripting bar

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.

2. GreyFirebug Icon

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.3. Instant HTML CSS DOM

 

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.

4. html panel

 

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.

5.Highlighting Of Changes

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.

6.Instant Editing

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.

7. Inspect Element

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.

8. Reload Page

 

Firebug gives you an easy way to copy the source

9. Copy 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

10. Firebug CSS Panel

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

11. Screen CSS-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

12. Screen CSS-Tooltip

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

13. Screen CSS-Edit

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

14. Screen CSS-Up-Down

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

15.a. Screen CSS-Learn

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

16. Screen CSS-Disabling

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

17. Screen CSS-Listing

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

18. Screen CSS-Copy

 

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

19. Screen Script-External Editor

Any CSS files displayed by Firebug can be opened in external editors or IDEs (Independent Development Environment).

Firebug displays CSS style values

20. Screen CSS-Computed Styles

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

21. Screen CSS-Edit Errors

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

22. Screen CSS-Pseudo Styles

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

23. Screen CSS-Source 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

24. Pic_html Tree

Firebug can identify the difference between the standard DOM and your own JavaScript code

25. Screen DOM-your own

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

26. Screen DOM-Summaries

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

27. Screen DOM-Edit

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

28. Screen DOM-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

29. Screen DOM-Code Nav

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

30. Screen DOM-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

 

 

Filed Under: WordPress Tagged With: WordPress Tutorials

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About Sandi Batik

About Sandi Batik

Introverted Freelancer, WordPress trainer, consultant, curricula developer, author, unapologetic geek, unrepentant capitalist, lucky enough to do what I love … more about me about About Sandi Batik

  • Twitter

Search

Introverted Freelancer

Traits of Successful Introverted Freelancers

Traits of Successful Introverted Freelancers

2017 Business Check-up Workshop

2017 Business Check-up Workshop

Expanding Your Business With Automated Marketing Funnels

Expanding Your Business With Automated Marketing Funnels

How to Use Permission Marketing to Build Your WordPress Business

How to Use Permission Marketing to Build Your WordPress Business

How Much Should I Charge for Building or Designing a WordPress Website?

How Much Should I Charge for Building or Designing a WordPress Website?

Project Management

Keeping Scope Creep From Killing Your Schedule and Profit Margin

Keeping Scope Creep From Killing Your Schedule and Profit Margin

Project Management for WordPress Freelancers

Project Management for WordPress Freelancers

WordPress

Securing and Maintaining Your WordPress Site

Securing and Maintaining Your WordPress Site

How The WordPress Media Library Works — 2018

How The WordPress Media Library Works — 2018

How To Build an Information Structure for Your WordPress Site

How To Build an Information Structure for Your WordPress Site

How WordPress Themes Really Work

How WordPress Themes Really Work

How to Create and Manage eMail Newsletters from Your WordPress Site

How to Create and Manage eMail Newsletters from Your WordPress Site

How to Secure and Maintain Your WordPress Site

How to Secure and Maintain Your WordPress Site

Copyright © 2010-2023 Hands On WordPress · All Rights Reserved