Tag Archives: Firefox

How to Debug An API Quickly

July 2nd, 2019
min read

Learning this trick a couple years ago has saved me so much time, that it’s only prudent for me to share. Hopefully everyone finds it as useful as I have (and use it as often as I have) ?.

400 Response

We’ve all been there: API is built, along with a front end to consume the awesomeness that is your API. Form is set up to log your user in, hit the send button… and get a 400 response. Wait, what the what? If this is happening to you, there is a simple remedy. With tools you are probably already using.

I use this trick on a daily basis. I hope that you will too!
A caterpillar on a branch.
Imaging what he would do to your API.

Chrome & Firefox

This tip involves either Google #Chrome or Mozilla #Firefox (there may be more, but these are the #browsers I use) and the Postman app. These are all free to use, so everyone should. They are awesome!

  1. Open dev tools/
    • Chrome (cmd + alt + i
    • Firefox (cmd + alt + i
  2. Screenshot of the network tab. Screenshot of the network tab.

    Go to the network tab.

  3. Screenshot of failing request. Screenshot of failing request.

    Find the failing request.

  4. Screenshot of copying cURL Screenshot of copying cURL

    Right click and copy as cURL

  5. Screenshot of importing to Postman Screenshot of importing to Postman

    Open Postman and select import.

  6. Screenshot of paste raw text option Screenshot of paste raw text option

    Select the “Paste Raw Test” tab.

  7. Screenshot of cURL import Screenshot of cURL import

    Paste cURL request copied from the browser and hit Import.

  8. Screenshot of sending request Screenshot of sending request

    Send the request for much easier debugging.

One Note

One thing to take note of, your request is completely imported into Postman. This makes it very simple to debug. Data is easier to see and headers sent in their nice UI.

Handy for the Front

As a backend dev, I find it handy when frontend devs send that request to me in chat. Allowing me to recreate what is breaking in the API with the exact data that they are sending.