Adobe Edge Inspect vs Ghostlab May 24, 2013
NOTE: This article is now over two years old, and I’ve not kept up on either of these apps. So it’s bound to be wildly outdated by now. You’ve been warned.
Being a front-end web developer in 2013 means you’re going to have to do a lot of testing on a lot of different devices. At work, we’ve been using a web-based service called Browserstack to test on many different devices and platforms, including iOS, Android, Windows and Mac OSX. This allows us to see what sites look like in way more devices than we could ever feasibly (or affordably) accumulate on our own. However, the mobile device tests are all done via software simulators, which often aren’t 100% accurate or reliable. They’re a good first pass, but sometimes you just have to test on the real deal.
When working on responsive sites, I generally have my 3rd-gen iPad, my iPhone 4S and a Nook Color running Android in front of me. And for good measure, another Macbook running Windows 7 with Internet Explorer. The real pain is loading up the same page on every device, then having to go back and refresh them all every time you make a change, which is usually every minute or two.
Adobe Edge Inspect
For that reason, I’ve been using an app called Adobe Edge Inspect, formerly known as Adobe Shadow. As with all Adobe “Edge” products (like Inspect, Reflow, etc), it started out in a “preview” status, which was free. As of September 2012, it’s out of preview and now part of the Creative Cloud paid membership.
To use Edge, you install an app on your desktop, then install a plugin for Google Chrome and switch it on. It will then start listening for other Edge-enabled devices on your network.
Step two is to install the free Edge Inspect app on any device you want mirrored. It’s available for free in the Apple App Store and the Google Play store. Once you install and launch it on your device, you just select the name of the machine Edge is running on, and it will give you an authentication code. Type that into the Chrome plugin, and the device is now synced.
How devices are listed in the Edge Inspect plugin for Chrome
From that point on, as long as Edge Inspect is turned on in Chrome, whatever you load in your browser will get mirrored to the devices, almost instantly, all via your internal network. I’ve used Edge Inspect quite a lot lately on a new responsive project, and I do like it. It’s not without it’s issues, though, some of which can be very frustrating.
Edge Inspect: The Good
- Fast, (mostly) accurate rendering across devices
- You can take screenshots on each device (although I’ve never actually used this feature)
- While the app is running on a device, the screen does not go to sleep. This is a nice feature, as you’re not constantly clicking and sliding on devices to wake them up.
- FREE (with a paid Creative Cloud member account). A pro or con, depending on which side of the Creative Cloud subscription debate you’re on. I personally love it.
Edge Inspect: The Bad
- Requires installing and running a standalone app to do any testing
- Requires Edge Inspect app to be installed on every device.
- Requires installation of Chrome plugin for managing devices, debugging, manual reloads, etc
- Currently can only be run on Android and iOS devices. Meaning, no testing on other browsers, platforms, Microsoft Surface, etc.
- Often has a real problem loading external Typekit fonts. On any given day, at least one device will refuse to load web fonts from Typekit. Normally it’s the iPad, but it’s a crapshoot and completely random.
- Sites aren’t loaded directly in the device’s native browser itself. I’m assuming on the iPad/iPhone, it still uses Safari, but I worry about it being accurate sometimes.
- Sometimes devices will just “forget” to refresh and you have to manually hit the refresh button from the Chrome plugin
- You can’t tell Edge to just mirror a single tab in Chrome. Every single time you select a new tab, that tab’s URL is loaded into each device. This is super annoying when you’re needing to flip back and forth to Google, Stack Overflow, or just check in on Facebook. You know, in case anything important is going on
- Requires a paid Creative Cloud membership
The other day, I was listening to Andy Clarke’s Unfinished Business podcast and one of their sponsors was a Mac app called “GhostLab”. As they explained what it did, it sounded very much like Adobe Edge Inspect, although they never mentioned it as a potential competitor. It sounded cool, so I made a mental bookmark and looked it up when I got into the office. Their website is pretty and to the point, with a mascot that looks like the love child of Eve from WALL-e and one of the ghosts from Pac-Man. They offer a fully-functional 7-day trial, so I downloaded and installed it.
Setup is super easy. Once installed, you simply drag a URL (ie, http://localhost) or a folder containing html files into the main window, and it creates a site entry. You can then name it whatever you want, and specify which file extensions you’d like to watch for changes. When any of those types of files are changed inside the specified local folder, Ghostlab refreshes all device clients.
To start a Ghostlab server, just click the big ‘play’ button beside a site name. It will start a new server which is available via your internal IP address, like so: http://192.168.1.3:8080. The fact that it uses the 8080 port is nice, because it leaves you free to keep running your local server on port 80.
To connect any device, just point its web browser to that IP address. That’s it! No additional software to install on every device. One really clever and helpful thing the Ghostlab folks have provided is a testing page preset. This not only lets you test that Ghostlab is working, but when you hit it in a browser, it displays all kinds of useful information, such as the user agent string, viewport width and height, device width and height, pixel density, aspect ratio and more. It also gives a handy guide for what media queries the device supports.
Useful information included with Ghostlab’s test site
Once you’ve loaded a testing site in a browser, it’s added to a list of clients in the right sidebar of the Ghostlab window. Unlike Edge, which just displays a generic device name, in most cases Ghostlab actually lists the browser and version. For others, it may just list the device (ie, iPad). I’ve only had one device so far, the Motorola Xoom, not identify itself properly. And if you double-click on the device name, you get a few more added tidbits, like screen size, window size, operating system, etc.
The Ghostlab window, with a few devices/browsers listed.
Once you’ve loaded up the site in a few devices, any time you refresh the page on any one of them, they all refresh almost instantly. This includes refreshes triggered by editing a file. Additionally, any time you scroll a page up or down on any device, all the other devices scroll as well. This isn’t always perfect, I would assume due to difference in viewport heights, etc. And on more than one occasion, screens would inexplicably change positions, even without touching them at all. Still, the feature is nice, as you’re not constantly scrolling down on every device every time to see the one thing you keep changing.
Like Adobe Edge Inspect, Ghostlab also supports remote inspection of code on devices. This appears to be handled the same way as Edge, though. You double-click the device name and click a ‘debug’ button, which launches a web inspector in Chrome (not sure if it works in other browsers, depending on your default). From there, you can select elements as they appear on your device, with highlighting and everything. And you can manipulate CSS and HTML just like you would in Chrome. This is often a slow process, as sometimes on a complicated page you have to wait a couple seconds for each node to open, but it’s better than nothing. I’ve also had some browsers not work at all, such as trying to inspect IE9 on a Windows VM on the same machine.
Ghostlab also has some other features I really haven’t had time to play with yet, such as synchronized population of forms across devices, shortcuts to pre-populate forms with data, and workspaces, which allow you to save multi-browser setups on your desktop machine. It also supports allowing outside connections to your test servers, assuming your network allows it. This could be handy for doing remote walk-throughs with clients without the hassle of doing a screencast or Webex call.
Ghostlab: The Good
- Can be used in any browser on any platform, no additional software required. I tested no less than 9 borrowed devices today and didn’t have to make them install an app on every one.
- Setting up multiple entries for multiple test sites saves time.
- You can specify the debugger you want to use (haven’t tried this, though)
- So far, I’ve had zero problems with external web fonts loading
- Synchronized scrolling cuts down on swiping fatigue on multiple devices
Ghostlab: The Bad
- Inexplicable phantom scrolling from time to time
- Devices constantly going asleep is annoying. I realize a solution like Ghostlab can’t possibly fix this, but it’s a pain nonetheless. I’ve resorted to telling my devices to never go to sleep, which can be a battery drain, especially if I walk away and forget to turn them off.
- Mac only. Personally, I’m a devoted Mac user and respect the developer’s exclusivity to that platform. But I realize this is a deal-breaker for many.
- The price. At $49 US, I’m a little concerned it’s on the high side. Not saying it’s not worth it. I just want them to sell a bunch of copies.
Having only spent two full days using Ghostlab, I can say I like it a lot and can see it getting better and better. I think the few technical quibbles I might have so far will be dealt with in upcoming releases, so I’m not too worried about that. Part of me still thinks $49 is a bit steep, especially if you already have a paid Creative Cloud membership. But then again, I have no problem paying indie developers for something I love and use every day. Adobe is saying a new version of Edge Inspect is coming out in June, along with their other new Creative Cloud (CC) updates, so we’ll have to see what they have up their sleeves as well.
Update – 5/24/13, 10:00am: Ghostlab just released 1.0.2, which most notably adds the ability to add or remove custom HTTP headers for things like cache-control and expires headers.
Update – 5/24/13, 12:00pm: Just got a tweet followup from an Edge Inspect developer that none of the Edge Inspect apps are Air-based. For some reason I had it in my head the main app (not the plugin or mobile app) was Air-based, but I’ve amended the article with the correction.
Update – 6/1/13: 8:06am: Updated to clarify that Adobe Edge Inspect is no longer in “preview” status and requires a paid Creative Cloud membership. Also clarified that Ghostlab is Mac-only.
Update – 12/9/13: Windows version of GhostLab just released!