Firebug & Web Developer Firefox Extentions | CSS Editing
|
ClimbingMonkey
Joined: 2005-03-18
Posts: 58 |
Posted: Wed, 2007-10-10 07:41
|
|
What is firebug you ask? It really might turn out to be the best web development extension for Firefox ever made. This is a must have that no Web developer should do without. I’m serious - you need Firebug. Since I have been more active on the web development scene, I have used only two tools to create, interrogate and fix web sites. Firebug and the Web Developer extensions, and UltraEdit, the king of all text editors (in my humble opinion.) Occasionally I will use TopStyle to more in depth css design, but after my most recent rebuild I have not installed it and have never missed it. Firebug lets you view and edit the HTML and CSS of any page. It tells you exactly which CSS rules affect the styling of the element you select in the style inspector - not only which rules affect it directly but also which rules it inherits properties from. More thoughts here: http://www.marcnjami.com/web-design/firebug --------------------------------------------------- |
|
| Login or register to post comments |
Posts: 476
I'd also add View Source Chart as one of my "key" troubleshooting Firefox add-ons.
One of the keys to using Firebug as a CSS troubleshooter is the ability to turn off and change individual CSS elements to see what effect they have. Here's what I do to troubleshoot CSS:
1. Right click on the element that's giving you trouble and select "Inspect Element" at the bottom of the popup menu.
2. On the right side of the Firebug panel that appears at the bottom of the screen, you'll have all of the CSS that is being applied to the element that is highlighted in the left side of the panel.
3. Since CSS is "layered" the most relevant CSS definition is at the top, working down through all of the other CSS elements that apply to the selected element.
4. If you put your cursor just to the left of a specific CSS attribute and left click, that attribute will be temporarily disabled, with a red crossed circle showing next to that attribute. You can turn it back on by left clicking it again.
5. You can change the name or value of an attribute by left clicking them and typing in the new value.
6. You can add a new attribute by hitting the "Enter" button while editing the last value in a CSS element. Type the new name and then the new value.
7. You can switch elements in the left part of the panel by left clicking on the element's tag (img, a, div, etc.)
I'll add some screenshots to this post over time. The best way to learn your way around Firebug is to right and left click your way around everything in it. Since all of the changes you make are only to the temporary copy stored in your memory, if you make a change you can't figure out how to reverse, all you have to do is reload the page, and you're back to a fresh page from the server.
Kirk
____________________________________
G2Image Documentation, G2Image Demo Page, My Family Website
Posts: 38
I am a web development noob with basically no css knowledge and I have to say that firebug was a big help in figuring out what css items does what. Thanks a lot!
Posts: 190
i use Web Developer Toolbar.
its great.
==========================
|| Car Wallpapers || Make Money Online || Hot Cars
Posts: 18
Thanks for suggestions, firebugs work great for me!
i simply removed the "onblur.." function in AddComment.tpl .
regards, m
Posts: 26
"i use Web Developer Toolbar.
its great."
it's not great. i prefer firebugs . it has a lot of Widgets
----------
Details::Gallery Wallpaper