Setup Charles Proxy with App Live

Posted by Tobi Tarwater on Thursday, August 1, 2024

Charles Proxy can be used as an HTTPS proxy that provides plain text view of the communication between the web browser and SSL web server. You can use Charles to capture network logs for iOS and Android devices.

You can capture traffic between BrowserStack devices and the Application under test with Charles Proxy server and debug information using captured logs.

We recommend that use this configuration if you decide to enable Charles Proxy in your test setup.

Set up Charles Proxy with BrowserStack

Getting Charles to work with BrowserStack involves the following steps:

Set up Charles Proxy

  • Open the Charles Proxy app.
  • Click Help > SSL Proxying, and then click Install Charles Root Certificate.
  • In Keychain Access dialog box, search for charles, and double-click the Charles Proxy CA certificate that appears.
  • Expand the Trust section, and ensure all options are set to Always Trust and close the dialog box. Screenshot showing installation of charles root certifcate
  • Click Settings > Proxy Settings and note the port number that appears.
  • In the Charles app, click Proxy > SSL Proxying Settings.
  • Under the SSL Proxying tab, select the Enable SSL Proxying option.
  • Under the SSL Proxying tab, add and select your app-specific location. Ensure that you clear all other locations entries. Screenshot showing installation of charles root certifcate

    • Add proxy details to Local

    Use these steps if you want to use the Local app to configure the proxy details.

  • Install the BrowserStackLocal App.
  • Start the Local app.
  • Open the Local dashboard at http://localhost:45454/.
  • Under Tunnel Settings, set the the ip as localhost and the port as 8888. The port value is the same that was set when you configured Charles.
  • Enable the Force Local option.
  • Click Show More and enable Force Proxy and MITM Proxy options.
  • Scroll further and click Update to apply the settings.

    • Use these steps if you want to use the Local binary to configure the proxy details.

  • Download BrowserStackLocal binary.
  • Open command-prompt/terminal and run the following command.
     <BrowserStackLocal binary path> --key <your access key> --local-proxy-host localhost --local-proxy-port <charles_proxy_port> --force-proxy --force-local

    Ensure that you replace the charles_proxy_port with the port value that was set when you configured Charles.

    • Start an App Live session

  • Log in to the App Live dashboard.
  • Verify that Force Local is enabled.
  • In Devtools, click the Network tab, and select the Enable for all traffic option. Click Apply. Screenshot showing toggle for enabling all traffic

    • After a request is sent, check the Charles app for the captured logs.

    Did this page help you?

    Yes No

    We're sorry to hear that. Please share your feedback so we can do better

    Submit

    Contact our Support team for immediate help while we work on improving our docs.

    We're continuously improving our docs. We'd love to know what you liked


    Any additional feedback?

    Submit

    Thank you for your valuable feedback

    Is this page helping you?

    Yes No

    We're sorry to hear that. Please share your feedback so we can do better

    Submit Skip

    Contact our Support team for immediate help while we work on improving our docs.

    We're continuously improving our docs. We'd love to know what you liked


    Any additional feedback?

    Submit Skip

    Thank you for your valuable feedback!

    ncG1vNJzZmivp6x7o77OsKqeqqOprqS3jZympmeUpLC0e8Cpp2akmauycK3Dr5inm5WZeqexwK2sq52jZLCprdGlnKxloKe8ucU%3D

    CATALOG
      FEATURED TAGS