How best to get the user's browser information and settings for debugging purposes?

Question

My problem is that I have a user that is having a problem displaying a portion of website I am creating, but I am unable to reproduce it on any of my browsers, even with the same version of the browser.

What I'm looking for is probably a website that I can send the user to which will tell me what version of the browser they are running along with the plugs installed and any other information that might affect the display of a page.

Any one know of anything like this?

Edit: The problem is related to CSS. They want some special image around all the text inputs, but on the users computer the text input displays partially outside of the image which is setup as a background.

I need more user specific information than Google Analytics as you can't separate out a specific user. I also suspect that it's more complicated than just the user agent.

I also can put the website out there publicly because they want to keep their idea private until it's released...grr.

Answer 1

The classic approach is to use the useragent to determine the browser and OS

Looks like this site will display it for you.

As for plugins there are various ways to test in javascript for the plugins you are looking for.

You have to test for these on the client side as there is (to my knowledge) no way of detecting these on the server side.

The following crude example shows how to test for acrobat reader in IE and Mozilla browsers and returns if it was installed and if so what version in an object.

function TestAcro()
{
var acrobat=new Object();
acrobat.installed=false;
acrobat.version='0.0';
if (navigator.plugins && navigator.plugins.length)
{
for ( var x = 0, l = navigator.plugins.length; x < l; ++x ) 
{
//Note: Adobe changed the name of Acrobat to Adobe Reader
if ((navigator.plugins[x].name.indexOf('Acrobat') != -1) | (navigator.plugins[x].description.indexOf('Acrobat') != -1) | (navigator.plugins[x].name.indexOf('Adobe Reader') != -1) |(navigator.plugins[x].description.indexOf('Adobe Reader') != -1))
{
acrobat.version=parseFloat(navigator.plugins[x].description.split('Version ')[1]);
if (acrobat.version.toString().length == 1) acrobat.version+='.0';
acrobat.installed=true;
break;
}
}
}
else if (window.ActiveXObject)
{
for (x=2; x<10; x++)
{
try
{
oAcro=eval("new ActiveXObject('PDF.pdfCtrl."+x+"');");
if (oAcro)
{
acrobat.installed=true;
acrobat.version=x+'.0';
}
}
catch(e) {}
}
try
{
oAcro4=new ActiveXObject('PDF.pdfCtrl.1');
if (oAcro4)
{
acrobat.installed=true;
acrobat.version='4.0';
}
}
catch(e) {}
try
{
oAcro7=new ActiveXObject('AcroPDF.PDF.1');
if (oAcro7)
{
acrobat.installed=true;
acrobat.version='7.0';
}
}
catch(e){}
}
return acrobat;
}

Answer 2

Google analytics? If you have any sort of web analytics program installed on your web server, generally they also give info such as the operating system, web browser, etc. You could use the user's IP address to find his info in your logs.

Also, what issue are they having? We might be able to help..

Answer 3

Unfortunately, I don't know of any site that will log every detail about the users browser, as you request.

But perhaps browsershots.org could help with your debugging? It allows you to test you design in a lot of different browsers very easily.

EDIT: ... unfortunately restricted to the initial design on page load, since it simply takes a screenshot for you.

Answer 4

I did find this program, but unfortunately it's not a free service, nor is there really anyway for me to get the information on that page (unless I pay for it): http://www.cyscape.com/showbrow.aspx

Answer 5

If it is a CSS issue and the issue is with IE (most often) you may want to consider using the IE 7 library.

When it comes to CSS... I get it working properly in Mozilla browsers then I see what I need to conditionally hack to make it work in IE. This library comes in handy.

Also if possible I would try to limit support to the major modern browsers out there. And if possible try to include the mobile browsers (iPhone, etc).

Hope this helps.

Answer 6

The useragent and related HTTP headers that are sent in all requests can give you some information (Browser and version), but for detail about the client-side installation, you may be out of luck for an automated capture mechanism that obtain a list of arbitrary plugins installed on the client browser. This would be a security violation, so unless a browser intentionally exposes them, you wouldn't get access to this without installing a client-side binary.

Depending on the relationship with the user, you could try something like Go2Meeting or CoPilot so that you can see the bug in action yourself. This would also allow you to peruse the browser settings and plugins.

Answer 7

I've been using Ocean's Browser Capabilities in my ASP.NET web sites. It is really easy to get many properties. Specifically I'm using the Ocean2.Web.HttpCapabilities library.

To get the browser type and capabilities:

string browserSettings = Ocean2.Web.HttpCapabilities.BrowserCaps.Build.ProcessDefault(HttpContext.Current.Request);

Here is a sample of the results:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; Media Center PC 5.0; InfoPath.2)
os - Windows Vista
platform - WinNT
win16 - false
win32 - true
win64 - true
type - IE7
browser - IE
version - 7.0
BrowserBuild - aol - false
cookies - true
javascript - true
ecmascriptversion - 1.2
vbscript - true
activexcontrols - true
javaapplets - true
screenBitDepth - 1
mobileDeviceManufacturer - Unknown
mobileDeviceModel - Unknown

Answer 8

You could also try this:

BROWSER PROBE finds details about your browser, plugins, system, screen and much more. A great tool for support staff and casual users alike.

Browser Probe