How can I speed up browser (and mobile) testing when working with large batches of files?

Recently I was on a few projects that consisted of multiple batches of banner ads. Think upwards of 150 ads... as much as I like working on these, something I've struggled with (and wasted time on) in the past was browser testing, specifically in IE. The tried and true method of using Browserstack for testing can be finicky with ads, especially since a lot of times you are testing the animation, and you lose some of that nuance with the delay of a virtual machine. And if you're working with testing a whole bunch of files? This is gonna be a problem.

Cue my new favorite program for helping fix this issue – CodeKit. This isn't a full endorsement of the produce, more a guide to help you save some time. This jack of all trades app can be used to compile code, tie into github, install libraries, etc. all within a slick gui. It can do a lot, and you can look it up if you're more curious. It's pretty nifty, but my favorite aspect is it's ability to spin up mini servers that tie into your local wifi network. Let me explain why this is useful.

The problem with browser testing when using a physical machine (like a windows laptop) is it can be so hard to isolate what the actual problem is from within the browser inspector. Our traditional method would be to get your ads ready locally, push them up to the dev server, then load the site up on the windows machine, inspect for issues, isolate the problems, then spend an hour going back and forth from your Mac to the Windows laptop, making a change, pushing up to the dev server, and hoping it solves the issue. Painful, right?

In comes CodeKit. It's paid, but it's got a trial that's fully functional (for 10 days) and then stops you from editing your settings (but can still be used for the purposes of this tutorial. Sweet). Download the app, open a new project and point it to a folder with an index.html in it (I had a index with links to each ad to save some time). Then, in the top right corner, there should be a green dot indicating that the preview servers are set up and ready to go. See the image below.

If you click the arrow, you have a couple different options.

One for bonjour (I haven't used this yet) and then one non-bonjour and one for your local machine. Open the local one on your local machine, and then navigate to the non-bonjour link on your windows machine. Codekit spins up a server with your files accessible within your local wifi network, and the slick part is it auto updates. Now, you can isolate the issue on your windows machine, and then literally edit and fix the files from your local machine. Your updates then get sent to the preview server, and you don't even have to save your file or click and buttons, it just happens automatically. This is extremely handy, and saves a ton of time. I was able to get a batch of almost 50 ads bulletproof on mobile and IE over the course of an afternoon. I'm sure there are many other applications for this, and I haven't looked into tying this into a full wordpress build, but I'm sure it's possible. I hope this helps next time you've got some IE issues and not a ton of time to fix them. Happy testing!