Skip to content
PLAY VIDEO PLAY VIDEO PLAY VIDEO
By Sebastian Porto

Meet Charles - A very helpful tool for front-end development

Charles debugging proxy is an extremely useful tool when developing websites. In this post I want to show you some of the neat features I use a lot:

  • Inspect traffic
  • Throttling
  • Remove caching
  • Mapping local resources
  • Inspecting traffic from your mobile device

It is not my intention in this post to give detailed instructions on how to use each feature, just a high level overview of them so you know what it can do for you.

Inspect traffic

This is the main feature of Charles, inspect your browser traffic. This by itself is extremely useful. Charles provides a plethora of information and multiple views of your traffic.

inspection

All developer tools e.g. Chrome, Firefox or IE can do this to some degree. So this might not be a big selling point by itself. However Charles does let you do some very useful things like:

  • Repeat a request with the click of a button
  • Modify the parameters of the request

Inspect SSL Traffic

You can also use Charles to inspect SSL traffic, but the process is more complex (Instructions for Mac):

  • First ask Charles to proxy SSL traffic for the site. Go to Proxy > Proxy Settings > SSL. And add the site to the list.
  • Then reload the site in the browser, this will show you a security warning
  • Follow these instructions to create a self-signed certificate that will be accepted by your browser.
  • Restart your browser

ssl01

ssl

After doing this you should be able to inspect the SSL traffic in Charles just like it were normal http traffic.

Throttling

throttle

Throttling limits the download speed for a given site. This is very useful if you want to simulate the experience of viewing a website with a slow internet connection. Usually as developers we have decent or fast Internet connections, but your users might not, so it is something you should always test with your projects.

Remove caching

Another handy feature is the ability to block caching of resources, this is helpful to ensure that your browser always receives a fresh version of resources while doing changes in development.

Mapping local resources

If you are doing all the development on your local machine you probably don't need this. But if you are working with files uploaded or deployed on a staging server this can be extremely useful.

Instead of having to modify a file and then upload it to test it (e.g. JavaScript, CSS), you can simply map a particular url to a local file on your machine:

map_local

  • In the traffic inspection view select the file you want to map
  • Right click on it and select 'Map Local'
  • Select a file on your computer
  • Next time you refresh the page the file from your computer will be used

In this way you can quickly iterate and just upload the files when happy with the changes.

Inspecting traffic from your mobile device

Charles can also inspect the traffic coming from an iPhone, very useful while developing a mobile app. The instructions on how to enable this are here.

inspect_mobile

After enabling this you will see the traffic from your device in Charles as if it were from your local browser.

Latest Articles by Our Team

Our expert team of designers and developers love what the do and enjoy sharing their knowledge with the world.

We Hire Only the Best

reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.

We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.

Free Community Workshops

We created the Ruby on Rails InstallFest and Ruby on Rails Development Hub to help introduce new people to software development and to help existing developers hone their skills. These workshops provide invaluable mentorship to train developers, addressing key skills shortages in the industry. Software development is a great career choice for all ages and these events help you get started and skilled up.

  • Webinars

    Webinars

    Webinars are our online portal for tips, tricks and lessons learned in everything we do. Make the most of this free resource to help you become a better developer.

    Learn more about webinars

  • Installfest

    Installfest

    The Ruby on Rails Installfest includes a full setup of your development environment and step-by-step instructions on how to build your first app hosted on Heroku. Over 1,800 attendees to date and counting.

    Learn more about Installfest

  • Development Hub

    Development Hub

    The Ruby on Rails Development Hub is a monthly event where you will get the chance to spend time with our team and others in the community to improve and hone your Ruby on Rails skills.

    Learn more about Development Hub

Get the “reinteractive Review” Monthly Email