Analyze an API Call directly within your browser

Modern internet browsers (such as Chrome, Safari, Firefox) are equipped with advanced developer tools. We can actually leverage some of these tools to take a look at which API calls are made behind the scene when you view or modify settings of your favourite Wi-Fi network cloud plarform.

To illustrate this feature, we will make a simple change on our Mist dashboard while trying to see which API calls are made in the background. We will explain how to do it in Safari and Google Chrome.

If you want to see how it work in a video, here is how it works on Safari:

First you need to enable the developer menu to display under Safari’s preferences:

At this point, you should be able to click on the “Develop” menu in Safari’s menu bar. From the “Develop” menu and open the “Show Web Inspector”:

Once the “Web Inspector” panel is opened, it should look like this:

From there, you can navigate to the “Network” Tab in order to display all the network related information:

At this point, it can be a good idea to filter the different network request to only show the ones made to the API you are studying. In this case, since we are using Mist, we can filter by using “api.mist.com” as follow:

Then, you can go ahead and perform the changes you want to study. In my case, I renamed an AP I have here in my lab to “AP-SemFio-AP04”. Before clicking on “Save” to apply the changes on the Mist Cloud, I actually cleared all the existing network requests displayed under the web inspector panel:

You will then start from a brand new list of network requests and it will be easier to find the API Call you are looking for. I then went ahead and applied my changes. It generated a few API calls in the background and I was able to pin point the one used to rename the AP:

In this image above you can see that the following information is available in the “Header” section:

• Status of the API response : 200 OK in this case
• Method used for the request: PUT
• URL used for the request: https://api.mist.com/api/v1/sites/1a13f6c2-3186-418f-8ca9-016fa4ac9ee7/devices/00000000-0000-0000-1000-5c5b352e4e1b

If you navigate to the “Preview” section, and select “Request” in the drop down menu located on the right side, you will be able to see the body of the API Call:

If you look into it, you should be able to see the new name of the AP.
Moreover, it will give you an idea of what type of data is expected by the Mist cloud. So when you build your API calls in your scripts, you could make sure that you are sending the appropriate data.

If you select “Response” in the drop down menu located on the right side, then you will be able to see the content of the response:

As you can see, the name of the AP has been updated successfully.
Moreover, you can study which pieces of information are sent back from the Mist cloud. You could be able to re-use some of them in your scripts.

In Google Chrome, the developer tools are available by default by clicking under the “View” menu and selecting “Developer” / “Developer Tools”:

Once the developer tools panel is open, you should see something like this:

Note that in my case, the panel is located at the bottom of the Chrome page. By default, the panel will be located on the right side of the Chrome page. You can adjust where you want it to be.

You have the same search field to filter out only the API calls you are studying, In my case, I added the “api.mist.com” filter:

I then performed the same change as the one I did on Safari (renamed an AP to SemFio-AP-04). Before applying the changes, you can also clear the output by clicking the following icon:

We are then ready to apply the changes and send the API Call. You can then find the API Call you want to study from the “Network” tab:

When you click on the API Call, a new panel will open displaying a few sections. In the “Headers” section, you will be able to retrieve of lot of information:

In this image above you can see that the following information is available in the “Headers” section:

• Status code of the API response : 200 OK 
• Method used for the request: PUT
• URL used for the request: https://api.mist.com/api/v1/sites/1a13f6c2-3186-418f-8ca9-016fa4ac9ee7/devices/00000000-0000-0000-1000-5c5b352e4e1b
• The Request payload: you can see that the new name is set to SemFio-AP-04

In the “Response” section, you will be able to see the response content:

Somewhere in the response, you will be able to see the new name, confirming that everything worked well.

I hope that this article will be useful for you. You should be able to do the same thing in other internet browser if they have some sort of developer tools.

Thank you for reading!

written by François Vergès