> ## 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ページでのJavaScriptデバッグ方法

> YiDAページでJavaScriptおよびReactコードをデバッグする方法を解説します。Chrome、React Devtoolsの使い方、アクションパネルに記述したJSコードのデバッグ方法を含みます。

## 1. 背景

YiDAページのデバッグ方法を学ぶ前に、以下の点を念頭に置いてください。

1. YiDAは現在、JavaScriptエコシステム上に構築されています。
2. YiDAは現在、Reactエコシステム上に構築されています。
3. YiDAのコンポーネントシステムは現在、Alibaba GroupのオープンソースコンポーネントライブラリであるFusionをベースにしています。

## 2. JavaScriptのデバッグ

コードのデバッグには、Chromeブラウザの使用を推奨します。

ステップごとのガイダンスについては、[こちらの記事（英語）](https://developers.google.com/web/tools/chrome-devtools/javascript/?hl=zh-cn)または[こちらの記事（中国語）](https://zh.javascript.info/debugging-chrome)を参照してください。

## 3. Reactのデバッグ

[React Devtools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)を使用してデバッグします。

詳細な手順については、[こちらの記事](https://reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html)を参照してください。

## 4. アクションパネルに記述したJSコードのデバッグ

(1) 開発者コンソールを開きます。macOSでは、Cmd + Option + Iを押すか、右クリックして「検証」を選択します。Windowsでは、F12を押すか、右クリックして「検証」を選択します。

(2) コンソールデバッグ用のブレークポイントを設定するには、コード内に`debugger`キーワードを追加します。

(3) モバイル端末では、`alert()`を使用して値を表示し、トラブルシューティングを行います。

(4) コンソールにエラーが表示された場合は、`page.js`を直接クリックしてソースコードのデバッグに進みます。

(5) コンソールでCmd/Ctrl + Pを押し、`page.js`を検索してソースコードのデバッグに進みます。

(6) その他のデバッグ方法については、[https://developers.aliwork.com/docs/guide/concept/debug](/ja/open/yida/guide/concept/debug)を参照してください。