8 de febrero de 2017

Advanced AJAX / REST debugging tricks


When you are debugging or working with API interactions, you may find yourself making and monitoring a bunch of request from the browser console.

Like this:


You may've noticed the blue line there (plus the url). First trick :)

To get a line like this for every request the site you are looking / debugging performs, as well as one for every AJAX request you make "by hand" (usually, those requests don't get logged by the browser, not they appear on the Network or Timeline tabs), right click on the console and click the "Log XMLHttpRequests" option:




Good one, yet nothing too crazy. Right?

Well, here's where the plot thickens:

Now that you can get all and every each of the requests logged, let's try clicking on the url on the right-side of the blue text and see where it gets us:


Network activity! Things look promising. Ours is the last one. (here comes the second trick).

Let's right-click the last line -> Copy -> Copy as cURL:


Getting and idea of where this is going? :)

Let's now open Postman:

Import -> Paste raw text, paste:


Click import and now you have the request the site (or you) made, exported and put together in Postman, all bit and pieces included (yep, all headers too):



Neat, right? :)


I found this extremely useful when debugging API interactions and request to and from 3rd party sites with unclear APIs (or not APIs at all). Also very useful to simulate form posting from scripts.


Cheers!