[Skip to Content]

Neptik-9th Nov 2016

How to use Browserstack to get your projects rocking across devices

When we develop sites, ensuring they work for everyone is critically important. We can’t develop websites that only work on Google Chrome because that means everybody else won’t be able to access the information, and in turn, this would damage the business of the company whose website it is.

So, we need to test our projects thoroughly, to ensure they work as best as possible across devices. We have to be careful here that we don’t obsess too much over making websites look pixel-perfect the same across screen sizes and browsers. The reality is this is often not possible, and the amount of time you’d spend achieving this probably isn’t practical either.

Luckily, in this day and age, us front-end developers have some fantastic tools at our disposal to make testing our projects easier than ever. The tool I use is probably the most popular, called Browserstack.

Screen Shot 2016-11-09 at 14.56.10

Browserstack allows you to test your sites across a broad range of devices, including iPhones, iPads, Macs, Windows, Android and more. The brilliant thing about Browserstack is that most of the devices you can text on are real devices – not emulators. That’s right, when you test on an iPhone 7 through Browserstack, you’re using a real iPhone. Somewhere in a building belonging to Browserstack are hundreds,  if not thousands, of real devices plugged in and ready to help you.

As you can imagine, the technology here is pretty remarkable. Browserstack even lets you test local sites, so you can really refine your dev/test workflow. A great way to get this working nicely is to use browsersync. If you’re not familiar with browsersync, it’s an npm module that, when integrated into your Grunt/Gulp workflow, automatically reloads the browser when you make changes to your code. This will work through Browserstack, so you can stick your local site into the device and as you make changes, you’ll see them instantly and be able to test them.

Screen Shot 2016-11-09 at 14.59.07

Another great feature of Browserstack is screenshots, which allows you to quickly generate a bunch of screen grabs of your site in a particular browser. You can then pore over them or us them in a report to show how well your site is working.

The best thing about this tool is it gives me confidence as a developer that when I’m putting a project live, I’ve already combed it and there shouldn’t be any serious issues. We still can’t expect to catch every bug before we go live, but Browserstack is an essential tool for your workflow that really improves your quality control.

If you have other suggestions for tools you use to browser test, give us a shout, I’d love to know your thoughts. Otherwise, check out more on Browserstacks features, and give it a go.