Web debugging proxy for macOS
Tags: developertool, ios, android, sslproxying
Published: 2019-12-09 08:20:12

---
title: Web debugging proxy for macOS
published: true
description: 
tags: #developertool #iOS #Android #sslproxying
---

All applications these days seems to communicate over the internet. Most of the time, developers might not need paying much attention to such low level but sometimes, the app doesn't behave as we expect so we might want to take a look into network packages to see how it worked. 

In such case, what developers need might be a proxy server like Wireshark, Fiddler, Charles or Proxyman which sits between the app and computer's network connections to capture all of its requests/responses. In this blog, let's see how an app like [Proxyman](https://proxyman.io/) can help us to test an application. 

To start, we first need to download the latest version of Proxyman at https://proxyman.io/. Double-click the .dmg file and drag its icon to your Applications folder to install it.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1j7eqkv2bils0opw3xlg.jpg)

---
###Inspect requests/responses

When first time you launch the app, Proxyman would ask for permission to automatically configure your network settings. Click **Grant Privileges** and enter your password if prompted. This allows Proxyman to change your network configuration to route all traffic through it to inspect all network events to and from your computer.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/7r8tx6jck0gudte3nlzr.png)

As soon as Proxyman is launched, you can see events popping into the left panel. Those recorded network requests are categorized by Apps and Domains and  listed down in the main panel along with their detailed information. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/an8j5du8t8epyb3u4bui.png)

To search for specific requests, we can use Command + F to filter all URLs by protocols (HTTP/HTTPs/Web socket), content type (JSON, XML, CSS, Images,…) or text contained in URL, header, status code,…

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hz5ykfvbus24h4sttvbg.png)

Then using the **Pin** feature to isolate those URLs for testing without distraction

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/22cb4xpm7uy56qdcta5a.png)

###SSL Proxying
Although Proxyman can inspect all network events to and from your computer, if you double click to select a request, you should expect to see no content response of that request yet. The reason is that HTTPs protocol use SSL/TLS to encrypt sensitive request and response information and  prevent proxy servers and other middleware from eavesdropping.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8shrt9wsqn9ajw0i7we5.png)

So how Proxyman can  decrypt those SSL messages so that we can snoop on and debug them? Magically (:), Proxyman (and other man-in-the-middle apps) can generate its own self-signed certificate, which we can install on our Mac and iOS devices for SSL/TLS encryption. However, as this certificate isn't issued by a trusted certificate issuer, we'll need to tell our devices to explicitly trust it. Please bear in mind that there are some cases where Proxyman won't work such as when an app uses SSL pinning to verify network connections for extra security. In this case, the app can reject communication if they find any mismatch between the pre-pinned certificates and your newly trusted certificate.

With that being said, most of the time, you could enable SSL by clicking the button on the Proxyman's right panel.  Once enabled, Proxyman will be able to decrypt SSL events! 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sc65vcvoit660qux2ykp.png)

This is how the workspace looks like once you enable SSL Proxying

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/i14c5ix834bf6sngcna4.png)

###Modifying requests/responses

In addition to logging data, developers can also use a "Breakpoint" to edit API requests/responses or even decide whether to block it or allow it to proceed. When you enable **Breakpoint** for request, Proxyman will stop the request before it goes to your server. If you enable **Breakpoint** for response, it will stop the response before it goes to your app. Thus, you can modify such requests/ responses to test UI errors or certain back end functionalities (including security vulnerabilities)

####Enable Breakpoint

To enable this tool → **Right Click** the URL → select **Tools** → select **Breakpoint**

![Right click URL → Select Tools → Select Breakpoint](https://thepracticaldev.s3.amazonaws.com/i/h9jnn33cp0myvyuda7vq.png)

####Add Matching Rule
A **Breakpoint Rule Window** will then pop-up to allow us to define our matching conditions. As the app auto-use the selected endpoint as the condition, we would see the endpoint https://api.producthunt.com/v1… is auto-filled. Here we want to change the status code only so let’s uncheck the Request box

![Uncheck Request box for modifying Response only](https://thepracticaldev.s3.amazonaws.com/i/8m87z6wsq8hsgo0s9cs2.png)

After hitting **Done**, a new rule has been added up to the Breakpoint rules window

![New Matching Rules is added after hitting Done button](https://thepracticaldev.s3.amazonaws.com/i/780mwjdmtm30j7ymd0q5.png)

With that all set up, it’s time to modify the status code to see how the app behaves

####Change Status code
As soon as we re-send the request, that API call would be captured so that we can edit our queries on the fly.

![Go to tab Other → change the status code as we want](https://thepracticaldev.s3.amazonaws.com/i/pdq9mu5hquczuy6p246c.png)

As you can see, after changing the status code into **400** and hit **Execute**, the response is now updated with signal **Error 400** in the main window

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hbif3ce68ujzq79iriy2.png)

In case you want to manipulate the content of requests/ responses, you can find the detailed blog at https://proxyman.io/blog/2019/09/Use-Breakpoint-to-intercept-and-edit-request-response-on-iOS-app.html. 

### Conclusion

In a nutshell, a man-in-the-middle app like Fiddler, Charles, or Proxyman can:

- Configure our network settings to route all traffic through it so that it can inspect all network events to and from our computer.
- Generate and use its own self-singed certificate to decrypt SSL events (which is encrypted by HTTPS).
- Act as a proxy server to help you modify requests/responses on-the-fly.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xmvy4llifyz29kmp5ei2.jpeg)

That’s how we can use [Proxyman](https://proxyman.io/) for debugging an app. Hope that you would find it helpful to incorporate with your working habit and boost your productivity :)

---

Proxyman is a high-performance macOS app, which enables developers to view HTTP/HTTPS requests from apps and domains on iOS device, iOS Simulator and Android devices. Get it at https://proxyman.io