Mock API Response In Browser

Nil Seri
3 min readJan 8


Mock API Responses During Development with Requestly

Photo by Thomas Buchholz on Unsplash
  • First, install “Redirect URL, Modify Headers & Mock APIs” add-on to your browser. For Chrome, you can install from this link.
    For other type of browsers, you can directly visit Requestlys official site. The page will direct you to download the extension for different platform and browser combinations.
Requestly Add-on
  • Sign up Requestly for free to save (and sync) your rules. You can visit here to see free usage limits (max active rules count is 3).
Sign Up Requestly
  • After signing up, under Rules — HTTP Rules section, click on “Create your first rule” button.
HTTP Rules — Create your first rule
  • Click on “Modify API Response” menu from the left side. After that, click on “Create Rule” button on the right side.
Modify API Response — Create Rule
  • Find the API request of the response which we want to modify from Developer Tools / Network tab. I wanted to mock a config API response. I copied “/v1/configs/list” because I want to mock the response in each deployment environment (test, preprod, etc.).
    Then, navigate to “Response” tab in Developer Tools and copy its content.
Developer Tools — Network
  • Go back to Requestly page and fill the screen like the print screen below with the url parts and response body you copied.
    Give name to your rule. Paste your request url parts with “URL” and “Contains” choices selected. Paste the response body and use “Pretty Print” link (which changes to “View Raw” afterwards) to beautify json response.
    Now, you can modify your response fields. I modified a login type flag value to 0.
    As the last step, click “Create rule” button (which changes to “Save Rule” afterwards).
Create Your Rule
  • Click on “Http Rules” from the left menu and now you are able to see your newly created rule under “Ungrouped” section in the list.
    When you hover over your rule, some quick action icons appear. Click “Pin Rule” so that you will be able to see it in your browser add-on as well.
Pin Rule
  • You can now switch on/off your rule whenever you want.
Switch on/off Your Rule from Add-on
  • You can now navigate to your web page where the mocked API is called. You will find an info console log if the request is mocked successfully.
Requestly Console Log

Happy Coding!



Nil Seri

I would love to change the world, but they won’t give me the source code | coding 👩🏻‍💻 | coffee ☕️ | jazz 🎷 | anime 🐲 | books 📚 | drawing 🎨