Capturing HTTP Requests and API Debugging On Demand

Over the last few months, as I’ve pivoted to learning JavaScript, jQuery, making AJAX calls using jQuery, (and am now gearing up to learn Angular), I began utilizing the awesome API testing tool Postman to assist in debugging my programming. Postman allows a user to send HTTP requests (GET, POST, PATCH, etc.) to API endpoints, passing the headers, authorization credentials, and data elements in a request, and receiving the response back. These requests could further be saved into “collections” to create an application test suite and run through the tests to automatically validate the functionality of an application (a little advanced for me at the moment).

postman_screenshot

Postman currently has two versions of their application available, as a native Mac application, and as a Chrome app. I recently learned (via Postman) that Google will be discontinuing support for Chrome apps in the next two years and while it doesn’t sound like this will impact Chrome extensions, I hope that some of my favorite other Chrome apps (like momentum dash) will find a way to make their applications native in the browser as well. I’ve generally been using the Chrome version as one of its benefits was that in conjunction with Postman’s “Interceptor” Chrome extension, Postman would be able to capture any HTTP request sent through Chrome and display the raw request as well as the return result (so for example, if I was trying to interface with a Github endpoint like in the above, I could see my request and whether it was successful or not). This capture could be easily toggled on and off, and typically for debugging, I would also filter to only process requests/responses from localhost and remove any other noise. If I was not returned a “success” response, or was not receiving the response I was expecting, I could tweak my API call and then re-send the request all within Postman. Once this was working properly, I could update my JS code accordingly.

In the native version of Postman, the application attempts to mimic this functionality by implementing a local proxy server on a user’s machine (127.0.0.1, port 5555), and requiring an individual to configure their computer’s Network settings to utilize this web proxy,  thereby pushing all traffic through the Postman. I wasn’t crazy about this for two reasons:

a. I didn’t want/need all of my internet traffic to go through Postman; I really only wanted traffic related to my development work to be passed through and as necessary.

b. I discovered that since this Network setting was global, if I either turned off the proxy interceptor in Postman while the app was still running, or I shut down Postman completely, my internet would die as it would not be able to make the proxy connection.

I thought there had to be an easier way of doing this than having to keep Postman running all the time, or switch my Network settings on and off. I wanted something that acted like the original Interceptor extension in Chrome, that could be toggled on/off as needed – maybe an extension that could send traffic through a specific proxy address on demand. And I found that answer in the Chrome extension Proxy SwitchyOmega. Once installed, a user can easily configure one or more “Profiles” through which to direct traffic through. So assuming the Postman proxy defaults, I set up a Postman Profile  like the following in SwitchyOmega:

postman_switchyomega_profile

Then, I was able to set up a Switch Profile in SwitchyOmega, where if the extension detected the traffic was from/to the localhost domain, it would route traffic through the Postman Profile, otherwise it would not go through any proxy (i.e. “direct”):

postman_switchyomega_autoswitchjpeg

Lastly, if for some reason I was doing development on my localhost and not using Postman (and thereby not wanting to direct traffic to the proxy), I could override the auto switch by selecting an option from the extension menu:

proxyomega_switcher

Now I had a much more efficient system of  capturing my development API requests in Postman’s native client with the ability to turn this capture on and off as necessary.

About the author

Leave a Reply

Your email address will not be published. Required fields are marked *

About This Blog

This blog will serve as my outlet to share my thoughts and learnings as I dedicate myself to becoming a full-stack web developer...something too long in the making.

What I’ve Been Learning

+ Ruby
+ Ruby on Rails
+ HTML/CSS
+ JavaScript
+ jQuery
+ AngularJS

Archive