Normally when I’m presenting and want to show some functionality on a mobile device, I use an IPEVO Point 2 View USB camera to display the device in a window on my laptop. The IPEVO is inexpensive and works very nicely. Greg Wilson was telling me earlier about Reflection and I subsequently fell down a very deep rabbit hole. This nice little app uses AirPlay mirroring on your iPhone or iPad to mirror multiple devices onto your Mac. Combine it with Edge Inspect and things start to get very interesting.
First off, there’s Reflection. Since it uses Airplay, this is only for your iOS devices. In fact, this is IOS 5 specific. It only works for an iPad 2, iPad 3 or iPhone 4S. Still here? Ok, great. Keep reading – this gets fun.
You can install the trial here. Install, but don’t run the trial just yet. You only have 10 minutes to run the trial before it expires and you might as well have things setup on your mobile device first.
First off, make sure your Mac and your device are on the same subnet. I used the Personal Hotspot service on my phone to connect my iPhone 4S, iPad 2 & Macbook Pro. I’m like a walking Apple commercial…
Now, run Reflection on your Mac and, on your iPhone or iPad double-tap the home button and swipe on the multitask tray until you see the AirPlay icon:
Tap the AirPlay icon and select your Mac from the list. Finally, enable mirroring and you should see your iPhone/iPad show up on your laptop. Here’s a snapshot of my iPhone on my desktop:
Pretty nifty, eh? (Yeah, I know. The battery’s almost dead…)
Now we’re cooking with gas! Let’s throw Edge Inspect into the mix…
Edge Inspect, originally known as Adobe Shadow, is an inspection and preview tool that allows you to setup your device browsers as slaves to your laptop browser. Bring up a website in your browser on your laptop, Mac or PC and any Shadow on your connected Android or iOS devices will show the same site. You’ll be able to instantly preview how the website gets laid out on each device. Update the URL in the browser on your laptop and each of your devices shadows your changes and shows the new site. As well, Edge Inspect allows you to connect to the browser on a connected device from your laptop, and use the Chrome web inspector to navigate the DOM, CSS, HTML, etc. Not only that, but you can actually change for example CSS values on the fly and see what effect that will have on the device. The changes don’t persist obviously, but you can iteratively experiment with changes and see the effects dynamically.
Reflection & Edge Inspect Together
Combining the 2 products can prove very interesting though. Here are my iPhone & iPad shadowing the browser on my Mac:
If I change the URL in my laptop browser, the devices, mirrored on my laptop follow along:
And here I’ve gone in using Inspect’s inspection tool and actually removed the menu at the top of adobe.com website on my iPad!
The whole thing makes my head hurt.