BugHerd

/

Blog

/

Screenshots without a browser extension

Screenshots without a browser extension

BugHerd now offers the only solution for real desktop and mobile website screenshots without needing to install a browser exstenion or mobile app.

alan

|

May 30, 2018

Follow
|website visual feedback tool

I'm pleased to announce that this week we've released an exciting new feature:

In-browser screenshots.

[caption id="attachment_2466" align="aligncenter" width="500"]

website visual feedback tool

(Those of you not using an online feedback tool with screenshots can relate to getting this kind of "visual website feedback")[/caption]BugHerd is the first (and only) online 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 on responsive web design.

How do screenshots without a browser extension work?

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 arguablymost 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 bug tracker software 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 totake 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 browsers we do support provide pixel-perfect screenshots for great visual feedback.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 for online feedback.But for BugHerd, near enough was never good enough, and so we've refused to release an alternative to browser extensionsuntil 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.Enjoy!---For known considerations check out the KB article here.

Recent articles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

Text link

Bold text

Emphasis

Superscript

Subscript

Want more resources like these? Subscribe to the BugHerd Blog 📥

✅ Subscribed!
😕 Oops! Something went wrong while submitting the form.