> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Component Debugging

> Learn how to debug custom components in a YiDA app using two modes: basic debugging and app integration debugging. Use basic debugging to test basic attribute configurations. Use app integration debugging for function-related configurations and features that involve organization or app associations.

## 1. Introduction to Component Debugging

This topic walks you through the low-code component designer's preview feature and the app integration workflow used to validate custom component behavior in a YiDA app.

## 2. Basic Debugging

In the low-code component designer, click Preview to test simple attribute configurations such as text, boolean, and number values. Change the attribute values to see the effects in real time.

Figure 2.1-1 Basic debugging of a component

<Warning>
  Use the app integration debugging mode in the following scenarios:

  1. Function-related attributes and configurations cannot be tested in basic debugging mode.

  2. Components tied to organization or app data, such as image upload or people picker, cannot be tested in basic debugging mode.
</Warning>

## 3. App Integration Debugging

During custom component development, any configuration effects related to `function` must be tested through **app integration debugging**. This includes viewing return values and reading output from `console.log()` statements inside functions.

**Procedure:**

1. Create a test app.
2. Go to App Settings >> Component Management >> locate the component you developed >> click Install >> select "0.1.0 (development version, component changes sync in real time)" >> click Install. (See Figure 3.1-1)

Figure 3.1-1 Installing version 0.1.0 of the component

3. After installation, open the page designer, click the component panel, click Custom Components, and drag the newly installed component onto the page designer. Any changes you make in the component designer are now reflected in the page designer in real time. (See Figure 3.1-2)

Figure 3.1-2 App integration debugging for a component

<Warning>
  1. Do not debug components in a live production app, as this may affect the production environment.
  2. If your component does not appear in the custom components panel, check whether the installation scope is set correctly.
</Warning>