The Shadow Knows – Adobe Shadow Mobile Web Development Tool

Adobe have a new tool called Adobe Shadow.

It allows you to sync a website  from your desktop to several mobile devices. You install a client application on your mobile such as your iPhone, iPad, Android phone. Then install a client app on your PC (OS X, Windows), then install a Chrome Extension tool.

When you have all the apps ready, make sure you are on the same WiFi network and open the Shadow app on your mobile device. I twill scan the network and find you desktop to sync as show by its name.

Click on the name of your machine to connect and you will get a pass code number. Now open up Chrome and click on the Shadow extension and you will see your device listed. Click on it to enter the pass code and the device should be connected.

Do this for all your devices and now browse to your development site. You should see the site on your desktop and it will sync to all your devices. Even better, your devices will show as they have been designed for those devices.

For example, a responsive designed website, would show full screen on desktop, but give a mobile view on the phone. It is the same as browsing from your phone, but is all  handled from the desktop as a server and makes it easy to check layouts on mobile devices at once.

Even better, you can use the debug tools in Chrome to inspect and change the served code to the mobile devices. Click on the Shadow extension in Chrome and click on the Remote Inspection <> icon for the device you want. This will open up a Weinre debugging session where you can inspect the elements and assets like on the desktop Chrome. It will even flash the elements on the browser and you can perform live updates.

Even better, use this with the Ripple emulator on the desktop for true mobile debugging 😉

Totally awesome tool.

1 thought on “The Shadow Knows – Adobe Shadow Mobile Web Development Tool

Leave a comment