Join Anastasia McCune for an in-depth discussion in this video Testing your project with Edge Inspect, part of Captivate Projects: Publishing for Mobile and the Web.
When you're ready to test your captivate project out, you can get a pretty good feel for how it will behave by going to the preview button, and then previewing the project. But what about testing the project out on mobile devices, Captivate 8 works with Adobe Edge Inspect... In order to allow you to see what your project will look like on various devices remotely, that way you don't actually have to deploy your project to the web to test. Let's take a look, so to get your computer an devices ready for testing, there is a little set-up required. First, is to download or update the Adobe Edge Inspect program to your computer.
You can find it in the Creative Cloud app on your computer, or you can get it from this url. Once that's installed, you need to open up the Google Chrome browser. And it must be Chrome, not any other browser. Then find the Edge Inspect plugin for the browser. The easiest way to find it is just to search for it. Finally, you'll need to gather each device you want to test on. You need to go to the appropriate App Store for that device, whether it be Google Play, the Amazon App Store or the Apple App Store. You need to search for and install the Edge Inspect app on each device that you want to use.
Next, you need to make sure that your computer and your devices are all connected on the same Wi-Fi network. So, I've got all of this set up. Now, I'm going to start Edge Inspect on my computer. Now it doesn't look like much has happened, but that's okay. In Captivate, I have a responsive project open. So, you can see how our break points are going to work here. We have three different layouts set up, depending on what size of screen our user is watching our project from. You can really see the responsive design in action, here on slide seven. This is our primary view.
And this is what users looking at our project from either a computer, or maybe on an iPad. Held in landscape orientation will see. The next break point is called Tablet and this is the view that people would see if they're watching the project from a Tablet held in portrait orientation. The third break point is mobile and this is a good example of what the project would look like. If you're viewing it from something like an iPhone. So, you can see how the design looks different. From the larger break points we've got two different images. Also there's a text box that it tells some information about the hotel.
On the mobile view, that text box when it's turned on will cover up most of the screen. There's also only one picture shown her instead of two. The second picture's off to the side and won't appear. So, let's check this out in different browsers using edge inspect. I'm going to go to the preview menu and then in Adobe edge inspect. So, edge inspect is going to start up Google Chrome. Now I'm going to click on the edge inspect icon here in the upper right. And you can see that it's waiting for a connection. So now, I'm going to go and start the Edge Inspect app on each of my devices.
The first time you connect to your device, a pass code should come up on your device. Type that in, and now it's paired with your desktop. After that, Inspect should remember your devices. Which is what we see here. My iPad is connected. So, I'm also now going to connect my Android phone. And so now you can see my Android phone is connected as well. Now, you can start synchronically browsing. What's on your computer screen will be piped through to your devices via wireless through Edge Inspect. And this is really useful. I can see that the app looks pretty great on iPad.
I can also see that I need to make a change to this text box on this first screen, here on my phone. Now let's go on a little further into the project. On this screen that talks about the Landon Hotel in London, I can see that the layout on iPad looks pretty good, and I'm not surprised because that was the primary view. On the phone, you can see that it's using the layout with just the one picture. I can see though that I need to make another text size change to one of the text boxes here. So, I can make those changes in Captivate, and then preview and edge inspect again to see the updates.
You can also take screenshots of your device. You can just click this little request screenshots button. Once the screenshots are ready you can open the folder containing the screenshots by pressing this button here. Each screenshot is accompanied by a txt file. So, the set of files are named with the date, time and device name to identify each screenshot. You can then open up the text file in any text editor to see information about the screenshot. Like the screenshot's URL, the device's OS name and so on. As of the creation of this movie, there are a few known issues with the edge inspect process, namely audio does not work in iPhone and video on your project doesn't work on Android devices.
Edge Inspect allows you to streamline the preview process with synchronous browsing. It's easy to check out your project's performance across devices to help you polish your Captivate before publishing.