---
title: Use the Debug Panel
slug: '434'
canonical_url: https://docs.coveo.com/en/434/
collection: javascript-search-framework
source_format: adoc
---
# Use the Debug Panel
You can use the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) Debug Panel to get detailed information about specific results or component instances in your search page (for example, a result in the ResultList, a certain Facet, etc.).
The information includes at least the component options and their values.

![Coveo debug panel listing Facet component options plus toggles for query debug and syntax](https://docs.coveo.com/en/assets/images/jsui/attachments/39977332/39944907.png)

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

![Coveo debug panel with expandable sections showing query debug options and detailed fields for a selected search result](https://docs.coveo.com/en/assets/images/jsui/attachments/39977332/39944908.png)

The Debug Panel is particularly useful in the following situations:

* Investigating relevance issues in search results (see [**rankingInfo** section](#rankinginfo-section)).

* Validating that a search result template has been correctly applied (see [**template** section](#template-section)).

* Verifying which query pipeline is applied to a specific search result (see [**result** section](#result-section)).

* Consulting field values for a search result (see [**fields** section](#fields-section)).

* Consulting component options without using the browser developer console (see [Component sections](#component-sections)).

> **Note**
>
> 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

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

. Select and hold Alt (Windows) or Option (Mac) 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, select the Esc key.

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

> **Important**
>
> Depending on your Coveo JavaScript Search Framework version, you might need to click 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.

![Grey Debug panel header with Highlight recommendation and other query debugging checkboxes in Coveo search UI](https://docs.coveo.com/en/assets/images/jsui/attachments/39977332/39944904.png)

The header offers the following features:

* **Highlight recommendation** checkbox

Select the **Highlight recommendation** checkbox to highlight results boosted by [Automatic Relevance Tuning (ART)](https://docs.coveo.com/en/1013/) models (see [About Automatic Relevance Tuning](https://docs.coveo.com/en/3384/)).
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`.

![Coveo debug panel displaying Highlight recommendation and Enable query debug checkboxes above a list of search results ranked by relevance](https://docs.coveo.com/en/assets/images/jsui/attachments/39977332/39944909.png)

* **Enable query debug** checkbox

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** checkbox

--

[jsui-obsolete Obsolete]


--

Check this box to override `data-enable-query-syntax` value and set it to `true` (see [enablequerysyntax](https://coveo.github.io/search-ui/components/querybox.html#options.enablequerysyntax)).
This action enables the use of [query syntax](https://docs.coveo.com/en/1552/) directly in the search box.

* **Request all fields available** checkbox   [[request-all-fields-available]]

--

[jsui-obsolete Obsolete]


--

When `auto-select-fields-to-include` is set to `true` in the **ResultList** (see [autoSelectFieldsToInclude](https://coveo.github.io/search-ui/components/resultlist.html#options.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** checkbox to consult the complete list of available fields.

* **Search in debug** text box

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

* {empty}

--

[jsui-obsolete Obsolete]


--

**Download** trigger link

Click the **Download** link in the upper-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 example, selecting and holding Alt (Windows) or Option (Mac) and double-clicking 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**.

> **Important**
>
> 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.

**Example**

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

. Select and hold Alt (Windows) or Option (Mac) and double-click any result to open the Debug Panel.

. Type the word `pipeline` in the **Search in debug** filter box.

. Select Enter and expand the **result** section to see if your pipeline has been applied correctly.

![Coveo debug panel with result section expanded showing pipeline field set to PipelineTest and other debug options](https://docs.coveo.com/en/assets/images/jsui/attachments/39977332/39944902.png)

** If your pipeline isn't applied to the search result, apply the pipeline to your source (see [Apply an extension to a source](https://docs.coveo.com/en/1936/)).

** If your pipeline is applied to the result and is still ineffective, make modifications to the pipeline (see [Manage query pipelines with the Search API](https://docs.coveo.com/en/1450/)).

### **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](#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.

**Example**

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

. Select and hold Alt (Windows) or Option (Mac) and double-click any result to open the Debug Panel.

. Expand the **fields** section.

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

![Coveo debug panel Fields section expanded shows @author field value Coveo Doc Team plus rankingInfo and debug option toggles](https://docs.coveo.com/en/assets/images/jsui/attachments/39977332/39944898.png)

### **rankingInfo** section

When expanding the **rankingInfo** section, you get detailed information on **Total weight**, which is the sum of **Document weights** and **Terms weights**  (The **rankingInfo** section may appear as `Missing` on search results when a query is too vague for the index to compute a **Document weight**. For example, this can happen when an empty query is performed.) (see [About search result ranking](https://docs.coveo.com/en/1624/)).
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 [Manage ranking weight rules](https://docs.coveo.com/en/3412/)).

**Example**

A query for `sales tax` returns unsatisfying results.

. Select and hold Alt (Windows) or Option (Mac) and double-click a result that needs to be fixed.

The Debug Panel opens.

. Expand the **rankingInfo** section (selecting **Enable query debug** checkbox is mandatory to fill the section with values).

. Expand the **Document weights** subsection to consult given weights. (If a value is disproportionate, you can [add a ranking weight rule)(https://docs.coveo.com/en/3412/) in your query pipeline. Note that ranking weight rules are only applied when results are sorted by **Relevance**. For example, if you're sorting by **Date**, the **rankingInfo** section will appear as `Missing`.]  (In the **Document weights** subsection, the `Custom` weight factor always has a value of `350`. Since this value is the same for all items that are returned for a query, this score doesn't affect item ranking.)

![Debug panel in Coveo Interface showing rankingInfo with document weights Adjacency 138 Custom 400 Source 500 and total weight 8894](https://docs.coveo.com/en/assets/images/jsui/attachments/39977332/39944910.png)

[query ranking expressions (QREs)](https://docs.coveo.com/en/1472/) can also significantly affect search results ranking, which can lead to relevance issues (see [Manage ranking expression rules](https://docs.coveo.com/en/3375/)).
The QRE item weight for an item is viewable under the **Document weights** subsection of the debug panel, beside **QRE**.

**Example**

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

In the portal's [query pipeline](https://docs.coveo.com/en/180/), you define a [ranking expression](https://docs.coveo.com/en/1472/) rule that adds a positive modifier to the ranking score for each result item whose `@brand` [field](https://docs.coveo.com/en/200/) value is `ACME` when the query contains the terms `monitor` or `screen`.

![Promoting ACME monitors](https://docs.coveo.com/en/assets/images/coveo-platform/promote-acme-monitors.png)

A user accesses the commerce portal and submits the following query: `globex computer screen`.

Even though the user is apparently searching for Globex-brand monitors, your ranking expression rule is 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 [result template](https://docs.coveo.com/en/413/) for a specific result.

**Example**

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

. Select and hold Alt (Windows) or Option (Mac) and double-click the `youtubevideo` result that needs to be fixed.

The Debug Panel opens.

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

![Coveo debug panel shows result fields ranking info and template type DefaultResultTemplate with debug options below](https://docs.coveo.com/en/assets/images/jsui/attachments/39977332/39944911.png)

** If your template isn't applied to the search result, bind it correctly (see [About the condition evaluation mechanism](https://docs.coveo.com/en/413#about-the-condition-evaluation-mechanism)).

** If your template is applied to the result and is still ineffective, [modify the template](https://docs.coveo.com/en/413#registering-your-own-templates).

### Component sections

When you select and hold Alt (Windows) or Option (Mac) 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 appear 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](https://coveo.github.io/search-ui/globals.html)).

**Example**

* If the double-clicked component is the **Excerpt**, when expanding this section, you get a **No options** response since the **Excerpt** component doesn't have options (see [Coveo Excerpt Component](https://coveo.github.io/search-ui/components/excerpt.html)).

![Coveo Debug Panel showing Excerpt section with No options message](https://docs.coveo.com/en/assets/images/jsui/attachments/39977332/39944912.png)

When you select and hold Alt (Windows) or Option (Mac) and double-click the `Icon` sitting inside a result template, all result-related sections appear in the Debug Panel as well as the `Icon` section.

![Coveo JavaScript debug panel listing result fields rankinginfo template and Icon properties small true withLabel false](https://docs.coveo.com/en/assets/images/jsui/attachments/39977332/39944913.png)

## Troubleshooting

If the JavaScript Debug Panel doesn't open, you might want to look at the following 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 the `SearchInterface` component by setting the `enableDebugInfo` option to `true`.

* Selecting a non clickable area to open the panel while selecting and holding Alt (Windows) or Option (Mac) + double-clicking action.

To open the Debug Panel, you should select and hold Alt (Windows) or Option (Mac) 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 don't support the use of the Debug Panel and return the following error message:

```text
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.