Adobe Shadow: Remotely Browse, Inspect & Debug Websites [Android, iOS]
Adobe Shadow is a cross-platform app for Windows, Mac, Android and iOS-powered devices that lets front-end web developers remotely and simultaneously test, debug and inspect their web projects on various screen sizes and OSes. Be it a web browser on your desktop, smartphone or tablet, using Adobe Shadow, you can easily check how would your web designs appear on different device screens. The method involves installing Adobe Shadow desktop application and Chrome extension on PC, and the mobile client on your smartphone/tablet. Provided all the devices are sharing the same Wi-Fi connection, all you need to do is pair them to the computer using a unique passcode. Form thereon, you can remotely browse and sync your projects across various devices. Any changes made to the original code of the website are immediately reflected on each connected device.
The app also lets you select a particular device for which you wish to inspect/debug the code so that you can view the project timeline and records, view project resources and element, and make necessary amendments in the HTML markup, CSS rules and the overall code. Details, screenshots and download links to follow.
Undoubtedly, the aforementioned concept introduced via Adobe Shadow happens to be one of the best and most productive ways to utilize the concept of remotely streaming content from desktop to mobile devices. The link provided at the end of the post takes you to the Adobe Shadow’s official page, from where you can find download links to its Chrome extension, as well as the required desktop and mobile OS apps.
Once all aforementioned prerequisites are in place, just launch the app on either device (desktop and mobile), and hit the Adobe Shadow extension on your Chrome browser while staying on your project tab. Remember that although all the syncing is done via a combination of the Adobe Shadow Chrome extension and mobile device, the desktop client must be also be running in the background for the mechanism to work effectively.
Should your mobile device(s) not recognize the computer automatically, you can manually feed in the IP address to establish a connection. For this hit the ‘+’ button on the mobile client’s interface, and provide the exact IP address as shown on the Chrome extension. Using the same method, and a unique, device-specific passcode, you may connect as many devices as you wish to include in the test process.
That’s it. You can now remotely stream content from your desktop browser (Chrome) to all the connected device to see how they work on specific operating systems and screen sizes.
To enter the Adobe Shadow’s Remote Inspection mode on your computer, hit the extension icon, and select the device that you wish to remotely inspect/debug. Doing so would open another window, from where you can check the remote connection properties and info, web elements, resources, network stats, project timeline and the remote console via relevant buttons.
From the mobile client’s perspective, you can test a website as well as all the links embedded therein. Moreover, the mobile app lets you copy the currently opened URL, and also supports opening the webpage via a third party browser.
All in all, a brilliant concept, especially for web developers who might not have to resort to various alternative techniques that involve setting up hectic simulated/virtual environments for debugging and testing web projects. Instead, it’s all instant and effective with Adobe Shadow because all the testing, syncing and debugging is done is real-time, and with all the necessary tools that are required for accomplishing the task effectively.
As of this writing, Adobe Shadow is available for free across all supported platforms, and can be downloaded via the link provided below.
Download Adobe Shadow via Official Adobe Labs
