As part of a google groups thread about putting a Bootstrap skin on this blog, and a question about testing mobile devices, I found this useful little link on Charlie Arehart's list of Page Appearance Testing Tools:
This sounded intriguing so I clicked through to the Adobe Edge Inspect installation page. It took a few hops to get set up as I wasn't yet a member of Creative Cloud, had to reset my old Adobe Password, then had to install the CC manager and the Inspect app. (Tip: do some reading about how it works while it is installing. There's a lot to figure out).
Along with this there are installation links for the Android app (which I was able to send to my phone and tablet via the Google App Store) and the Chrome PC browser. It felt like a lot to do, but I had the sense something cool was gonna materialize from all this activity.
Once I got everything set up, it was just a matter of restarting the CC manager, the Inspect app and the extension (this is a good time to reboot your computer, if your'e due), and then firing up the app on my phone. Clicking on the "In" extension icon in Chrome, I am shown my PC's Host name and IP address and a 'waiting for connection' icon.
On the phone was something similar, showing the WiFi network I was connected to but no other devices. So on the phone I selected the Manual Connection option and typed in the PC's IP address. Just at the point that I was thinking there must certainly be more efficient and user-friendly tools for this, and I should stop this monkey wrenching and go find them... bam! The page i was looking at in Chrome on the desktop appeared full screen on my phone.
Now that everything is up and running, and I've reset my patience meter a little with this app, I am duly impressed and can't wait to hook up other devices.
I've got my Droid phone sitting here on my desk and as I browse around in Chrome, the Inspect app, acting like a mobile browser, shows me the same URL rendered as the phone sees it. I can turn the phone, zoom in and out, scroll... that does not appear to be synced, allowing you to inspect the page once it is loaded on the phone. But if you change pages, or change tabs, so does the phone.
(Of note, it did not automatically show me my blog admin since that is behind a login. From what i see, the mobile device still has its own session on the site, in other words Inspect isn't just passing html to your mobile App, but actually loading the pages directly in the mobile browser as if it were a direct request. Which means, you can test not only appearance but behavior to some extent.)
This also works for LocalHost pages - anything you can view in your browser, you can auto-load on your mobile device's screen - giving you, essentially, a dual-screen-size preview of any page you are viewing, which means, any page you are working on.
Add to that the power of the "Remote Inspection" option (found via the "In" extension icon in the desktop browser). This behaves a lot like any element inspector except it loads the source of the code as the phone is seeing it, and the styles as the phone interprets them! As I mouse around inside the inspector window on the desktop, the visible elements on the phone respond, just like working in Firebug or Chrome's element inspector on a local desktop browser view. This is no doubt going to be incredibly useful as I get more into responsive design and layouts meant to fit multiple screen sizes.
I'm excited to get my tablet and phone propped up next to my PC monitor, and build my next boostrap site, able to see the rendering on multiple screen sizes at one time, while I work on the code on another monitor... slick stuff. Check it out:Adobe Edge Inspect