Web Developer Tools

Ever look for a needle in a haystack? If not, and you want a similar experience, try finding that ONE CSS class, html tag, or javascript id that is making your site look like a train wreck. 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.

Eric McKenna
#Development | Posted

Ever look for a needle in a haystack?

If not, and you want a similar experience, try finding that ONE CSS class, html tag, or javascript id that is making your site look like a train wreck.

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.

css-outline-menu.pngFirst up is the “Outline Current Element”

option.

What this does is simply highlight the HTML container in your browser that falls under the cursor.

This saves you a lot of time when trying to find that troublesome or suspect css id or class. css-outline.png

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.

css-edit.png The next highlight for this tool will get the “OMG, That is Really Cool” stamp of approval: It’s the “Edit CSS” tool.

You find this option under the CSS menu

and it allows you to edit the current page’s stylesheet and see the changes as you enter them. css-edit-inline.png(How cool is that!)

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.)

IE-dev-toolbar-edit-css.pngSo now we’ve won half the battle, or at least 18% of the browser market share.

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. IE-dev-toolbar-edit-css-inline.pngAfter 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.

Eric McKenna