{"id":130,"date":"2008-05-22T15:36:47","date_gmt":"2008-05-22T20:36:47","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=130"},"modified":"2008-05-22T15:36:47","modified_gmt":"2008-05-22T20:36:47","slug":"tool-review-firebug","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/tool-review-firebug\/","title":{"rendered":"Tool Review: Firebug for Firefox"},"content":{"rendered":"

\"\"<\/p>\n

Have you tried out Firebug yet? If not, you might want to consider giving it a go. It\u2019s one of a few Firefox extensions that I use almost daily in my web development work, and I can guarantee that it\u2019s made my life at least a little bit easier. And isn\u2019t that what we\u2019re all after… you know, deep, deep down? It ranks right up there with a giant trampoline in my book.<\/p>\n

I most often use Firebug for its ability to \u201cinspect\u201d various elements on the page. If you\u2019re running into a problem where a specific element on your page just isn\u2019t working properly, you can just open Firebug and click the \u201cInspect\u201d button. Then just mouse over whatever element is misbehaving and Firebug will give you a ton<\/em> of detail on that item. You can see where it\u2019s sitting in your XHTML, to see if your element is nested the way you thought. You can also see what CSS rules apply to that element, and (perhaps cooler still) see which CSS rules have been overwritten<\/em> by other CSS rules. That can be a huge help when your CSS file starts reaching filibuster-appropriate lengths. <\/p>\n

\"\"<\/p>\n

You can also use Firebug to edit your CSS, XHTML, and even JavaScript on the fly. This can be an invaluable trick for troubleshooting problems quickly. If you use the Inspect tab and find a problem, you can just pop over to the edit tab really quickly and try out a fix. Your changes to the code are reflected on the screen within a second of your edit. And if your first fix didn\u2019t work, you can just try another. <\/p>\n

\"\"<\/p>\n

Another great feature of Firebug is the Net tab. If your page is loading slowly, just pop the Net tag open and take a look at the available charts. There, every single part of your page is broken down into its constituent elements, their size, and how long it took to download that particular element. And at the bottom of the chart, you can see the number of requests to the server your page required, the total number of KB downloaded, and the time it took to put it all together.<\/p>\n

\"\"<\/p>\n

Firebug isn\u2019t perfect, however. It can sometimes slow down certain pages if it\u2019s running in the background \u2013 particularly, it seems, pages that make a lot of calls to the server. So AJAX-y pages (such as Gmail) or pages that refresh often can slow down significantly if you\u2019re using Firebug. However, you do have the option to disable Firebug for specific websites. Simply go to that website, and go to Tools -> Firebug -> Disable Firebug for [whatever website]. The program won\u2019t run on those pages: problem solved.<\/p>\n

\"\"<\/p>\n

In short, Firebug can be a great tool for debugging your XHTML, CSS, and JavaScript. It\u2019s also a great way to learn more about the techniques of others: just navigate to a page you like, and use Firebug to check out how its all put together. If you don\u2019t have it yet, you can get a copy of Firebug for Firefox here.<\/a> And don\u2019t say I never did nothin\u2019 nice for you.<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

Have you tried out Firebug yet? If not, you might want to consider giving it a go. It\u2019s one of a few Firefox extensions that I use almost daily in my web development work, and I can guarantee that it\u2019s made my life at least a little bit easier. […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[197],"tags":[264,338,369],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/130"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=130"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/130\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}