There is a less painful way to do this in the advanced settings of FF3. Just open up about:config and look for browser.cache.check_doc_frequency. The value can be:
0 once per session
1 everytime
2 never
3 when out of date (default)

I recommend changing this value to 1 if you are developing and testing code.

You will then see lots of 304 not modified messages, and get 200s for your changed files.

Web Inspector Overview

To get started open Web Inspector by going to Safari 3.1/Develop/Show Web Inspector and you will see the new window open up. The initial window is split up into a top row with navigation buttons and search box. The navigation buttons take you the the next and last actions you make within Web Inspector and come in handy when debugging. The left navigation lets you view and inspect the loaded web resources including Documents, StyleSheets, Images, Scripts, WebFonts, Databases and Other files, as well as buttons to load the Console and Network details. Ajax request and responses show up under the Other file category. If any errors are found, the number of errors are placed on the file name in the navigator. For example here, Safari has found 1 bug in the file diggthis.js The main content area shows you the web source details for viewing. JavaScript errors are marked with an orange pop, while HTML and CSS errors have a red color. If you want to attach Web Inspector to the bottom of your Safari Window click the small box on the bottom left corner of the window. I found this this to be a more usable placement.

DOM Editing

Clicking on any HTML Document on the left loads the source on the right. Documents can also be viewed as a DOM resrouce by clicking ont he DOM button on the top nav. (Note you have flip between DOM and Source view for HTML files.)

Searching supports DOM and CSS elements and you can nest your DOM element searches to filter out exactly what you’re looking for. For example #page a returns all anchor tags in the div with the page id. The corresponding display element in Safari is highlighted as you select DOM elements.

The right pane displays Styles, Metrics and Properties for seleted DOM elements. Styles show you both the computed style as well as all the defined style rules for that object. Like FireBug you can edit your CSS rules in real time in the Styles boxes for each CSS rule. To edit any CSS property double click the name or value and an edit box opens allowing you to type in your changes. This is great for testing out new ideas on the fly.

The metrics pane shows you the layout rules including offset, margin, border, padding, width and height for the element. Finally the Properties pane lists all of the DOM object properties that apply to the selected element.

Downloadable Web Fonts

If you are using downloadable web fonts the Fonts file group shows you a rendering of all the fonts that are loaded into the user’s browser.

Client Side Databases

Also if you are using the client side database features of HTML5, the Databases category will let your explore the databases loaded in the client along with the all the tables and rows in each client side database. From here you can also execute SQL queries against the databases.

The Console

The console feature lets you type in JavaScript commands and view JavaScript errors, along with HTML and CSS rule errors. Clicking on any error jumps to the file, but unfortunately doesn’t go the corresponding line. The console has an input area for testing out JavaScript and DOM commands on the bottom. There is in fact a console object and my tests showed that Safari supports only a few of the functions for the console object. Here is a list of the FireBug console methods of which only a few are supported in Safari namely log, info, warn and error.

Supported methods:
log info warn error
Unsupported methods:
debug assert dir dirxml trace group groupEnd time timeEnd profile profileEnd count

Network

The network tab is actually quite nicely designed and show you what the transfer time or the transfer size for each resource and in total for the page. The capsule graph is color coded and breaks down the file types by Docs, CSS, Images, Script and Other. You can switch between time or size from the drop down. Web Inspector makes some suggestions as well for improving speed, for example here we see a recommendation to use file compression to save bandwidth. (I don’t really use this method now since IE6 is buggy with gzip deflation.) Click on any file to see the HTTP request and response header for that file.

Snippet Editor

The Snippet Editor is a little utility that allows you to enter blocks of HTML and CSS and have it rendered on the fly. It is quite useful for testing out your CSS and Layout in little chunks.

Note: While using the Web Inspector and Snippet Editor, I came across numerous little annoying bugs and usability issues here and there. Also lots of features that I would expect are not there. For example you can not click on elements to inspect them, you can not add new style rules if they don’t exist already, and you can’t edit rules for CSS files loaded using @import. I would have to say that FireBug is a superior tool at this time for professional debugging, but Safari is about half way there.

Then I discovered something interesting in Google Analytics.

Google Analytics tracks and stores connection speeds for your visitors as part of the Network Properties category. The data provided includes Connection Speed and this corresponds with Pages per visit, Average time on Site, Percentage of new visits, and the Bounce rate. But how in the world does Google compile this data? It appears that people are guessing that Google uses the visitor’s IP address or hostname to do a lookup in an IP database or a reverse lookup, and then makes a guess based on what ISP that IP address belongs to. But Google also loads a small .gif file with each urchin request. This article explains a little trick for using time stamped image loading and log analysis which seems related.

So if your IP belongs to RoadRunner, then we can assume you are on a cable connection and file you under that category. This can sometimes get somewhat hairy and lead to ambiguity as evidenced by the Unknown category shown in Google Analytics. It is also interesting to note the Unknown category is the single largest category in my case with 36% of the total data collected. What happens if you are on AOL or EarthLink? Will the database contain the accurate information to pinpoint if you are on dial-up or broadband? How often is the database updated with new information? What about edge cases, for example if you work in an office where you have a “broadband” connection but share it with a large group of people?

The good news is that with Analytics the work happens without interfering with the user experience and no additional HTTP connections are needed. The bad news is, it is not done in real time. So if you are looking for a real-time test this will not work for you, unless you build your own seriously fast IP database web service that you can use asynchronously. The other option is to use the binary image payload test, but that also makes life hard for your users.

So, If you are looking for general statistics for a webapp over a date range then Google Analytics might be the way to go. Keep in mind you will end up with a chunk of Unknown data. As for making snap decisions, you can sniff user bandwidth while they surf with payload testing. Here is another sample page at AOL where they put up a simple fork page and determine your bandwidth speed using JavaScript image loading and setting a user cookie. I can think of a dozen reasons why this is a bad idea but I won’t go into that here.

PS. It is worth mentioning that Internet Explorer supports a built in behavior called clientCaps, which provides information about features supported by Microsoft Internet Explorer, as well as a way for installing browser components on demand. The connectionType property of clientCaps returns either lan, modem or offline. Since this only works in IE and doesn’t offer too much granularity, it might be a good test if you are only trying to test IE users specifically.

While there are paid services such as Browser Cam that do cross-browser screen captures, I tend to prefer using software since I can fine-tune the results to my liking, and I can see the results immediately.

add-ons via Firefox

ScreenGrab – This FireFox extension installs as an icon in the lower right corner of the he status bar.  This plugin uses the Gecko canvas for faster processing. IT allows for capturing either a selection, the visible window or the entire page. You can customize the options to save either a PNG or JPG image and add a timestamp to the filename, and captures frames and flash files sections without any problems.

PageSaver - This alternate extension from Pearl Crescent installs two new entries in the context menu of FireFox, allowing to save either the visibile portion or the entire page, although it does not allow for saving a selection. It has a slew of options however. For example you can assign a keyboard shortcut which is a great time saver.  You can also set your image filename patterns and choose the format of the saved image. PageSaver can capture frames and flash files.

Windows Software via Internet Explorer

WebShot - You may want to save the screenshot using IE for testing purposes in which case you need to use WebShot which is a tiny executable written in C by Nathan Moinvaziri. It is available in both a GUI format and a command-line format.  WebShot is able to capture any URL and handles frames, and flash files and can also capture java applets. The processing time is somewhat slow for some reason however compared to the other tools. WebShot offers a ton of options when using its command line version.

OSX Software via Safari

webkit2png - is the official command line tool for the Mac which uses python and the WebKit rendering engine, which is used in Safari.

Paparazzi - If you need a simpler GUI try Paparazzi which is a great shell on top of webkit2png, making your life much easier. Paparazzi like PageSaver has many similar options you can set for your captured screenshot images.

Unix Software

khtml2png – is a great command line tool for Unix which uses ImageMagick and libkhtml used in Konqueror to create images from web pages.