We have been using Web APIs for very long. Many single page applications use web APIs for obvious reasons. There are a lot of debugging tools for troubleshooting the web APIs, including but not limited to Swagger (Open API), Postman, Google Chrome / Edge developer tools, Fiddler, etc.
In this article, let’s have a look at some tips that can help you to save some time while debugging / developing the application. The word used hereafter in this article – XHR – refers to XML Http Request.
TIP – 1 : Replay XHR From Browser
Sometimes, the forms in applications are like “step-by-step wizard”. Or sometimes, it might take few clicks to trigger the API call on dev / local environment.
If you want to troubleshoot an HTTP GET API, then it might be easy. Once you get the URL, you just need to paste that in browser’s address bar to trigger the call. But if the API is HTTP POST / PUT / DELETE / PATCH, then you can still trigger the API without having to go through the series of clicks. The trick is to right click on the request from browser’s network tab and select Replay XHR.
Well, obviously, before replaying you should make sure that you have arranged the data as intended for debugging. I mean if we keep on replaying HTTP DELETE which hard deletes the record from database, it would just throw errors.
TIP 2 – Copy XHR as Script From Browser
Browser’s dev tools capture the http traffic. The captured API call shows everything – request headers, response headers, request body and response.
If you wish to generate the script from captured XHR, then right click on the captured XHR and then select Copy option. It would open a submenu, which will allow you to copy the selected XHR as cURL or PowerShell or HAR.
TIP 3 – Copy XHR to Postman
At some point while debugging, you may want to copy the captured API call from browser’s network tab to Postman. Obviously one way is to manually copy each and every request header and then the request body and URL. In order to save some key presses and mouse clicks, you can also choose another alternative.
You can right click on selected XHR and then select Copy -> Copy as cURL (bash) option from the submenu.
Then go to Postman and then select File -> Import. This would open an import popup. On this popup select Raw Text tab and paste the copied cURL. Then click on Continue and Import to finish the import.
It should create a request tab in postman with URL, request method, request body and request headers already populated. This feature may prove to be useful if you want to create a postman collection to test the APIs.
TIP 4 – Generate Code From Postman
In some cases, when you are trying to consume an already existing API. You may receive details about the API in the form of document or in the form of a sample HTTP request (in form of cURL script or Postman request).
Once you trigger the API from postman and you got everything right, you may want to write the code to consume that API. This part can be made a bit easy by using the code generation in postman.
We can click on the Code icon ( The icon </>, near top right corner of the request tab). It would allow you to select the target language, in which the code should be generated. Below snippet shows code generation in C# using RestSharp package. Of course, the generated code is not perfect, but it may be a helpful feature to save some time.
TIP 5 – Compare Two JSONs
When you are troubleshooting the API call, you may want to compare two API requests (to the same endpoint) or two responses many times. This may be to figure out if there is anything wrong in code while generating request body. It may also be to figure out if the response is not as expected. In any case, you may want to compare two JSONs.
I personally like this tool – https://json-diff.com/. This is an open source tool and its source code is available on GitHub. Below is how it shows the differences in the JSONs.
I hope you found this information helpful. Let me know if you have any such tips in the comments.
