As part of my job of being a UI developer, it’s essential that the interfaces we build work on a myriad of mobile and tablet devices. In the normal workflow, you would produce the work locally, upload it to the staging server and then check on the devices. For a UI developer, this would be very frustrating if every CSS change we make would then need to be deployed to the staging server so it can be checked and debugged on devices. We need a way to debug without the need to constantly upload to the staging server; this is where Charles comes in.
To quote the Charles website:
“Charles is a web proxy (HTTP Proxy / HTTP Monitor) that runs on your own computer. Your web browser (or any other Internet application) is then configured to access the Internet through Charles, and Charles is then able to record and display for you all of the data that is sent and received.”
This allows Charles to act as the middleman between our mobile and tablet devices to go through Charles Web Proxy, letting us see the changes we make instantly without the need to deploy the work elsewhere.
The benefits of this approach are that all the work and testing can be done locally and pushed to the devices immediately to check if everything is working as intended.
Configure Charles as a web proxy
The software can be downloaded from http://www.charlesproxy.com/; it comes with a trial version which works for 30 minutes. Install the software on your desktop or laptop then configure your mobile and tablet devices to connect to the IP address (or your computer name) of the machine. By default, Charles is connected to port 8888 so you can enter this into your mobile or tablet device.
Below are some of the key features I use when I am working with Charles:
- Remapping of live asset files to local files on your machine
- Blacklisting of files
- 404 file checking
Remapping of live asset files to local files on your machine
Occasionally, if you need to debug something on a live server and you do not have the work checked out, you can remap a file by loading it through Charles. All the asset files associated with the site are loaded in the structure window. To live remap the live file to a local copy on your machine (let’s says a CSS file as an example), highlight the CSS file, right click and select ‘map local’.
This opens up a prompt box which allows you to map to the file on your machine. Now, when you make a change on your local file, you will be able to test it against the live site you are debugging. This works very well when remapping images, CSS and JS files; if your site uses multiple themes and you wanted to test a particular theme, you can use this method and you will be able to check this right away on your desktop or mobile/tablet device.
Blacklisting of files
404 file checking
This is useful to see if there are missing images on a page, although if you wanted to check 404s across a website, you would use something like Xenu Link Sleuth. It’s really useful if, for example, you are working on an email and you want to check all the assets are being loaded from the web server and not your local machine.
As you can see, Charles can save you time by letting you debug directly from your local machine and see these changes on mobile and tablet devices directly without the need to upload to your web server.