Well I guess I’ll start by saying that using the default Apple settings, debugging is a long and drawn out process involving alerting out potential problem areas to track down any bugs. This is not ideal and as Firebug has proved, there is a great deal of room for improvement.

So lets have a look at the options:

Safari Enhancer

Having read Pete Freitags blog one simple answer is to enable Safari’s Debugging Menu which is hidden by default. This will provide developers with access to the DOM Tree, JavaScript Console and even allow user agent spoofing.

To find out more see Pete Freitags article on JavaScript Debugging with Safari.

The debug menu can be manually enabled by simply typing the following in to the terminal window:

defaults write com.apple.Safari IncludeDebugMenu 1

For more information see the Apple Help site.

View Generated Source

Another method that I often use to debug JavaScript is to view the generated source created dynamically by JavaScript. This can offer invaluable insights into potential bugs.

Ditchnet have a very good article providing information on the process required to develop an AppleScript which when run will display the generated source of a page in BBEdit.

To find out more see Ditchnet article on how to View Generated Source in BBEdit for Safari.

Note: If you do not have BBEdit installed don’t despair you can always use TextEdit. Simply replace BBEdit in the code for TextEdit.

Firebug Lite

There is no getting away from the bug. Quite simply it rules. Firebug Lite although very cut down from the Firefox plugin does have some great features allowing developers to more accurately test and debug their code. Firebug Lite gives users the ability to write to an in page console which can be displayed on demand using predefined short cut keys.

To find out more see Firebug Lite.

what is the problem?

Well the standard procedure for most devs would be to test in as many browsers as they can on their machine and if they’re lucky enough to own a Mac or can obtain one then test in that as well. 

Now this approach has many problems including:

• It would be next to impossible to install and maintain all the browsers and operating systems required to fully test an HTML Template.  Therefore some browsers and operating systems would be missed.
• The cost of running a viable testing environment may be too high.
• It is very slow having to move from machine to machine testing on each one for bugs.
• To provide documentation for proof of work would be time intensive and laborious.

So taking this into account I tasked myself with a project to find a better solutions.  There must be one right?

solutions

Well there is.  After hunting the Internet for a good while I came across three solutions; Browser Photo, SiteVista and Browsercam.  All three provide online website testing capabilities, however, the best of all these applications was clearly Browsercam and this is therefore the focus of this article.

browsercam

Browsercam provides “Cross-Browser Screen Captures and Instant Remote Access”, meaning developers can fully test a websites appearance and functionality across multiple web browsers (I.e. Internet Explorer 7, Firefox etc) and operating systems (I.e. Windows XP, Windows Vista etc) ensuring the quality of our sites are as high as possible.

This solution offers three main services:

• Screen Capture Service
• Remote Access Service
• DeviceCam

screen capture service

Roughly explained the screen capture service allows users to take screen captures (shots) of their chosen page(s) across multiple platforms and browsers of

their choice and review the images of part of a project on completion of the capture. 

The capture service is further enhanced with features such as a choice of screen resolutions from which to take the screen captures, flash support on or off, browser size or full screen captures (past the fold), so many browsers you won’t no where to start ranging from Netscape 4.78 on Windows 2000 Professional to Safari 2.0 on Macintosh OSX 10.4.

remote access service

Remote access provides users with the ability to access machines within Browsercams server farm and not only fully test a sites appearance but also functionality as users have direct access to the browsers.

devicecam

Finally DeviceCam provides a very similar service to the Screen Capture service, with the only difference being the captures are rendered on PDAs. 

benefits

The benefits of this solution can be enormous and here are just a few:

• Increase in the quality of website development through more thorough testing.
• Possible increase in ROI by ensuring the site works as expected across browser.
• Allows users to provide proof of work and higher quality documentation.
• Allows sites to be fully tested online anywhere anytime.
• At less than $1000 for an anual subscription to the premium package it is relatively cheap.  Please note this is the most expensive package and cheaper packages are available.

the future of browsercam

Well its looking pretty rosy for Browsercam with several more useful features to be released such as:

• BC-Virtual Service – Just released providing users with their very own personal drive space, which allows them to load a wide variety of operating system images, creating personal virtual machines.
• EmailCam Service – Currently in production this service will allow users to test their HTML Email Templates in a multitude of email clients.
• Browsercam API – Browsercam have confirmed to me they are planning to release an API for their customer base allowing users to fully integrate into Browsercams services from their own site.

I personally recommend this service and have been using it for some time now.  You can have a look for yourself on the Browsercam website.