This is great when designing, and you want to match a font color to a color in your page. IвЂ™ve found this very effective for editing CSS, you avoid the constant back-and-forth switching because Firefox now has a CSS editor.Д¬olorZilla gives you a dropper that can find the hex RGB value (#123456) of anything on the page. You are viewing the live file in Firefox, making changes, and copying those back into your text editor. ItвЂ™s almost the reverse of creating a file in DreamWeaver and viewing it in Firefox. Select all the text in your edited CSS file and paste it into the real CSS file. The CSS wonвЂ™t be valid so the border is ignored, but keeps the style around in case you want to enable it later. Play with widths, heights, margins and paddings until it lines up nicelyД«ut rather than deleting the border, put an вЂњxвЂќ in front: вЂњxborder: 1px solid redвЂќ.Find a div with your mouse (ctrl + shift + f).IвЂ™ve done the following hundreds of times during the course of web development: My favorite CSS style is border: 1px solid red You can edit any attributes and see the effect in real-time (like giving Google a black background): This pops open a sidebar tab with the current stylesheets. Figure out how big an image is (pixel height and width)Д¬trl + Shift + E: Edit CSS.Easily get the divвЂ™s id for use with Firebug (below).Figure out what classes are creating the styles you see.Move the mouse over an element and its attributes appear in a pop-up: the name, class, pixel sizes, fonts, everything. It can do a heck of a lot more, but hereвЂ™s what I use it for:Д¬trl + Shift + F: Display element information.

The Web Developer Toolbar lets you inspect and edit (in real-time) the HTML and CSS of your page, so you can see whatвЂ™s happening when things donвЂ™t line up. Just do it.Дebugging CSS can be really frustrating. HereвЂ™s a rundown of the Firefox extensions I use to manage this madness. You have to deal with browser inconsistencies with HTML, CSS and javascript, let alone the difficulty of debugging javascript itself. Debugging is one of the most painful parts of developing web apps.

Firefox keeps logging me out