出典：ArcGIS Experience Builder - Guide - Debugging widget development
Web ブラウザ内には、カスタム ウィジェットを効率的に構築するために使用できるさまざまなデバッグツールがあります。
Experience Builder のオーサリング インターフェイスまたはプレビュー モードでは、ブラウザの開発者ツールを開いてデバッグ ツールにアクセスすることができます。開発者ツールを開くには
ブラウザの開発者ツールで、Sources (Chrome) または Debugger (Firefox) タブをクリックします。ここでは、カスタムウィジェットの DOM を調べて現在の状態を確認できます。
ブラウザの開発者ツールで、Elements (Chrome) または Inspector (Firefox) タブをクリックします。ここでは、ページの JavaScript コードを閲覧することができます。ウィジェットが開かれていることを確認して(該当する場合)、左側のファイルブラウザで webpack を選択してウィジェットの widget.tsx ファイルを見つけてダブルクリックしてください。別の方法としては、ctrl + p と入力してファイル コマンドパレットを開き、widget.tsx と入力してください。目的の widget.tsx ファイルはファイル名の最後に ?zzzz (zzzz は数字と文字の組み合わせ) が付いているものになります。
ウィジェット ファイルを開くと、その TypeScript コードを見ることができます。行番号をクリックしてブレークポイントを設定することができます (詳細: Chrome、Firefox)
コードがブレークポイントで停止している場合、右側のパネルで Scope ペインを開き、現在スコープ内にある変数を見ることができます。Global まで下にスクロールしてください。ここには、Experience Builder がいくつかの便利な変数を配置しています。これらの変数を調べて、Experience Builder 内のさまざまな現在のステータスを確認できます。
これらの変数には、以下のものがあります。
_appState - Experience Builder の現在の状態に関するさまざまなプロパティ。_dataSourceManager - ウィジェット内の現在のデータソース。_widgetManager - ウィジェットがロードされているかどうかなど、ウィジェットに関する様々なプロパティ。_sessionManager - ログイン情報の確認と管理に使用できます。
他にも、あまり使われていないグローバル変数もあります。すべてのリストを見るには、ファイル clientjimu-core\jimu-coreliblib\typeswindow.d.ts を参照してください。ビルダーページでデバッグすると、Experience は iframe で読み込まれます。このため、Javascript の実行コンテキストには top と _appWindow の 2 つに分かれています。top コンテキストがビルダーコンテキストで、_appWindow コンテキストが Experience コンテキストです。コンソールでグローバル変数を検査する場合は、ブラウザの開発者ツールのドロップダウン リストで正しいコンテキストが選択されていることを確認してください。ブレークポイントを使用してデバッグしているときは、window.jimuConfig.isBuilder を見て実行コンテキストを判断してください。true はコードが ビルダーコンテキスト内にあることを意味します。
ブラウザの開発者ツールで、Network タブをクリックします。ここでは、Experience によって送受信されるネットワークのリクエストを確認できます。
コードをデバッグしている間は、コードを変更したり、ページを頻繁にリロードしたりすることがあります。ブラウザが予期せずにキャッシュし、開発中に混乱を招くこともあります。このため、ブラウザを更新するたびにキャッシュをクリアするか、開発中にネットワーク開発者ツールの Disable cache にするチェックボックスを有効にすることが重要です。
Experience Builder の Experiences は、React JavaScript ライブラリを使用しています。上記の DOM Elements ブラウザに加えて、React がどのように動作するかを知り、React コンポーネントについてさらに詳しい情報を表示してくれるブラウザ拡張機能をインストールすることができます。ブラウザの拡張機能ストア (Chrome, Firefox) から拡張機能をインストールし、ツールを有効にします。これで、ブラウザの開発者ツールに 2 つのタブが追加されました。Components と Profiler です。
Components タブをクリックします。Search または “Select Element” ボタンを使用して、コンポーネントツリーでカスタム ウィジェットを選択します。選択されると、右側の情報パネルにコンポーネントの props と state が表示されます。