> ## 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 カスタムページ開発におけるデバッグ手法とテクニックを網羅。変数・API・ページロジックの問題を素早く特定し、開発効率を高める実践的な方法を解説します。

カスタムページ開発において、デバッグは極めて重要な工程です。YiDA プラットフォームでは、カスタムページ開発時に以下のデバッグ方法を提供しています。

## debugger

アクションパネルに `debugger` コードを追加してブレークポイントを設定すると、プレビュー時のユーザー操作でブレークポイントにヒットした際にステップ実行デバッグを行えます。

* debugger コードを追加：

* プレビューページでブレークポイントにヒットし、ステップ実行デバッグを開始：

## ブラウザコンソールで cmd/ctrl + p を押し、page.js を入力してブレークポイントを直接追加してデバッグ

## セルフサービスデバッグパネルを開く

開発者はページ URL に `__showDevtools` パラメータを付与することで、デバッグパネルを有効化できます（[セルフサービスリンク組み立て](https://demo.aliwork.com/o/debug_by_self?__showDevtools=true)）。例：[https://www.aliwork.com/bench/feedback?\_\_showDevtools](https://www.aliwork.com/bench/feedback?__showDevtools)。

デバッグパネルでは、以下の操作を実行できます。

* データソース変数を確認
* フォームデータを確認
* 失敗したリクエストを確認
* エラーログを通報

特に重要な点として、デバッグパネルによりモバイルデバッグが非常に容易になります。

## Schema ワークベンチを有効化（スキーマのインポート／エクスポート）

YiDA フォームデザイナーの左下隅には、Schema ワークベンチを有効化するための隠しボタンがあります。Schema ワークベンチでは、スキーマをインポートすることでページを素早く生成できます。また、ワークベンチ内でスキーマを編集することにより、フォーム定義を素早く行うことも可能です。デザインリンクの URL に `__debug` パラメータを直接付与することでも有効化できます（[セルフサービスリンク組み立て](https://demo.aliwork.com/o/debug_by_self?__showDevtools=true)）。以下をご参照ください。

## vConsole を使用したモバイル／アプリ内デバッグ

デバッグが必要なページのアクションパネルを開き、以下のコードを先頭に入力してからページにアクセスし、デバッグを実施します。
注意：デバッグ完了後は、このコードを必ず削除してください。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
  const vConsole = 'https://g.alicdn.com/code/lib/vConsole/3.11.2/vconsole.min.js';
  const js = document.createElement('script');
  js.src = vConsole;
  document.body.append(js);
  js.onload = function() {
    window.vConsole = new window.VConsole();
  };
```