Method to capture a screenshot of user's browser to aid in bug reporting

Question

I'm looking for a way to make it easy for technically unsophisticated users to submit screenshots of their browser to me, to aid in debugging web application problems.

There will be a button on all pages inside a web application they can use to report problems, which I would like to submit a screenshot (among other things).

http://www.snapabug.com/ is very close to what I want, but I need to be able to customize a few things that service won't let me.

Production environment is LAMP. I expect there must be something Flash-based that can do this, but I've not been able to find something.

Broker

what kind kind of customization do you need? – Barham

I don't want any of the live agent stuff, and I need to add things like backtraces and application variables to the submission, and I can't have the third-party branding. Snapabug won't work for me, but the screen capture feature is exactly what I am looking for. – Broker

Answer 1

Use JavaScript to grab the HTML, user agent and browser details (plugins, etc.) and send it to a bug reporting page with AJAX.

Amah

don't forget cookie values, and post data – Frowsy

Answer 2

Buzz,

if you need a tool which integrates already with existing bugtracking solutions (fogbugz, redmine, JIRA, TFS, ...) you should give Usersnap a try. I think it does exactly what you need! Full disclosure: I'm one of the co-founder of http://usersnap.com

Estelleesten

Answer 3

Buzz,

Yeah, I came across that tool as well and it seems to be pretty cool. The closest thing I can point out is Selenium. Selenium can take a screen shot and save the page source. I believe it uses JavaScript to make the necessary calls.

You could build something around that I suppose.

Walter

Singles

IIRC, the user needs to have Selenium core installed as a browser plugin(?); as long as you're OK with these limitations, it would work. – Elisavetpol

It won't be possible for me to require they install that. – Broker

It was a suggestion meaning you can peak at the JavaScript source code and write your own solution. No, I wouldn't recommend they install Selenium. However, you can write your own JavaScript code to do the same thing. More importantly, what I do is capture the actual HTML source and whatever information the client sends (http headers). With this, I can then debug the problem. We can take the html source and run it in Chrome, Firefox, IE, Safari, Konqueror, etc. and see how that displays. I'm not a fan of client-side tools, instead capture the server-side as you can trust yourself. – Singles

Answer 4

Buzz,

Backtraces and application variables can be stored in JavaScript variables and will be grabbed by SnapABug when sending the screenshot.

The Live Agent stuff are only enables if you choose to do so in the configuration. By default, they are not enabled.

Also we now have the ability to create custom forms to match your site look and feel and can remove the branding if this is a big deal.

Contact us at: [email protected] and we'll come up with something that works for you.

Cheers, Jerome.

Arlyn

Answer 5

Have you seen this one? http://userfly.com/

Witness

Answer 6

Getting a session with logins is tricky, but can be done with

https://github.com/leonid-shevtsov/headless and https://github.com/lanej/selenium-webdriver

On a separate server.

Hosted solutions like http://url2png.com don't support sessions (yet) I think.

Rattlesnake