Visual Studio Code を使用した Store Commerce 拡張機能のデバッグ

この記事では、Visual Studio Code を使用して Microsoft Dynamics 365 Commerce Store Commerce 拡張機能をデバッグする方法について説明します。

Visual Studio Code を使用して Store Commerce 拡張機能をデバッグするには、以下の手順を実行します。

1. Visual Studio Code をインストールします。

2. Visual Studio Code を開き、Visual Studio Marketplace から VS コードの Microsoft Edge ツール をインストールします。

3. 拡張機能を展開する前に、Store Commerce アプリをインストールします。 インストール プロセス中に、次の例に示すように --enablewebviewdevtools パラメーターを渡すことでデバッグ オプションを有効にします。

   .\StoreCommerce.Installer.exe install --enablewebviewdevtools
   

4. InStore GitHub リポジトリ (repo) から Store Commerce 拡張機能サンプル コードをダウンロードするか、独自の拡張機能コードを使用します。

   メモ

   管理者モードでは Visual Studio Code を実行しないでください。

5. Visual Studio 開発者コマンド プロンプトを開き、コードを入力して Visual Studio Code を開きます。

6. Visual Studio Code で、ファイル > フォルダーを開くを選択してから、拡張機能コード ルート フォルダーを開きます。

7. Visual Studio Code で、ソリューション ディレクトリのルート フォルダーを選択したまま (または右クリック) にして、.vscode という名前の新しいフォルダーを作成します。

8. .vscode フォルダー内で、launch.json という新しいファイルを作成します。

9. launch.commerc ファイルで、次のコンフィギュレーションを追加して Store Commerce 拡張機能を構築およびデバッグします:

   • [Store Commerceのデバッグ ] : このコンフィギュレーションは、Store Commerceアプリケーションを開き、デバッグ用に拡張コードを関連付きます。
   • [Store Commerceの構築とデバッグ ] : このコンフィギュレーションは、拡張機能コードを構築し、拡張機能を配置し、Store Commerceアプリケーションを開き、デバッグ用に拡張機能コードを関連付きます。
   • [Store Commerceにデバッガーを関連付ける : このコンフィギュレーションは、デバッグ用にStore Commerceアプリケーションに拡張機能コードを関連付けるが、Store Commerceアプリケーションを開かない。

10. 次のコンフィギュレーション コードをコピーし、aunch.json ファイルに貼り付けてから、ファイルを保存します。

    {
        "version": "0.2.0",
        "configurations": [
            {
                "type": "pwa-msedge",
                "request": "launch",
                "port": 9222,
                "name": "Debug Store Commerce",
                "useWebView": true,
                "runtimeExecutable": "${env:ProgramFiles}/Microsoft Dynamics 365/10.0/Store Commerce/Microsoft/contentFiles/Microsoft.Dynamics.Commerce.StoreCommerce.exe",
                "userDataDir": "${env:LocalAppData}/Microsoft Dynamics 365/10.0/Data/Store Commerce/Pos",
                "url": "file:///${env:ProgramFiles}/Microsoft Dynamics 365/10.0/Store Commerce/Microsoft/contentFiles/Pos/Pos.html"
            },
            {
                "type": "pwa-msedge",
                "request": "launch",
                "port": 9222,
                "name": "Build and Debug Store Commerce",
                "useWebView": true,
                "runtimeExecutable": "${env:ProgramFiles}/Microsoft Dynamics 365/10.0/Store Commerce/Microsoft/contentFiles/Microsoft.Dynamics.Commerce.StoreCommerce.exe",
                "userDataDir": "${env:LocalAppData}/Microsoft Dynamics 365/10.0/Data/Store Commerce/Pos",
                "url": "file:///${env:ProgramFiles}/Microsoft Dynamics 365/10.0/Store Commerce/Microsoft/contentFiles/Pos/Pos.html",
                "preLaunchTask": "${defaultBuildTask}"
            },
            {
                "name": "Attach debugger to Store Commerce",
                "type": "pwa-msedge",
                "port": 9222,
                "request": "attach",
                "useWebView": true,
                "runtimeExecutable": "${env:ProgramFiles}/Microsoft Dynamics 365/10.0/Store Commerce/Microsoft/contentFiles/Microsoft.Dynamics.Commerce.StoreCommerce.exe"
            }
        ]
    }
    

11. .vscode フォルダー内で、tasks.json という新しいファイルを作成します。 このファイルを使用して、Store Commerceアプリケーションを構築およびインストールするためのコンフィギュレーションを作成します。

12. 次のコンフィギュレーション コードをコピーして、tasks.json ファイルに貼り付けます。

    {
        "version": "2.0.0",
        "tasks": [
            {
                "label": "Build & Install Store Commerce Extension",
                "type": "shell",
                "command": "msbuild",
                "args": [
                    "/p:Configuration=debug",
                    "/p:InstallStoreCommerceExtensionsAfterBuild=true",
                    "/t:build",
                    "/m",
                    "/consoleloggerparameters:NoSummary",
                    "${workspaceFolder}"
                ],
                "group": {
                    "kind": "build",
                    "isDefault": true
                },
            }
        ]
    }
    

13. Visual Studio Code で、デバッグを選択し、シナリオの適切なオプションを選択してから、拡張子コードにブレークポイントを設定してデバッグを開始します。

デバッグ問題のトラブルシューティング

msbuild エラー

"msbuild: 'msbuild' という用語は、"建物の機能、スクリプト ファイル、またはグリンダログ プログラム" という名前として認識されていないというエラー メッセージが表示される場合があります。この場合は "コード" 閉じる Visual Studio します。 次に、Visual Studio 開発者コマンド プロンプトを開き、ソリューション ディレクトリに移動し、コードを入力して Visual Studio Code を再度開き、正しい msbuild バージョンを設定します。

JSON ファイル コメント拡張子

.json ファイル コメントに関連するエラー メッセージが表示された場合は、.json ファイルを閉じてから、再度デバッグ コマンドを実行します。 または、.json ファイルのコメントをすべて削除してください。