Live UI debugging on mobile and tablet devices using Charles Web Proxy

  • 0
  • October 9, 2015
Harshad Patel

Harshad Patel

UI Developer

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.

About Charles

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.

Once connected, Charles will pop up with an alert saying that your device is trying to connect to the web proxy server. Click on ‘Allow’ and refresh the page on your device; this will now let you see the responsive version of the interface on the device. Now, everything you make, whether it’s a CSS, JavaScript or HTML mark-up change, you can test as you are working in your local environment.

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

You can use Charles to remap  site files.

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.

charles-article-blacklisting

Blacklisting of files

Mainly used for debugging purposes, as an example, you might think that a JavaScript plugin or a CSS file is giving you issues. While you can blacklist these files to see if it solves the problem, this method doesn’t work, however, if all your CSS files and JS files are merged into one single minified file.
A missing file is shown as a red dot with a ? mark in the Structure Window

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.

Conclusion

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.

Free of charge. Unsubscribe anytime.