DevToolsを使用してConstellationを調べる
Constellationアプリケーションはステートレスであるため、WebブラウザーのDevToolsは、Constellationアプリケーションのデバッグで重要な役割を果たします。
このトピックでは、ブラウザーのDevToolsを使用してConstellationアプリケーションのデバッグに役立ついくつかのコマンドについて説明します。
ブラウザーDevTools
より最新のWebテクノロジーを採用する方向に進むにつれて、Pegaデベロッパーはデバッグに一般的な開発者ツールをより多く活用できるようになります。
ブラウザーには、フロントエンドアプリケーションを検査およびデバッグするためのツールが組み込まれています。Chrome、Firefox、Edgeでは、キーボードのF12キーを押すことでこれらの開発者ツールを開くことができます。
開発者ツールには、興味深い領域がいくつかあります。
- Consoleタブ - Webページに動作中のスクリプトを表示します。
- networkタブ - DX API呼び出しを表示します（Fetch/XHRによるフィルタリングを選択します）。リクエストとレスポンスの両方のペイロードはここで確認できます。
- Applicationタブ - ローカルストレージとセッションストレージにキャッシュされたアイテムを検査できます。
次の図は、ChromeブラウザーのDevToolメニューにおけるこれらのタブの位置を示しています。
Reactアプリケーションをデバッグするためにダウンロードして使用できるwebブラウザー拡張機能もあります。
- React DevToolsは、ブラウザーのDevToolでReactコンポーネントの階層を検査できる無料のプラグインです。
- Redux DevToolsは、状態の変更を視覚化し、ブラウザーのDevToolsですべての状態とアクションのペイロードを検査できる無料のプラグインです。
データページのデバッグ
クライアント側でキャッシュされるデータページはReduxの一部として保存されるのではなく、アプリケーションのデータストアに保存されます。
ブラウザーのコンソールで次のコードを実行して、クライアント側でキャッシュされたデータページに関する情報をログに記録します。
PCore.getDataPageUtils();
結果は、次の図に示すように、アプリケーションのデータストアに配置されているキャッシュされたデータページのリストになります。
補足： PCore APIおよびPConnect APIは、App Studioシェルでは使用できません。PCoreおよびPConnectに関連するメソッドを利用するには、Dev Studioからポータルを起動するのがベストプラクティスです。
Constellation UIのデバッグ
X-Rayは、コントローラー、ビューテンプレート、Partials、JSテンプレートなど、Constellation UIの高レベルのコンポーネントを視覚化するためのツールです。
ブラウザーのコンソールで次のコードを実行します。
PCore.getDebugger().toggleXRay(true);
ブラウザーウィンドウ内のアプリケーションの外観が変わります。さまざまな要素間を移動し、各要素に関連付けられたメタデータを調べることができます。次の図では、HandleTicketビューが表示されます：
X-Rayでの作業が終了したら、コンソールで次のコードを実行してXRay機能をオフにします。
PCore.getDebugger().toggleXRay(false);
補足： PCoreおよびPConnectのパブリックAPIを使用してConstellationアプリケーションをデバッグする方法の詳細については、「Using PCore and PConnect Public APIs」を参照してください。
以下のインタラクションで理解度をチェックしてください。
トレーニングを実施中に問題が発生した場合は、Pega Academy Support FAQsをご確認ください。