Skip to main content

How to Override an HTTP Response Status Code

· 2 min read

During our web development daily activities it's common to poke around the browser to test our applications or replicate weird behaviors, often caused by API calls errors. In this short tutorial you can learn how to override a XHR/Fetch response status code with the tweak browser extension.

About HTTP status codes

Client error responses fall in the range 400–499 while server error responses fall in the 500–599 interval. These are the status code that you'll often want to replicate, to test how your application is reacting.

Let's override!

Now let's look how it simple it is to setup an override with our extension, for a specific HTTP response to contain a status code 400.

All it takes is three simple steps:

  1. Get the URL of the request.
  2. Input the status 400 in the status code input field.
  3. Enable the extension.

Here's how the setup looks like.

simple http override

And now let's see that override in action.

overriding http request with status 400

As you can see the application in the animated GIF logs the following in the console:

Uncaught AjaxErrorImpl {
message: 'ajax error',
name: 'AjaxError',
xhr: XMLHttpRequest, request: {}, status: 400, …

And there's the status: 400 we were after!

Like this blog post? Do you want to learn similar tricks? Here are some other blog posts that might spark your interest:

If you liked this article, consider sharing (tweeting) it to your followers.

Did you like this article?