DEV Community

Renée
Renée

Posted on

Web debugging proxy for macOS

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 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


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

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

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

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

Alt Text

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

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

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

Alt Text

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

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

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

New Matching Rules is added after hitting Done button

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

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

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

That’s how we can use Proxyman 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

Top comments (1)

Collapse
 
leadingcode profile image
Oleksandr {S.N}

It nice, but not open source and not free.