Safari Developer Tools — XHR

What is XHR and how to use to resolve missing data

I recently came across a bug while building out a search form that pulls from an API. I noticed that my search form was being selective when auto populating certain U.S States and did not know what other tools I could use besides console.log()

First, we need to know how to access the Dev Tools using Safari. Here is an article from Apple showing us how this can be down, https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac

Great, now that we have access to the tool, you will notice a difference between Google Chrome Dev and Safari. Take a few minutes to familiaze yourself. The key tabs I use are Elements and Console.

Under the Network tab, you will see a tab for XHR. As I type in my search form, it will populate by character. I can then click on the last Name that is shown and can see a Summary. This gives you the URL where your data is pulling from, the Status, Source, etc. This is all under Headers. If we click on Preview, this populates your API data. If your data that you are trying to search for is not shown, it is missing from your API file.

This feature is something that I recently used to debug my search form issue and wanted to share with any developer whose using Safari to build/edit an application on Safari.