> ## 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 つのモードを解説します。ベーシックデバッグは基本的な属性設定のテストに適していますが、関数関連の設定や、組織・アプリとの関連を伴う機能については、アプリ統合デバッグモードが必要です。
## 1. コンポーネントのデバッグの概要
YiDA アプリ内でのデバッグとは、**カスタムコンポーネントの問題を切り分けて解決し、その機能をビジネスニーズにより適合させること**を指します。カスタムコンポーネントのデバッグには、**ベーシックデバッグ**と**アプリ統合デバッグ**の 2 つのモードがあります。
## 2. ベーシックデバッグ
ローコードコンポーネントデザイナーで「プレビュー」をクリックし、テキスト・真偽値・数値などのシンプルな属性設定をテストします。属性値を変更すると、その効果をリアルタイムに確認できます。
図 2.1-1 コンポーネントのベーシックデバッグ
以下のシナリオでは、アプリ統合デバッグモードをご利用ください。
1. 関数に関連するすべての属性および設定は、ベーシックデバッグモードではテストできません。
2. 画像アップロードや担当者選択など、組織やアプリのデータに関連するコンポーネントは、ベーシックデバッグモードではテストできません。
## 3. アプリ統合デバッグ
カスタムコンポーネントの開発中、`関数`に関連するすべての設定効果は、**アプリ統合デバッグ**でデバッグする必要があります。関数内の `console.log()` による戻り値の確認や出力の表示もこれに含まれます。
**手順：**
1. テスト用アプリを作成します。
2. 「アプリ設定」＞「コンポーネント管理」＞開発したコンポーネントを選択＞「インストール」をクリック＞「0.1.0（開発バージョン、コンポーネントの変更をリアルタイムに同期）」を選択＞「インストール」をクリックします（図 3.1-1 参照）。
図 3.1-1 コンポーネントの 0.1.0 バージョンのインストール
3. インストール完了後、ページデザイナーを開き、コンポーネントパネルの「カスタムコンポーネント」をクリックして、新しくインストールしたコンポーネントをページデザイナーにドラッグします。コンポーネントデザイナーで加えた変更は、ページデザイナーにリアルタイムに反映されます（図 3.1-2 参照）。
図 3.1-2 コンポーネントのアプリ統合デバッグのイメージ
1. 本番環境のアプリでコンポーネントをデバッグしないでください。本番環境に影響を及ぼすおそれがあります。
2. カスタムコンポーネントパネルにコンポーネントが表示されない場合は、インストールスコープが正しく設定されているかご確認ください。