Member-only story
How to Debug REST Requests
Find that annoying bug by spying on the data being exchanged in four different ways
Irrespective of whether you’re on an Angular, React, Vue, Backbone, or JavaScript front end, at some point you’ll probably need to communicate with a back-end service. But what happens when your back end replies with an undesired non2xx reply? Did you transmit the exact payload your back end expected? Did you include the precise HTTP headers needed? Is there a problem at the protocol level maybe?
In this piece, we’ll review some of the common approaches to efficiently debug REST calls: The JavaScript console, the network monitor, a man-in-the-middle server, and network-traffic analysis.
Basic Elements of a REST Request
If you’re curious about how and when REST was defined as a concept, Wikipedia has an interesting page about it¹.
In summary, REST, the representational state transfer, is a “software architectural style that defines a set of constraints to be used for creating Web services.” It was first defined back in 2000 by Roy Fielding² in his PhD dissertation “Architectural Styles and the Design of Network-based Software Architectures.”³
In the interest of the debugging methods and tools we’re about to discuss next, let’s quickly recap the basic elements comprising a REST request:
- Endpoint: This is the location, or address, where the server-side recipient of your REST call exists. It’s defined as a URL, and in its fullest form may look like
protocol://domain/path?queryParameters. - Method: The HTTP request method⁴ to indicate the desired action to be performed for a given resource. Also known as the HTTP verb, this is one of the following: GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE, and PATCH.
- Headers: HTTP headers⁵ consist of additional information accompanying an HTTP request passed from the client to the server and vice versa. Your request may or may not have headers associated with it.
- Body: The HTTP message…
