# Debug Panel

## Overview

The **Debug Details Panel** in the Avonni Component Builder's Preview Mode provides an intuitive environment for testing and debugging your Dynamic Components in real-time. Without having to activate or deploy your component in Salesforce, you can easily simulate variable inputs, inspect outputs, and validate formulas directly in the builder.

***

## Accessing the Debug Details Panel

1. **Enter Preview Mode**: Within the Avonni Component Builder, click the **Preview** button.
2. **Open the Panel**: The Debug Details Panel automatically appears on the right side of your screen.

<figure><img src="/files/0KI5WZn5xyM11fLKBv2A" alt=""><figcaption></figcaption></figure>

***

## Using the Debug Details Panel

The Debug Details Panel consists of two tabs:

### Variables Tab

This tab includes three categories

* **Target Object**: Displays the current context of the object being targeted by the Dynamic Component.
* **Input Variables**: List the variables configured as Available for Input to simulate data passed into your component.
* **Output Variables**: Shows read-only values for variables configured as **Available for Output**, reflecting data produced by your component.

**How It Works**

* Select the variable you wish to test from the appropriate section.
* Enter or choose values directly within the panel.
* Observe immediate re-rendering and dynamic updates on the preview canvas.
* For Output Variables, interact with your component on the canvas (e.g., form submissions, button clicks) to monitor real-time value updates.

### Formulas Tab

This tab facilitates easy debugging and validation of any formulas included in your Dynamic Component.

<figure><img src="https://docs.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F3268123785-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FJU6zQrEzmfEcUVL9Ocs7%252Fuploads%252FH5pm0LOfH8EDskwH81g0%252F2025-07-05_09-58-00.png%3Falt%3Dmedia%26token%3Dbba8e5d3-e89f-4d52-9ae0-3957c5e36da7&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=17c3b9c8&#x26;sv=2" alt=""><figcaption></figcaption></figure>

**How It Works**

* View all formulas configured in your component.
* Monitor real-time evaluations of your formulas as variables and inputs change.
* Quickly identify and resolve any logical or computational issues within your formulas directly from the Debug Panel.

***

### Example: Testing a Record-Specific Component

#### **Scenario**

Your component uses a record ID to fetch and display related Salesforce data.

#### **Setup**

* Define a Text Variable named `inputRecordId` and mark it as **Available for Input**.
* Use this variable in actions like "On Load" > "Get Records" to retrieve data dynamically.

#### **Testing Steps**

1. Click **Preview** in the Component Builder.
2. Navigate to the **Variables** tab in the Debug Details Panel.
3. Under **Input Variables**, locate `inputRecordId`.
4. Paste a valid 18-character Salesforce Record ID into the input field.
5. Immediately see the component re-render and display data for the provided record.
6. Change the Record ID to test different scenarios instantly.

<figure><img src="/files/jEh7ZSIl6Gv2V2ydkS7P" alt=""><figcaption></figcaption></figure>

***

{% hint style="warning" %}

#### Key Considerations

* **Preview Mode Only:** This panel is a testing tool available exclusively in **Preview Mode**. It does not appear on live Salesforce pages.
* **Variable Availability:** A variable will only appear in the "Input Variables" or "Output Variables" tab if its **"Available for Input"** or **"Available for Output"** checkbox is checked in its configuration within the Resources panel.
  {% endhint %}

***

## Summary

The enhanced **Debug Details Panel** greatly simplifies testing and debugging of Avonni Dynamic Components. With dedicated tabs for managing variables and formulas, you can quickly validate component behavior and logic directly within the Component Builder, improving development efficiency and reliability.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/component-builder/advanced-features/debug-panel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.