Analyze HTTP Traffic Using Chrome Developer Tools

This is for:

Developer System Administrator

Analyzing the GET and POST response that’s sent by a Web Application reveals useful information. This is particularly true when diagnosing the behavior of a Coveo for Sitecore Search.

This article explains how to obtain the Headers and the Response of any HTTP method called by a Coveo for Sitecore Search page using Chrome Developer Tools.

Sample Troubleshooting Procedure

  1. Open the Chrome Browser (Get Chrome)

  2. Open the Chrome Developer Tools (or select F12)

    Screenshot of the Google Chrome menu showing the More tools option | Coveo

  3. In the Developer Tools Console, select the Network tab. This will display all the methods that were used since you opened the tool.

    Network activity panel showing Coveo search request details | Coveo

  4. Clicking a method under the Name column header will give the details of that method. The Headers represent the header of the method.

    Developer tools network panel showing a successful POST request to the Coveo REST endpoint in the Headers tab | Coveo

  5. The Headers tab also allows you to see the full query that’s sent by your Coveo for Sitecore Search page.

    Screenshot of the headers tab showing the entire search query parameters and filter options | Coveo

  6. The Preview tab displays a summary of the relevant information that was returned by the method call. For a query in a Coveo for Sitecore page, it will show information like how many results were returned, how long did the query took, etc.

    Screenshot of the browser developer tools network panel showing a search API response preview | Coveo

  7. The Response tab contains the entire content of what was returned by the method call.

    Screenshot of the browser developer tools network panel showing the search API raw JSON response | Coveo