Ever look for a needle in a haystack?
Things get even better when your site looks great in one browser but fails miserably in another.
Welcome to the daily challenges of
web development projects.
I want to give some short overviews of tools that I find very helpful in my day to day dealings with Drupal and web development.
I use these many times each week.
The first two tools should be used one after the other.
The first tool is the Web Developer Firefox extension by Chris Pederick.
This is probably nothing new to most developers, but I just want to point out some of the features that are most useful.
What this does is simply highlight the HTML container in your browser that falls under the cursor.
Also of interest is the html element path that’s displayed between the browser tabs and the Web Developer toolbar menu items in what looks like a status bar.
This bar tells you the CSS path for the currently highlighted item.
You find this option under the CSS menu
In the images on the right, I’m changing the font size of that item header and seeing the changes in real-time.
This is really helpful when trying out different styles or even just using temporary outlines on elements to fix floating, margin, or padding issues.
Now thats just two of about 50 utilities included with the toolbar, so explore and discover.
(Check out “Miscellaneous/Ruler & Guides” and “Resize “ too.)
So what do I do for IE?
Well, Micro$oft has their own developer tool, Its the Internet Explorer Developer Toolbar.
It’s available for IE6 and IE7, which you have to test separately anyway since the 6&7 do not use the same engine. After installation, you can get to it by hitting the IE Developer button on the IE toolbar.
The first thing to do is use click the “Select element by Click” button (top left button of the toolbar window), then just move the mouse over and click where you want to see more css information.
You can see from the images that it works similar to the firefox extension but it only affects the selected element and not all the elements that use that class.