I recently spent an entire day refining my local development workflow for building responsive websites. The new addition to my toolbox was Adobe Edge Inspect. While trying to get it all set up I ran into a few hurdles so I’d like to mention a little about my local development setup, Adobe Edge Inspect and the issues I got stuck on.
The Local Development Setup
I develop all my sites locally because it’s so much faster. I use MAMP PRO for my local Apache, MySQL and PHP environment, SASS for CSS pre-processing and CodeKit for compiling code, optimizing images and automatic browser refreshing. These three together make it super awesome but for responsive website development there was one missing element, a tool for synchronized browsing, Adobe Edge Inspect.
Preview, Inspect & Synchronize Browsing with Edge Inspect
If you don’t know what Edge Inspect is yet I suggest you check it out cause it’s a must have tool if you’re going to be building responsive websites. It basically allows you to preview your site, inspect your code and have all your testing devices synchronized as you navigate on the desktop. To use Edge Inspect you’ll need an Adobe Creative Cloud account. In a way this kinda sucks but I’d much rather pay $50/month to access absolutely everything Adobe makes then to dish out the $1300+ for just the Creative Suite.
I’m not going to go into detail here about setting it up cause it’s super easy. All you need to do is download the desktop app and follow the instructions. You’ll also need to install the Chrome plugin and accompanying apps on all your devices, pair them with your desktop computer and you’re ready to go. Once you’re all set up you can test it out on some random websites to see how it all works.
Setting Up a Local Website with MAMP
If you’re new to MAMP I recommend reading Smashing Magazine’s post on Developing WordPress Locally with MAMP. It’ll take you through all the steps for setting up your local sites.
MAMP Pro allows you to set a server name like mysitename.local or whatever you decide. This makes it so that you can access the local site easily by navigating to something like mysitename.local:8888. This is a perfectly fine setup but because I am using Edge Inspect, browsing on the mobile devices is now automated. Meaning, whatever happens in Chrome on the desktop gets mirrored on the mobile devices. However, this causes a ‘server not found issue’ on the mobile devices. The reason for this is because the local site is on a private server so any external devices need to refer to an IP address instead, something more like ’18.104.22.168:8888/file_path’. To work around this issue I had to set my host to an IP address in ‘Hosts > General > IP/Port’. I also had to match the WordPress Address(URL) and Site Address(URL) to ’22.214.171.124:8888/file_path’ instead of using the server name.
This now works seamlessly, though the sad news about this setup is that the URL to access the local site is not very pretty. In my opinion, a small compromise for being able to develop locally and have synchronized browsing across all devices.