モジュールのプレビューとデバッグ

[アーティクル]
03/08/2023

この記事では、Web ブラウザーでモジュールをプレビューおよびデバッグしてテストする方法について説明します。

モジュールの開発中、ローカル Web ブラウザーでモジュールをプレビューおよびデバッグできます。

モジュールのプレビュー

ローカル Web ブラウザーでモジュールをプレビューするには、以下の手順を実行します。

コマンドプロンプトで、ルート SDK フォルダーに移動し、yarn 開始コマンドを実行します。次に例を示します。
```
c:\repos\Msdyn365.Commerce.Online\yarn start
```
Web ブラウザーで、次の URL を開き、モジュールを表示します: https://localhost:4000/modules?type=product-feature。 type=MODULE_NAME クエリ文字列パラメーターでのモジュール名に注意してください。このパラメータは type=:MODULE_NAME:MOCK_FILE_NAME の省略形で、モジュールの名前に一致する既定のモックファイルが読み込まれます。したがって、上記の URL は https://localhost:4000/modules?type=product-feature:product-feature と同じです。

&debug=true を追加することで、Yarn 出力ウィンドウで詳細デバッグ情報を所得でき、ブラウザーには発生するエラーの詳細が表示されます。

https://localhost:4000/modules?type=product-feature&debug=true

モジュールをデバッグする

クライアントおよびサーバーの両方にデバッグを関連付けることができます。場合によっては、どちらの方法も使用する必要があります。

クライアント (ブラウザー) をデバッグする

ブラウザーを次の 2 つの方法でデバッグできます:

コードに debugger; ステートメントを追加してから、ブラウザーの開発者ツールウィンドウを開きます。 (最新のブラウザーでは、通常、F12 キーを押して開発者ツールを開きます。) ブレークポイントがヒットしてから、Web ブラウザーのデバッグ機能 (たとえば、ウォッチ、ローカル、式評価) を使用できます。
開発者ツールウィンドウを開き、ブレークポイントを設定するファイルを開きます。ブラウザーによっては、Ctrl+P キーボードショートカットを使用してファイルに移動し、ソースマップ全体を表示することができます。目的の行番号でブレークポイントを設定してページを更新した後は、そのブレークポイントで実行が一時停止する必要があります。

サーバー (Node.js) をデバッグする

デバッグツールを開く

Node.js には、実行中のアプリケーションにデバッガーを関連付けするための専用ツールが含まれています。

Google Chrome でデバッグツールを開くには、chrome://inspect に移動します。

開いたビューから、デバッガーが接続する必要がある、実行中の Node.js アプリケーションにデバッガーを関連付けできます。デバッガーを関連付ける間は、このビューを開いておきます。

デバッガーを関連付ける

デバッガーを関連付ける Node.js に通知するには、次のコマンドを使用してアプリケーションを起動します。

yarn start --inspect-brk

ご覧のように、inspect-brk 引数は通常の start コマンドに追加されます。アプリケーションをコンパイルした後、次のメッセージに似たメッセージがコンソールに表示されます: "デバッガーを待機しています..."

前に開いたウィンドウにフォーカスが当たるようになります。アプリケーションは、デバッグウィンドウで再生を選択するまで実際には実行されません。アプリケーションの継続を許可した後、この記事前半のクライアント (ブラウザー) をデバッグするセクションで説明した方法を使用してブレークポイントを設定することができます。

追加参照先

Microsoft Visual Studio Code (VS Code) で Node.js をデバッグするためのドキュメント

トラブルシューティング

デバッガーが設定したブレークポイントで停止しない場合は、通常、サーバーを再起動するのが良い方法です。ホットモジュール交換 (HMR) 機能が常に最高の結果を達成できるとは限らないので、この方法によりクリーンなビルドを保証できます。
場合によっては、トランスパイルされたコード (TypeScript から JavaScript) がデバッグを難しくするため、実行中のコードを理解するため未加工の JavaScript を確認する必要があります。この場合は、JavaScript ソースマップをオフにし、標準の指示に従って JavaScript コードにブレークポイントを追加する必要があります。
ノードをデバッグしている場合は、専用の DevTools for Node.js を使用して、デバッグポートが自動接続用に構成されていることを確認してください。