• Home
  • Mac OS X
  • Windows OS
  • ASUS
  • Chromebooks
  • Dell PCs
  • MacBooks

PC Daily Tips

Personal Computer Basic Guides




  • YouTube Tips
  • FB
  • Octopress
  • Touchscreen Laptops
  • Browser
  • Guides
  • Acer
  • Toshiba
Home » Browser » Using Firebug Addon with Firefox

Using Firebug Addon with Firefox

January 21, 2014

Firebug addon is probably the most popular web developer tool that are used in the recent years.

VU32TJ9U7XU9 I started to know Firebug a few days after I installed my Firefox browser and my first WordPress site, and asked around in WP support forum about modifying my theme. If you need to set gmail as default email in Firefox, you can click here.

Although they were all helpful, the most often heard advice was installing Firebug.

Being curious what this tool can do, I installed it immediately with my browser, Firefox. In case you don’t find it inside Firefox, you can download here.

You can also still use Firebug if you use Chrome.

Then I started to love it.

Firefox’s built-in Tool vs Firebug

All through years, Firefox has many updates, and recently, it is integrated with web developer tool.

3D feature Firefox's web developer tool
3D feature Firefox’s web developer tool

Nifty features are added, like profiler, 3D view, HTML and CSS real time editor, which are many features that Firebug have. However, I can’t leave Firebug, and I guess so can’t other web lovers too.

Firebug features that I couldn’t find in Firefox’s web tools are, switching hover or focus to inspect an element on a page, double click to edit values, Cookies, and many more.

How do I use Firebug

This is a “beginner” guide from me, since I am no expert on CSS or other web programming language, I just learn by my mistakes.

Firebug in action, edit background color in real time
Firebug in action, edit background color in real time

Inspecting HTML and Editing the Style

HTML in the left, style in the right side
HTML in the left, style in the right side

Inspecting an element, can be done by, putting your cursor on a site’s element, and right click it.

Other than right click, you will see Firebug icon on the top.

Firebug icon
Firebug icon

Now if you use Firefox, you will see “Inspect Element” and “Inspect Element with Firebug”, choose the one with Firebug to use it, because the first option is to use Firefox’s web tool.

Inspect element with Firebug
Inspect element with Firebug

I mostly use it to inspect HTML elements that a website page has, and once I found something, I inspect it, all the information about inspected element are immediately displayed in real time.

One of the information displayed is the CSS style like colours, font size , etc of your site’e element.

In the right sidebar (default position) of HTML, you can find CSS editor or “Style” to play around to meet your stylesheet’s requirements.

Here, you can inspect element, while Hover, Active or Focus-ing your cursor on one element.

Computed

Computed tab
Computed tab

Then “Computed” tab that will give you a lot of information in “Computer” value, to know more detailed of an attribute’s value.

Layout

Layout
Layout

Next is the “Layout”, that gives you the idea of the size of your inspected element, and if you enable “Show rulers and guides” option, it will give you better metrics visual, like size, position, z-index, padding, border or margins.

DOM

DOM tab for javascript
DOM tab for javascript

The “DOM” tab, as I mentioned in the video, I very seldom using it because I don’t need it. However if you work a lot with Javascript, you will love this tab.

So, in my opinion, I love the 3D view Firefox’s tool, but Firebug is just what I need if I have to inspect a page’s element. What about you?

Share this post with your friends:Print this page
Print
Email this to someone
email
Share on Facebook
Facebook
0Share on Google+
Google+
0Pin on Pinterest
Pinterest
0Tweet about this on Twitter
Twitter
Share on Reddit
Reddit
0

Similar Topics:

Mailto use gmail FirefoxSet Gmail As Default Email Using Chrome or Firefox watch youtube hd videos without bufferingTips To Watch YouTube HD Videos Without Buffering WordPress vs Octopress the default themeBased on Experience Octopress vs WordPress Saving image as PNG file in PixlrHow to create PNG Watermark with Pixlr

Topics: addon, firebug, firefox, tools

About Kimi

Called, PC or Computer girl at home, want to share her knowledge and experience worldwide.

← Previous: Set Gmail As Default Email Using Chrome or Firefox
→ Next: Change Firefox Top Bar Background or Firefox Theme

PDT on Social Media

  • Facebook
  • Google+
  • Twitter
  • YouTube

You Might Like:

  • Tools then add-onsChange Firefox Top Bar Background or Firefox Theme
  • Mailto use gmail FirefoxSet Gmail As Default Email Using Chrome or Firefox




Navigation

  • Home
  • About PDT
  • Archive
  • Contact
  • Privacy Policy

Pages

  • Acer
  • ASUS Brand
  • Browser
  • Chromebooks
  • Dell PCs
  • Facebook
  • Guides
  • Mac OS X
  • MacBooks
  • Octopress
  • PC Accessories
  • Toshiba
  • Touchscreen Laptops
  • Windows OS
  • WordPress
  • YouTube Tips

Tags

11.6 inch 15.6" acer aspire ASUS asus rog asus vivobook baytrail bay trail chrome command prompt dell dell inspiron email epson error fanless firefox gamer laptop gaming laptop install intel core i5 iso lenovo macbook macbook air macbook pro Mavericks octopress preview printer subscribe technical preview TextEdit Time Machine touchscreen update upgrade video vivobook win 10 windows 8 windows 8.1 windows 10 wordpress youtube

© Copyright SG22019 pcdailytips.com

Back To Top


Pcdailytips.com uses cookies to improve user's experience. Accept Read More
Our Privacy & Cookies Policy