Skip to main content

​
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
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.

​
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
  1. 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
  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.