Types of Testing
Real Device Testing
Always test on real devices. Don't waste time on manually setting up each testing device. Choose tools that let you test across many devices in one-click.
Always test on real devices. Don't waste time on manually setting up each testing device. Choose tools that let you test across many devices in one-click.
TL;DR
If you’ve started testing your site on different devices within the last two years, it’s likely you’ve gone through set up steps for the different platforms multiple times.
You’ve experienced the frustration of using your site on a device, seeing something wrong, having to switch back to your development environment, fix it, rebuild, push to each device again, maybe having to repeat some or all of the set-up steps.
Testing on a mobile device away from your development environment isn’t a practical workflow.
What you need is a tool that lets you connect to any device in one-click. Once connected to any device, changes made in your development environment are automatically pushed to connected devices.
The Web Starter Kit has a built in HTTP Server for previewing your site. This means that you can test your pages on any device without messing with other tools. So long as your development environment and devices can be on the same network, you can access the same local version of your site on any external devices.
Arguably the biggest frustration with testing on real devices is the inability to quickly fix a bug that you see on the real device in your source code.
With live browser reloading, debug your source code on your development machine and see the changes instantly on your mobile device. As you change your source code, any instance of your site opened on any device is automatically reloaded live.
The Web Starter Kit takes reloading that bit further. As you change your source code, the tools compile Sass into CSS, minify and concatenate JavaScript, CSS, HTML, and images and push the optimized site.
Sync clicks, scrolls, and navigation between devices so you can see exactly what breaks and what visually needs improvement.
Powered by BrowserSync , the Web Starter Kit synchronizes clicks, scrolls, forms and live-reload across multiple devices as you edit your project.
The Web Starer Kit supports the following devices:
Brad Frost’s Test on Mobile Devices without Breaking the Bank is a good starting point for deciding which devices you need and provides links to get those devices. But it’s not always possible to own the devices you’re targeting, especially if you’re a freelancer or don’t work for a large company.
There are an increasing number of open device-labs that can loan you hardware, but even if you do own your target devices, it can be a tedious process setting them all up for testing.
The next guide covers a range of cloud testing services that can get you most of the way in terms of testing on a range of devices without actually having those devices.
Inspired by Synchronized Cross Device Testing , here’s a summary of cross-device testing tools:
| Cross-device Testing Tool | Description |
|---|---|
| Web Starter Kit | Point any device to local version of your site. Update source files and tool automatically optimizes and pushes content to browser. Synchronized testing across devices. Develop on Mac, Linux, or Windows platforms; it's free. |
| Grunt + LiveReload | Similar to Web Starter Kit, you can enable cross-device testing where each change you make in your editor causes a reload in any device you've opened your local site on. Some set-up required to get this going. |
| Adobe Edge Inspect | Loads the URL from your current Chrome tab onto any local device into a Webview inside the Adobe Edge Inspect app. You need to install each device manually and use specific clients on each single device. Requires a subscription to Creative Cloud. |
| Remote Preview | You host the tool's html page and content and point your device's browser to it. The tool regular checks a file for a URL and loads it into an iframe. Light-weight tool great for chaining devices together and easily changing URL across all of them. Doesn't support synchronized testing though. |
| Ghostlab (commercial) | Creates a local server from within the app for any directory. Any connected browser will sync interactions with the page. Only available for Mac; purchase fee. |
Updated on 2014-05-29
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our Site Policies .