Using the JavaScript Search Debug Panel

You can use the Coveo JavaScript Search Framework Debug Panel to get detailed information about specific results or component instances in your search page (e.g., a result in the ResultList, a certain Facet, etc.). The information includes at least the component options and their values.

The panel can present information in several expandable sections for some components and results.

The Debug Panel is particularly useful in the following situations:

  • Investigating relevance issues in search results (see rankingInfo Section).
  • Validating that a search result template has been correctly applied (see template Section).
  • Verifying which query pipeline is applied to a specific search result (see result Section).
  • Consulting field values for a search result (see fields Section).
  • Consulting component options without using the browser developer console (see Component Sections).

All of the information presented in the Debug Panel is also available through the browser developer console. The Debug Panel gives quick and convenient access to a collection of handpicked information.

Accessing the Debug Panel for a Given Component or Result

  1. Hover over the Coveo JavaScript Search Framework page component or result for which you want to get detailed information.

  2. On the keyboard, press and hold the ALT key and then double-click the component or result. The Debug Panel opens with detailed information about the double-clicked element.

Closing the Debug Panel

There are many ways to exit the Debug Panel:

  • Click anywhere outside the modal of the Debug Panel.

  • On the keyboard, press the ESCAPE key.

  • In the Debug Panel, click anywhere in the header section.

    Depending on your Coveo JavaScript Search Framework version, you might need to click on a non-clickable area of the header to close the Debug Panel.

Debug Panel Header

The Debug Panel header is the grey horizontal bar at the top of the panel.

The header offers the following features:

  • Highlight recommendation checkbox

    Select the Highlight recommendation check box to highlight results boosted by Automatic Relevance Tuning models (see ART Feature). In the results section of the Debug Panel, you can also determine if a search result has been boosted when its isRecommendation value is set to true.

  • Enable query debug check box

    Check this box to fill the rankingInfo expandable section with detailed ranking weights. In the results section, the rankingInfo subsection gets simultaneously populated with the same data, but with a lesser degree of formatting.

  • Enable query syntax in search box check box

    Coveo JavaScript Search Framework 2.2900.23 (July 2017) Check this box to override data-enable-query-syntax value and set it to true (see enablequerysyntax). This action enables the use of Coveo Cloud Query Syntax directly in the search box (see Coveo Cloud Query Syntax Reference).

  • Request all fields available check box

    Coveo JavaScript Search Framework 2.2900.23 (July 2017) When auto-select-fields-to-include is set to true in the ResultList (see autoSelectFieldsToInclude), the fields section of the Debug Panel is populated only with the necessary fields to render all results. Check the Request all fields available check box to consult the complete list of available fields.

  • Search in debug text box

    Enter a keyword in this box and press enter to filter the Debug Panel content and quickly find needed information.

  • Download trigger link

    Coveo JavaScript Search Framework 2.4094.8 (May 2018)

    This link has been removed in the May 2018 release of the Coveo JavaScript Search Framework.

    Click the Download link in the top right corner of the panel to automatically download the Debug Panel content in JSON format. You can now review the JSON locally on your machine using the text editor of your choice.

Debug Panel Expandable Sections

Each component or result gives access to a different set of information in the Debug Panel. For instance, pressing the Alt key and double-clicking on a result provides different categories such as result, fields, rankingInfo, template, ResultList, all of which are expandable.

result Section

When expanding the result section, you get access to relevant information such as ClickUri, PrintableUri, percentScore, pipeline and score.

You apply a pipeline and you want to validate that it has been used in your search page.

  1. Press and hold the ALT key and double-click any result to open the Debug Panel.

  2. Type the word pipeline in the Search in debug filter box.

  3. Press enter and expand the result section to see if your pipeline has been applied correctly.

In the result section, the raw subsection gives the exact same information as the fields section with some elements formatted differently for a better readability.

fields Section

The fields section contains at least the necessary fields to render the search page results expressed as key-value pairs (see Request all fields available). When Request all fields available is checked or when data-auto-select-fields-to-include option is set to true, the fields section is a complete list of all metadata mappings for this particular result.

You want to validate that the metadata related to the author has been mapped correctly to the field @author.

  1. Press and hold the ALT key and double-click any result to open the Debug Panel.

  2. Expand the fields section.

  3. Search the value associated with the key @author to validate the data.

rankingInfo Section

When expanding the rankingInfo section, you get detailed information on Total weight, which is the sum of Document weights and Terms weights (see Understanding Search Result Ranking). Since the more weight a result has, the higher it appears in the results list, this information is useful when investigating relevance issues in search results. Each of these ranking factors can be customized, together with the number of results in each index ranking phases (see Adding and Managing Query Pipeline Ranking Weight Rules).

A query for sales tax returns unsatisfying results.

  1. Press and hold the ALT key and double-click a result that needs to be fixed. The Debug Panel opens.

  2. Expand the rankingInfo section (selecting Enable query debug check box is mandatory to fill the section with values).

  3. Expand the Document weights subsection to consult given weights.

    If a value is disproportionate, you can adjust the Ranking Weights in your query pipeline (see Adding and Managing Query Pipeline Ranking Weight Rules).

Ranking weights are only applied when results are sorted by Relevance. For instance, if you are sorting by date, the Total weight equals 0.

Query ranking expression (QRE) can also significantly affect search results ranking, which can lead to relevance issues (see Adding and Managing Query Pipeline Ranking Expressions). The QRE item weight for an item is viewable under the Document weights subsection of the debug panel, beside QRE.

You want to promote ACME monitors in a Coveo-powered commerce portal.

In the portal’s query pipeline, you define a ranking expression rule that adds a positive modifier to the ranking score of each result item whose @brand field value is ACME when the query contains monitor or screen.

Example: Promote ACME monitors QRE

An end user accesses the commerce portal and submits the following query: globex computer screen.

Even though the end user is apparently looking for monitors of the Globex brand, your ranking expression rule is now likely to make ACME monitors appear higher in the result list.

template Section

When expanding the template section, you get detailed information on the applied template for a specific result.

You apply a template on all youtubevideo and your template has not been applied correctly to a certain result.

  1. Press and hold the ALT key and double-click the youtubevideo result that needs to be fixed.

    The Debug Panel opens.

  2. Expand the template section to see if the right template has been applied to your result.

Component Sections

When you press and hold the ALT key and double-click any component, the component section appears in the Debug Panel.

If the double-clicked component sits inside a result template, all result related sections appears in the Debug Panel as well as the component section.

All component sections are filled with their own component options (see Coveo JavaScript Search Framework - Reference Documentation).

  • If the double-clicked component is the Excerpt, when expanding this section, you get a No options response since the Excerpt component does not have options (see Coveo Excerpt Component).

    When you press and hold the ALT key and double-click the Icon sitting inside a result template, all result related sections appears in the Debug Panel as well as the Icon section.

Troubleshooting

When the JavaScript Debug Panel does not open, you might want to look at those solutions:

  • Enabling the Debug Panel. The Debug Panel is enabled by default, but a search page administrator or developer can disable it. Ensure that the panel is enabled in your SearchInterface by setting the enableDebugInfo option to true).

  • Selecting a non clickable area to open the panel while performing ALT + double-click action. To open the Debug Panel, you should press the ALT key and preferably click twice on a non clickable area of the component or result. Performing this action on a clickable area could change the query parameters or prevent the Debug Panel to open.

  • Updating to a newer version of the Coveo JavaScript Search Framework. Some older versions of the Coveo JavaScript Search Framework do not support the use of the Debug Panel and return the following error message:

    CoveoJsAdmin.Common.Dependencies.min.js:41 Uncaught TypeError: Cannot read property ‘1’ of null(…)

    Versions prior to v1.1865.18 should be updated to a newer one.