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

# コンポーネントデバッグ

> YiDA アプリのカスタムコンポーネント向けに、2 種類のデバッグモード（シンプルデバッグとアプリ統合デバッグ）を解説。コンポーネントの機能がビジネス要件を確実に満たすことを検証する方法を紹介します。

## 概要

YiDA アプリにおけるデバッグとは、**カスタムコンポーネントの問題をトラブルシューティングして解決し、その機能をビジネスニーズに適合させること**を指します。カスタムコンポーネントのデバッグには、**シンプルデバッグ**と**アプリ統合デバッグ**の 2 種類のモードがあります。

## シンプルデバッグ

ローコードコンポーネントデザイナーで「プレビュー」をクリックすると、テキスト、真偽値、数値などの基本的な属性設定をテストできます。属性の値を変更し、その効果を確認します。

<Warning>
  **注意**：次のシナリオでは [アプリ統合デバッグ](#アプリ統合デバッグ) モードをご利用ください。

  1. 関数に関連する属性や設定は、シンプルデバッグモードではテストできません。
  2. 画像アップロードや人員選択など、組織またはアプリに紐づくコンポーネントは、シンプルデバッグモードではテストできません。
</Warning>

## アプリ統合デバッグ

カスタムコンポーネントの開発中、`function` に関連する設定の効果は、すべて **アプリ統合デバッグ** を通じて検証する必要があります。検証対象には、戻り値の確認や、関数内の `console.log()` の出力内容の確認が含まれます。

**手順：**

1. **テストアプリ**を作成します。

2. アプリ設定 >> コンポーネント管理 >> 開発したコンポーネントを選択 >> インストールをクリック >> 「0.1.0（開発版、コンポーネントの変更がリアルタイムで同期されます）」を選択 >> インストールをクリックします。（下図参照）

3. インストール後、ページデザイナーを開き、コンポーネントパネルをクリックし、カスタムコンポーネントをクリックして、新しくインストールしたコンポーネントをページデザイナーにドラッグします。コンポーネントデザイナーで加えた変更は、ページデザイナーにリアルタイムで反映されます。（下図参照）

<Warning>
  1) 本番稼働中のアプリではコンポーネントをデバッグしないでください。稼働中のアプリに影響を与える恐れがあります。
  2) カスタムコンポーネントパネルにコンポーネントが表示されない場合は、インストールスコープが正しいかをご確認ください。
</Warning>