DOM Inspector

Yes, yes, it comes installed with Firefox, but lets not forget the basics. The DOM Inspector allows you to see what is actually going on in your web document. The DOM Inspector lets you browse DOM nodes, style sheets, or Java Script objects. You select a node by either drilling down, by searching, or by clicking on it. Although, the UI for selecting a node with your mouse is just plain lousy. Once you’ve chosen your subject, the DOM inspector can show you the box model information for that node, the style sheets associated with the node, the computed CSS styles, or the Javascript object.

Web Developer Extension

Chris Pederick’s Web developer extension has been out for a long time and is the plugin I am most familiar with. This is really the swiss army knife of web developer tools. It is so feature packed that I am still finding new things that it does. Unfortunately, the UI is also so cluttered that I am still finding new things that it does.

This add-on can slice and dice a web page every which way. It can outline a variety DOM elements, for example drawing an outline around all block elements on a page. This can be nice for lining things up. The Display Line Guides option is also a good way to verify alignment, not to mention Display Ruler, or Display Page Magnifier for fine detail.

This extension has dozens of reports, each one geared toward diagnosing a particular kind of problem. Some of them are external, such as sending your URL to a validation service. Some are internal, such as showing a dump of all of the page’s active cookies. Unfortunately, many of these option open up in a new tab, taking the focus off of the page that you are trying to work with. It can be hard to tell which options do this. There is an option for having the tabs open in the background, but this is not the default.

The View Style Information option is particularly nice. You can point to any element on the page and the extension will display the element tree along with ids and classes. If you click on an element, it will display only the style rules that apply to that element. This beats the drill down approach in the DOM inspector, although it doesn’t show box model information or computed style information this way.

The web developer extension can change things as well as inspect them. You can go into a mode where you can edit your CSS or HTML in real time for immediate feedback. This is great for testing out small changes. For the PHP developer, the extension has a variety of options for manipulating cookies and forms. There are also a variety of ways to enable or disable certain elements on the page.

Install Web Developer Extension

Tamper Data

Tamper Data is live HTTP headers on steroids. Tamper data records the HTTP request headers and HTTP response headers for each request that the browser makes. Not only that, It allows you to “tamper” with the requests before they are sent out, editing headers or form values behind the scenes. Tamper data can present a graph of the requests involved with loading a web page. Tamper data is great for security testing and page loading performance tuning.

Install Tamper Data Extension

FireBug

FireBug, ah what can I say but wow! According to their web site:

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug has considerable overlap with the extensions I’ve mentioned so far. It doesn’t necessarily duplicate all of their functions, but the ones it does, it does really well. It goes way beyond in some cases. There is really no point in me talking about Firebug’s features, because the website already does such a good job at it. They’ve impressed this jaded old developer.

If you haven’t tried this one yet, seriously, go get it right now.

Install FireBug Extension

ColorZilla

ColorZilla adds a small eyedropper tool to the bottom left corner of the window. You can use this tool to inspect colors on the current web site. Double clicking it brings up a color picker and some other color related tools.

Install ColorZilla Extension

Multiple Profiles

Ok, I lied. There are a few situations where I use FireFox for casual browsing. Some web sites just won’t work with Safari, or don’t work well with Safari. For these, I pull up Firefox. I don’t want my casual browsing tools to clutter up my web development experience and I don’t want my web development tools to clutter up my casual browsing experience. The solution is to create multiple profiles in FireFox. I have one for web development and another for normal surfing. I have safari ask me to select a profile on start up. This extra step would be annoying for a primary browser, but it doesn’t seem too bad for a secondary browser.

Setting up my Mac series

Firefox is not mac specific, but this is actually the latest installment in my setting up my Mac series.

1. How to Transfer Mac OS X Application Data between Computers
2. Free Software for Mac OS X
3. FireFox Extensions for Web Developers
4. UPCOMING: Configuring Boot Camp and Parallels

I wrote about web page loading performance a while ago, when I linked to Dave Hyatt’s most excellent explanation of the issues involved with testing page load speed. In fact the Safari browser blog endorses Aaron Hopkins article and mentions how to measure page loading times in Safari using the debug menu.

On the Mozillia front, the Tamper Data extension generates some amazing graphs of when elements on a page load and how long it takes.

On the topic of sending less data, the Yahoo! User Interface Blog weighs in on page waits with a discussion of javascript minimization versus compression. They also briefly cover the YUI decision to serve components a la carte, rather than in an aggregated file.

Cal Henderson of Flickr also takes up this topic in serving JavaScript fast. He goes into more depth about the issue of a la carte external objects versus aggregated external objects as well as covering compression and caching issues with examples in PHP.

From the PHP perspective, Michael J. Radwin and Rasmus Lerdorf have covered web application performance issues in conference talks.

Are your web pages cacheable or not?

On the home front, this is my first post on this blog since I’ve installed wp-cache2 and upgraded to eAccelerator 0.9.5. And my first post since my fishing vacation, too

I’ve been following an iterative development cycle where I deploy to my client’s site every Friday. (My old ERP colleagues would be mortified — install on Friday? My response: automated testing) Thankfully, last Friday’s upload went through, although it was the last internet connection my internal modem would ever make. It took me a couple days to rule out line quality and ISP problems and determine that the problem was hardware failure.

I have a PC with windows XP available. Its not mine and I really don’t use it except for checking web sites in internet explorer and playing an occasional game. So Sunday night I tried using it for some serious browsing for the first time. After about five minutes, I realized that I can’t stand Internet Explorer. The lack of a tabs felt like a missing finger. I had no idea how much I used that feature in both Safari and in Firefox. Also, the fonts under XP just plain looked bad.

Tiring with IE, I installed Firefox. I’m impressed with Firefox on the PC. I prefer Safari on the Mac, but I do use Firefox on the Mac for web development because of its ability to control and inspect headers, cookies, the DOM, etc. I don’t use Firefox on the Mac for day to day browsing because its interface feels a little bit off. No such feeling for Firefox on Windows. Win Firefox felt very comfortable. I like it.

When I upgraded this blog to WordPress 1.5, I integrated this blog with del.icio.us. I have been using del.icio.us for my “to blog about later links.” del.icio.us is very helpful when you have to browse in a foreign environment.

Sunday afternoon I had to start contemplating the idea that I might have do next Friday’s deployment from the XP machine or even temporarily move my development environment to the Windows machine. It didn’t take long to rule out this option. OS X comes pre-installed with Apache, PHP, CVS, SSH, and a bunch of other things that I probably take for granted. Windows has none of that. I decided that setting up a development environment under windows would probably take too much time.

I still remember the trauma from the last time I tried to ftp from a stock Windows machine. Its probably better now, but I still decided that I didn’t want to try that route. Besides, I just got my automated deployment scripts working on the Mac.

So Monday morning, I drove 60 miles to go to pick up a USB Modem at Best Buy. Now here is the problem with owning a Mac. Best Buy has two models in stock. Neither has OS X drivers. I bought one anyway in case it might “just work.” It doesn’t. So I thought I was stuck until the USB modem I ordered from online arrives.

But then I realized that I had enough ethernet stuff in the basement to hookup a network between the PC and the Mac. I have never done this before because I simply don’t use the windows machine enough to care. Hooking up the network was a breeze. A couple wizards, a few property dialogs and a half hours worth of reading was all it took to set up internet connection sharing on the PC side. The Mac recognized the new network immediately and without configuration. Sweet!

So, I am once again connected and now just waiting for my Mac compatible USB modem to come in the mail.

There is an added benefit. Over the last year or so, I have been gradually switching from table based layout for my web pages to a CSS based layout. I’ve quite a bit of trouble maintaining the same layout of older pages in CSS due to browser variances. Some of my table based layout components are somewhat ambitious for CSS. I never used to do much testing on Win IE because I was pretty familiar with how the table based layouts would look. Win IE is very stable on these types of layouts and they almost always looked exactly on IE how I had developed them on the Mac. Additionally, I had long ago worked out the cross browser kinks and was pretty much recycling the same debugged layout components.

This is definitely not the case for CSS. I don’t yet have a full library of debugged layout components and I have to say my understanding of cross browser kinks is incomplete, although growing. If you browse around on this blog in IE and in Firefox, you can see that while not terrible, it doesn’t render some pages correctly on IE.

Testing under IE was a pain for me. Editing CSS files on Windows kept bringing up FrontPage instead of a plain text editor, which is what I wanted. Now that the machines are networked, I can now just point windows to the test environment that is already running on my Mac and preview right from there. I also have occasional access to a Windows Laptop, which will make this type of testing a lot easier.

I’m too far behind this week, but maybe next week I will finally figure out what is wrong with the style sheet for this blog under Win IE.