I’m pleased to announce that this week we’ve released an exciting new feature – in-browser screenshots.
BugHerd is the first (and only) visual feedback tool that will capture accurate screenshots, on desktop and mobile, on Safari, Chrome, Edge (IE), and Firefox, without the need for browser extensions or a mobile app install. This is a seriously big deal. It’s been many years of research and development, but we’ve finally been able to deliver. If you’re working with clients and need reliable screenshots without having to install anything, this is for you. This feature available on our Premium, Deluxe and above plans.
We’ve been working on this feature for many years, but until now the technology has not been available to do reliable screenshots across browser and devices. No one has done it 100%. Not us, and not our competitors. The technology just hasn’t been available.
Without getting too technical, until now there have been three main ways to take a website screenshot. First, and what BugHerd has relied on until now, is browser extensions. A browser extension gives a pixel-perfect representation of what the user saw. Unfortunately, browser support is variable, and mobile devices are not supported. We chose this option because perfect screenshots were more important to us than mobile support. That was a reasonable choice 5 years ago, but times have changed, and we recognise that.
The second, and arguably most popular method, is to rely on an open-source library called “html2canvas“. Many of our competitors use this, and we’ve toyed with it in the past, but we’ve always dropped it because it has, and will only ever have, partial CSS support. The biggest issue, however, is that it’s only ever an “interpretation” of what the user saw. It fakes a screenshot by manually rebuilding your webpage in a Canvas element. It’s really quite amazing that this works at all, but if you’re a digital agency and a customer is reporting a layout issue, it’s just not acceptable for a screenshot to be an “interpretation”.
The third, and most complex, solution is to use a “copy on server” solution. This solution involves taking a copy of the HTML the user is viewing, transporting it to a server and then using a browser on the server to take a screenshot. We very nearly released a version of BugHerd with this implementation, but ultimately decided not to. While this will technically give a 100% accurate screenshot (for some browsers), in most cases it won’t be in the user’s browser (e.g. it’ll be in Chrome, even if they’re using IE) and, more importantly, it cannot support mobile browsers. This limitation is why some companies will ask you to install a mobile app to take screenshots.
So those are three ways to do it, and all of them have limitations. If you want mobile support, you have to use the less-than-perfect “html2canvas” option or a native app. If you can live without mobile, but don’t want end users to install anything, you have to go the “copy on server” route which, whilst better than html2canvas, is still not perfect. And finally, we’ve always opted for browser extensions because, whilst support is limited to Chrome/Firefox/Safari on desktops (and it requires installation), the browser we do support provide pixel-perfect screenshots.
The fact is that all three of these solutions mostly work, most of the time. If all you’re doing is “end user feedback” where getting the gist of a problem is enough, then something like html2canvas or “copy on server” is going to be fine.
But for BugHerd, near enough was never good enough, and so we’ve refused to release an alternative to browser extensions until now! I can’t go into too much detail about how exactly we do it, it is a secret after all, but I’m super proud of the team for hitting this tough milestone. It’s been a long time coming, but it’s finally here.
For known considerations check out the KB article here.