Simultaneous Website Previewing with Two Servers

So typically when migrating or launching WordPress sites, I’ll modify my HOSTS file in order to preview the site at its final destination before going public. That’s a great way to catch problems before updating DNS however I’ve often wanted to see both websites at the same time for a more detailed comparison. With the HOSTS file this is not possible. You’re either looking at server A or server B, but not server A and server B.

Instead of the HOSTS file, use a local proxy with dns spoofing

There are different apps that do this. I ended up buying a copy of Charles for $50. I primarily use Chrome so I decided to configure Charles to only run the proxy on SOCKS which I configure Firefox to use.

Screen Shot 2017-08-18 at 6.25.42 AM.png
Charles Proxy Settings

 

Screen Shot 2017-08-18 at 6.26.20 AM.png
Firefox configuration for proxy

In Charles you can enable DNS spoofing for any hostname like so. These will only affect browsers or applications configured to use the proxy, in this case Firefox.

Screen Shot 2017-08-18 at 6.15.31 AM.png

Now when I load the website in Chrome it loads normally. In Firefox I see the same website being loaded from a different web server, so I applied a coming soon page to show the difference. Pretty awesome! No more dealing with the HOSTS file wondering if I’m viewing the right version of the website. Now I can see both at the same time.

Screen Shot 2017-08-18 at 6.24.43 AM