Composable Storefront でデバッグをしてみる

※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

ここでは PWA Kit を利用したローカル開発の際、また Managed Runtime（以下、MRT） 上にデプロイした後のデバッグ方法を紹介して行きたいと思います。（詳細）

クエリによるステートとサーバーサイドレンダリングの確認

ここでは URL のクエリを利用してサーバーサイドレンダリング時とステートの確認方法を見て行きます。

サーバーサイドレンダリングのみの状態を確認したい場合

クライアントでの Hydration（Javascript のイベントのアタッチ）を行わずに完全にサーバーからレンダリングされた状態のページを確認したい場合は URL のクエリに __server_only というパラメータを設定します。例えばホームページで確認を行いたい場合は http://localhost:3000/?__server_only のようにします。

下記はパラメータを指定しない状態でのホームページですが、この場合は Hydration が行われるためヘッダーのアローの表示やホバーした際のメニューの表示が行われます。

一方、パラメータを設定することで Hydration が行われず、アローボタンやホバー時のメニューの表示といった Javascript イベントで行われる動的な部分が機能していないことが確認できます。

サーバーサイドから送られてくるステートを確認したい場合

PWA Kit は Isomorphic Javascript でありサーバーサイドで処理された状態をステートとしてクライアント側に HTML を通じて JSON 形式でグローバル変数 __PRELOADED_STATE__ に渡しますが、その内容をフォーマットされた状態で確認したい場合は __pretty_print パラメータをURLに付与することで可能になります。例えばホームページでのステートの確認したい場合は http://localhost:3000/?__pretty_print のような URL になります。

下記がフォーマットされていない状態

フォーマットされている状態

デベロッパーツールのコンソールで確認したい場合

デベロッパーツールのコンソールで確認したい場合は window.__PRELOADED_STATE__ を実行すれば確認することも可能です。

サーバーサイド（Node.js ）のデバッグ

Google Cromeによるデバッグ

ここでは Google Chrome を利用したサーバーサイドのデバッグ方法を紹介します。
まずは、 npm run start:inspect コマンドでローカルでデバッグモードで PWA Kit を実行します。次に chrome://inspect という URL にブラウザでアクセスします。すると「Open dedicated DevTools for Node」というリンクをクリックします。

すると、下記のような画面が表示されて、デバッグを始めることができます。
もし、localhost:9229 が設定に入っていなければ自身で設定してください。 Node.js のデバッグの際に利用されるポートについては「Debugging Guide」をご覧ください。

あとは普通のデバッグと同様にブレークポイントを設定したり変数の中身を確認することができます。見た目はクライアントサイドのデバッグと似ていますが、画面上部の「DevTool - Node.js」と書いてあればサーバサイド側のデバッグであることが確認できます。

VS Code によるデバッグ

ここでは VS Code を利用したサーバサイドのデバッグ方法を紹介します。
まずは Google Chrome でのデバッグと同様に npm run start:inspect コマンドで PWA Kit を起動させます。
そのあと、VS Code 上でコマンドパレットを表示（ Command + Shift + P （Mac の場合）、 Ctrl + Shift + P （Windows の場合））し「Debug: Attach to Node Process」を選択します。

次に一番上の Node.js プロセスを選択するとデバッグが開始されます。

あとは通常のデバッグ時と同様にブレークポイントを設定したり変数の中身を確認することができます。

Google Chrome、 VS Code 共通の確認方法

Google Chrome での開発や VS Code での開発共にデバッガがアタッチされた際は「Debugger attached.」という文字が npm run start:inspect を実行しているターミナルに表示されます。

クライアントサイド（Javascript のデバッグ）

クライアントサイドのデバッグを行う際は、通常の Google Chrome などのブラウザのデバッグで可能です。
Google Chrome の開発者ツールの画面上部にはサーバーサイドの場合「DevTool - Node.js」と表示されているのに対してクライアントサイドの場合は「DevTool - {URL} 」になってると思います。

MRT のリアルタイムログ取得

ここでは PWA Kit を MRT にデプロイした後にアプリケーションログを確認する方法を紹介します。

サンプルコード

今回はサンプルとしてホーム画面表示時に「テストーーーーーーー」とログに表示されるようにコードを修正したものをデプロイしてログを確認してみたいと思います。MRT へのデプロイ方法については「Salesforce B2C Commerce PWA Kit のサンプルを構築してみる」を参照してください。

MRT ログを取得する

ログを取得するためにはコマンドを実行します。その際、環境 ID とプロジェクト ID が必要となりますが、取得方法は「プロジェクト ID の取得」と「環境 ID の取得」を参照してください。

デプロイした PWA Kit のプロジェクト外での取得コマンド

npx @salesforce/pwa-kit-dev tail-logs --environment {環境 ID} --project {プロジェクト ID}

プロジェクト内でのコマンド

npm run tail-logs -- --environment {環境 ID}

実行結果

コマンドを実行した状態でデプロイした環境のホーム画面に遷移するとデプロイした内容が取得できていることが確認できます。

注意点

• ログ取得コマンドのセッション保持時間は 60 分です
• 1 環境につきログ取得に利用できるセッションは 100 セッションまでです
• ログ取得を行うユーザは MRT の開発者または管理者権限が必要です