I recently had a chance to test out Ghostlab – a desktop application that takes the hassle out of multi-device testing. The app is dead-simple to setup and it syncs events across all screens including scrolling, clicks, reloads and form inputs. It also has an inspect feature which helps you to find problematic code on a specific device and quickly see how changes effect other devices.
Setup
Ghostlab uses your IP address to link each device together and keep events in sync. Unlike other testing apps, there is no extra setup for each additional device. Here are the step-by-step instructions to get Ghostlab running in your testing environment:
Static Project or Live Website
- Enter a URL to a live website or path to local directory. You can simply drag and drop a project folder to the app and it will recognize the action. The new project will appear in the projects area.
- Click the play button next to your project. This should produce a message that reads: ‘Ghostlab server running on your local IP address’.
- Click the green rocket ship button to launch the project in your default browser.
Mobile Devices
If you want to test your project on another device, enter the local IP address and port number that Ghostlab used to launch the project (i.e. http://192.168.1.6:8005 ) into the device’s browser. This IP address can be found by launching the project in your default browser.
Dynamic Projects (WordPress)
You can use Ghostlab with server-side frameworks such as WordPress or Rails, but you will need to use a localhost URL instead of the project directory path. Ghostlab is not a web server, so it cannot process server-side code, but it can run along side such web servers. For example, if you are using MAMP to run WordPress locally, your project URL will look something like: http://192.168.1.6/project_name or http://192.168.1.6:8000/project_name depending on how your ports are configured. This is the URL you will need to give to Ghostlab.
Virtual Machines
I use VirtualBox to test Internet Explorer and older versions of Firefox. The process to open a Ghostlab project is the same as with mobile devices – just grab the IP address and port number from your default browser and enter it in your virtual machine’s browser. This will not work if the virtual machine is running on a remote network.
Testing
Ghostlab allows you to inspect markup on any device just like you would with a desktop browser. This is really great because mobile devices don’t typically have a way to inspect code, which can make troubleshooting complicated. Follow these instructions to inspect code on any device:
- Click on the set of brackets ‘<>’ next to the device you want to test.
- Select the device link from the targets list in the browser.
- Click the resources tab to open the page inspector.
Issues
The only issue I’ve experienced with Ghostlab is actually not anything they have control over. If you are expecting to run multiple devices on a slow network, you are going to frustrate yourself as you wait… and wait for each change to load across every device.