DEV Community: Renée

Change HTTP status codes for UI testing

Renée — Mon, 24 Feb 2020 10:12:36 +0000

This miniblog simulates a backend error to check how Unsplash app behaves when encountering a Searching issue.

Get Started

Instead of asking backend developers for fake status codes to test different user cases, we could use a debugging tool named Proxyman. Basically, it's a handy tool when debugging mobile and web applications as it allows developers to modify both requests and responses on-the-fly. After setting up Proxyman certificate on my iOS device, all requests coming from/to my device are captured by Proxyman under the Remote devices section

We can double click an URL to see the content of its Response. The origin Status code is 200 OK

After that, we can enable the Map Local tool to start monitoring the Requests and Responses

Subsequently, the Map Local tool's window will pop-up so that we can start the mapping configuration.

Modify Status Code

Similar to modifying the body content of the origin Response, we are able to change the status code with our Editor. The File Path indicates the current location of the origin Response (normally, it stays at our Desktop). Click to open the file with our favorite Editor

... then change the Status Code to 404 to simulate that the device was able to communicate with the server, but the server could not find what was requested.

Create Matching Rule

The next step is to define rule so that Proxyman can capture our domain. This way, it would detect all API calls that match the rule and then serve the configured status code from our local file instead of from server.

Type in the domain for mapping

... then select the modified Response and hit Done

As soon as we make another call to that API, Proxyman would capture that request and map the response with the modified one on our local directory. Now if you click the Header of the received Response, there will be an extra row added to indicate that the Response is being served from our local file, not the server.

And the Unsplash app shows a black screen instead of displaying images for our Search.

If we want to test UI for another backend error, we can simply change the status code again.

What's next?

Modifying status code comes in handy when developing and testing mobile applications. Using the Map Local will allow developers or testers to easily simulate a front-end or back-end error and see how the app behaves in different scenarios without involving backend team.

In the next blog post, we are going to discover how to use Map Remote feature in case you have a development version of a site and would like to be able to browse the production site with some of the requests being served from development. Stay tuned and see you in our next blog post!

Proxyman is a high-performance macOS app, which enables developers to observe and manipulate HTTP/HTTPS requests/responses on your macOS, iOS devices, iOS Simulator and Android devices. Get it at https://proxyman.io.

Modifying API responses with Proxyman (Part I)

Renée — Wed, 19 Feb 2020 04:02:14 +0000

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 use a proxy server like Wireshark, Fiddler, Charles or Proxyman to view all HTTP and HTTPS traffic between the device and the internet.

This blog post explores one of the most useful features of those debugging tools that used daily by both QAs and developers named Map Local. It is powerful in debugging mobile and web applications as it allows developers and testers to change the response of the request, per the configured mappings, so that the response is transparently served from the new location locally as if that was the original request.

Get Started

Normally, testers will need to go through complicated flows in the app in order to have the response properties updated accordingly. The Map Local tool comes in handy to help us to quickly modify the response and change the required parameter to what we need, so that we are able to test different use cases.

Before we enable this feature, we first need to download and launch Proxyman. Then use Cmd + F to search for a specific name and Pin feature to isolate our wanted URL for later modification.

Now we could easily double click the URL to see the content of both Request and Response

At this time, we can choose one among three ways to enable the Map Local tool

Right click the URL --> select Tools --> Map Local

Click Menu bar --> select Tools --> Map Local

Use hotkey Option + Cmd +L

Modify the Response

As soon as the Map Local is enabled, a new window would pop-up to help us monitor upcoming API calls.

Because I have right-clicked an URL to enable Map Local, we can see that Proxyman auto-saves the origin Response of that URL and allows me to open it with my preferred Editor for modification. Thus, we can easily change those parameters for different testing purpose

Create Matching Rules

The next step is to define rules for upcoming Requests. This way, if Proxyman detect any API calls that match our rule, it will replace the content of the Response with our modified one in the local directory.

Although Proxyman has pre-filled domain, we can type in any other domain name for mapping.

Tips: Check/uncheck the box to allow Proxyman to catch its sub-domains. For example, /v1/posts with checked-box will map all sub-URLs such as /v1/posts?days_ago=0. Meanwhile, /v1/posts with unchecked-box will only map the exact name /v1.posts

After we select the previously modified Response and hit Done, a new rule will be created. As a result, any API calls that satisfy the rule will have the Response served from the local file

Note: we are able to select a different content format for mapping, for example

... and the content might appear as follow

As it might be a system vulnerability so be sure with your intended format of Response when testing in .production environment

What's next?

Modifying responses is very useful when it comes to developing and testing mobile applications. Using the "Map Local" will allow developers or testers to simulate responses from each request then put on the 'hacker hat' and try to debug or break the app.

In the next blog post, we will discover how to use Proxyman's Map Local tool for mapping a whole directories instead of mapping individual files. It is an easy and convenient way when you need to test complicated response content including css, swf or image. Stay tuned and see you in our next blog post!

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

Web debugging proxy for macOS

Renée — Mon, 09 Dec 2019 08:20:12 +0000

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.

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.

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.

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

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

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.

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!

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

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

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

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

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.

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

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.

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

Can we change the status code of a HTTP request?

Renée — Sat, 16 Nov 2019 10:25:30 +0000

Apart from using Breakpoint to edit content of requests/responses on the fly, this mini blog demonstrates how developers can use Proxyman Breakpoint to change the status code to test different cases of HTTP responses such as client error or server error.

Enable Breakpoint

After you have downloaded Proxyman and enable SSL Proxying for our testing domains, those requests/responses would be captured. Moreover, we can even use Breakpoint tool to manipulate those API calls as our testing purposes.

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

Add Matching Rule

Then a Breakpoint Rule Window will pop-up so that we can define all matching conditions there. As Proxyman auto-use the selected endpoint as the condition, you 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

After hitting Done, we can see that new rule has been added up to the Breakpoint rules window

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

Change Status code

As soon as we re-send the request, that API call would be captured and a Breakpoints window would pop-up so that we can edit our queries on the fly.

The status code is separated into tab Other so you can go there and change as you 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

What’s next?

That’s how easy to use Breakpoint to modify status codes for testing purposes. We can also use this tool to manipulate the content of requests/ responses. Hope that you would find it helpful to boost 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

Use Breakpoint to intercept and edit HTTP requests/responses

Renée — Tue, 17 Sep 2019 08:12:45 +0000

In software development, a breakpoint is known as “an intentional stopping or pausing place” where you can examine, edit API requests or responses and even decide whether to block it or allow it to proceed. This blog demonstrates how I use Proxyman Breakpoint tool to manipulate those API calls for debugging purposes.

When to use Breakpoint

Basically, if 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). In this blog, just take 2 simple examples to see how Breakpoint works:

Example 1: Change user’s search query to see how the app behaves (Modify request)
Example 2: Change user name and avatar in the Response to see if the UI can handle long messages (Modify response)

Install Proxyman Certificate on remote device

Before we start, let’s install Proxyman Certificate on my iOS device so that we are able to see HTTPs content

To be more focused, let’s use Pin to isolate two endpoints “api.unsplash.com/me” & “api.unsplash.com/search” for our testing scenarios

Define Matching Rules with Endpoints

Now it’s time for us to define how Breakpoint captures out-going requests and in-coming responses. Basically, these conditions can be setup by two ways:

Option 1: Menu bar

From Menu bar -> select Tools -> select Breakpoint -> Rules. Then a Breakpoint rules window will pop-up so that we can define matching conditions

To add new rule, you can click the “+” button at the bottom left corner of the window

As we only want to change the search query for the first scenario, let’s type in the endpoint “api.unsplash.com/search” and select “Request” only

After hitting “Add” button, we know that any out-going requests to that endpoint would be stopped by the Breakpoint from now on :)

Option 2: Right click

Another option to define matching rule is to Right Click the selected URL (endpoint) -> select Tools -> Breakpoint

As Proxyman auto-use the selected endpoint as the condition, we should see the endpoint “api.unsplash.com/me” is auto-filled as below

As we only want to change Response, let’s select “Response” for the second scenario. After hitting “Done” button, that new rule has been added up to the Breakpoint rules window

With that all set up, it’s time to modify requests/responses to see how our app behaves :)

Modify requests with Breakpoint

First, let’s run the Unsplash application; then from Search box, type in the keyword “eat clean” to navigate to the endpoint that triggers Breakpoint. As soon as the API call is captured, a Breakpoints window would pop-up so that we can modify the query

Let’s change our search query from “eat clean” to “mountain”…

… and instead of showing “eat clean” images as origin request (Left), the app render “mountain” images (Right) as we expect :)

Modify responses with Breakpoint

Similarly to editing the request, we are able to edit the content of response also. Let’s just re-open the Unsplash app to call the endpoint “api.unsplash.com/me”

Once the API response is captured, we could change the username and avatar to see how our app handles. Here I edit the user name to be longer and update the avatar

Once hitting “Execute”, the modified Profile shows up with new username and avatar instead of original ones :)

What’s next?

With Breakpoint, it is possible for you to change any parts of the API request/response, but please bear in mind that it might misbehave or crash when it doesn’t get the correct format it’s expecting to receive. With that being said, do not hesitate to experience and boost your productivity with this tool. Happy debugging :)

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. Check it out at https://proxyman.io/

How I use Proxyman to see HTTP requests/responses on my iPhone?

Renée — Mon, 13 May 2019 14:58:44 +0000

Last month, I’ve found a newly developed application called Proxyman. It is a native macOS app and its features are so handy for debugging that I really want to share with others. In this post, I used the app to see Response content from Unsplash app on my device.

1. Configuration:

1.1/ Download the app

I downloaded the newest version from its website https://proxyman.io/
The UI is pretty clean and I can see all the requests coming right after opening the app

1.2/ Setup Certificate for my iPhone

Then go to Certificate -> Install Certificate on iPhone Device. There would be an instruction to guide you how to configure certificate on iPhone/ iOS Simulator

1.3/ Config Wifi pointing to Proxyman

Go to Setting -> Wifi -> (Select current Wifi) -> Configure Proxy -> Manual . Then I used the same Server and Port on Guideline to configure Proxy on my iPhone

1.4/ Allow permission to install Proxyman

At this step, I saw all requests coming from my device on Proxyman app. However, in order to see content of Responses, I will need to install Proxyman Certificate

On my iPhone, I go to Safari -> http://proxyman.io/ssl -> Accept permission for installing Proxyman Certificate

1.5/ Install Certificate from /ssl

Then go to Setting -> General -> Profile -> Select Proxyman -> Install

1.6/ Trust Certificate on iPhone

It is said that since the iOS 10.3+, we need to trust certificate manually. Thus, final step is go to Setting App -> General -> About -> Certificate Trust Settings -> Turn ON “Enable full trust for root certificates”

You can see that all my iPhone’s requests showed up after I finished configuring proxy

2. Time to debug Unplash

OK, enough config. It’s time to actually see HTTP requests/ responses coming from Unsplash app

2.1/ Search a domain

I searched for app Unsplash with Command+Shift+F (You can also search the app using Search bar)

2.2/ Pin a domain

This is one of interesting features of this app. I can Drag, Drop a specific domain into Pin section. I find it pretty useful to organize and focus, especially when I have to work with several applications, domains.

2.3/ See HTTP content

If you double click a request, you would see the Request and Response on the right panel. However, to see content of a Response, you will need to Enable domain and Reload the request.

2.4/ Open content with Editing tool

There is a small button on the top right corner. When I click to that, the app reveals some Editing tools that I am currently using. I can open my Response content to edit, which I found pretty convenient.

## What going next?

If you are a tester or front-end developer, the odds are that you have been familiar with debugging tools like Charles. It is a powerful debugging app, but somehow it doesn’t fit me. Meanwhile, Proxyman is not fully-developed yet, but it seems to have many potentials. On the next post, I’ll compare some key features between Charles’s and Proxyman’s and what I think about the pros and cons of these 2 apps. How about you? What do you think about Charles and Proxyman?

iOS tips to boost my productivity

Renée — Sat, 04 May 2019 08:13:45 +0000

It's the first time I've written this technical blog on Dev.to.

This tip will list all useful libraries and tools, which my team and I use every day.

Hopefully, this tip can increase your productivity during iOS development 😍

Moya

Moya is a convenient library to help me to categorize the networking route easily. Rather than introducing big Networking class, I define the AppEndpoint enum and introduce all route here.

public enum AppEndpoint {
    case login(LoginParam)
    case signup(SignupParam)
    case fetchUserInfo(UserParam)
}

provider = MoyaProvider<AppEndpoint>()
provider.request(.login(param)) { result in
    switch result {
    case let .success(moyaResponse):
        // Handle data
    case let .failure(error):
       // Error
}

Pros

Abstract the Networking Layer
Hide the Business logic
Easily categorize the API route
Beautiful Result.

TinyConstraints

One of the lightweight class to help me overcome the pain in my ass when working with NSConstraintLayout.

It's just a one-line code to attach the subview to fill out the parent ;D

view.edgesToSuperView()

Reveal

Reveal is one of the important apps for me to implement pixel perfect. Most of the time I inspect the view layers, the Xcode tool isn't sufficient for me since I have to calculate the off pixel. Reveal is my rescuer.

Pros

Easily inspect the complex view hierarchy
Don't need to debug directly from Xcode
Native app

Proxyman

Proxyman is one of must-use tool for the QA and iOS team in my company.

It helps me to see the HTTPS response and easier to catch the bug. In the past, we used to use Charles, but my team prefers Proxyman since the UI is nicer

The request and response content are so sweet
Easy to edit the bug request and try again with new param
Able to export the session for QA team - it's great for reproducing the bug later

Pros

Modern and native app
Easily reproduce the bug from QA team
Work with iOS simulator and iPhone too, which is awesome 😮

Other

SwiftLint for enforcing the Syntax
Danger: It's accompanied with SwiftLint to inform my teammate automatically in Github.
Fastlane and Bitrise for CI/CD
Realm is the best candidate for Database storage and lightweight MMKV Key-Value storage
IGListKit for high-performance listing.
Diff Algorithm for reloading huge UITableView efficiently.

If you know any useful iOS libraries or tools, please share with me 👏