Teams アプリをデバッグする

[アーティクル]
03/13/2024

Microsoft Teams Toolkit は、Microsoft Teams アプリをデバッグしてプレビューするのに役立ちます。デバッグとは、問題やバグを確認、検出、修正して、プログラムが Teams で正常に実行されることを確認するプロセスです。

Visual Studio Code 用の Teams アプリをデバッグする

Microsoft Visual Studio Code の Teams Toolkit では、デバッグプロセスが自動化されます。エラーを検出して修正したり、Teams アプリをプレビューしたりできます。デバッグ設定をカスタマイズして、タブまたはボットを作成することもできます。

デバッグプロセス中:

Teams Toolkit では、アプリサービスが自動的に開始され、デバッガーが起動され、Teams アプリがアップロードされます。
Teams Toolkit は、デバッグバックグラウンドプロセス中に前提条件を確認します。
Teams アプリは、デバッグ後に Teams Web クライアントでローカルでプレビューできます。
また、ボットエンドポイント、開発証明書、またはデバッグ部分コンポーネントを使用して構成済みアプリを読み込むデバッグ設定をカスタマイズすることもできます。
Visual Studio Code では、タブ、ボット、メッセージ拡張機能、および Azure Functions をデバッグできます。

Teams Toolkit の主なデバッグ機能

Teams Toolkit では、次のデバッグ機能がサポートされています:

デバッグの開始
マルチターゲットデバッグ
ブレークポイントの切り替え
ホットリロード
デバッグの停止
Teams アプリテストツール

Teams Toolkit では、デバッグプロセス中にバックグラウンド機能が実行されます。これには、デバッグに必要な前提条件の検証が含まれます。確認プロセスの進行状況は、Teams Toolkit の出力チャネルで確認できます。セットアッププロセスでは、Teams アプリを登録して構成できます。

デバッグの開始

F5 キーを 1 回の操作として押すと、デバッグを開始できます。 Teams Toolkit は、前提条件のチェックを開始し、アプリ、Teams アプリMicrosoft Entra登録し、ボットを登録し、サービスを開始し、ブラウザーを起動します。

マルチターゲットデバッグ

Teams Toolkit では、マルチターゲットデバッグ機能を利用して、タブ、ボット、メッセージ拡張機能、および Azure Functions を同時にデバッグします。

ブレークポイントの切り替え

タブ、ボット、メッセージ拡張機能、および Azure Functions のソースコードのブレークポイントを切り替えることができます。ブレークポイントは、Web ブラウザーで Teams アプリを操作するときに実行されます。次の図は、トグルブレークポイントを示しています。

ホットリロード

Teams アプリをデバッグするときに、タブ、ボット、メッセージ拡張機能、Azure Functionsのソースコードを同時に更新して保存できます。アプリが再読み込みされ、デバッガーがプログラミング言語に再アタッチされます。

デバッグの停止

ローカルデバッグを完了したら、フローティングデバッグツールバーから Stop (Shift + F5) または [Alt] Disconnect (Shift + F5) を選択して、すべてのデバッグセッションを停止し、タスクを終了できます。次の図は、デバッグの停止アクションを示しています。

デバッグの停止オプションを示すスクリーンショット。

Teams アプリテストツール

Teams アプリテストツールを使用すると、ボットベースのアプリのデバッグが簡単になります。ボットとチャットし、Teams に表示されるメッセージとアダプティブカードを確認できます。テストツールを使用するために、Microsoft 365 開発者アカウント、トンネリング、または Teams アプリとボットの登録は必要ありません。詳細については、「 Teams アプリテストツール」を参照してください。

デバッグの準備

次の手順は、デバッグの準備に役立ちます。

Microsoft 365 に既にサインアップしている場合は、Microsoft 365 にサインインします。詳細については、「 Microsoft 365 開発者プログラム」を参照してください。

ブレークポイントの切り替え

タブ、ボット、メッセージ拡張機能、Azure Functionsのソースコードでブレークポイントを切り替えることができることを確認します。詳細については、「ブレークポイントの切り替え」を参照してください。

デバッグ設定をカスタマイズする

Teams Toolkit を使用すると、デバッグ設定をカスタマイズしてタブまたはボットを作成できます。カスタマイズ可能なオプションの完全な一覧の詳細については、デバッグ設定に関するドキュメントを参照してください。

既存のボットアプリのデバッグ設定をカスタマイズすることもできます。

デバッグに既存のボットを使用する方法について説明します

Teams Toolkit では、既定でアクションを使用して、ボットを使用してプロジェクト用のMicrosoft Entra アプリがbotAadApp/create作成されます。

既存のボットを使用するには、独自の値でと SECRET_BOT_PASSWORD をenv/.env.local設定BOT_IDできます。

次のコードスニペットの例を使用して、デバッグ用に既存のボットを設定します。

# env/.env.local

# Built-in environment variables
TEAMSFX_ENV=local

# Generated during provision, you can also add your own variables.
BOT_ID={YOUR_OWN_BOT_ID}
...

SECRET_BOT_PASSWORD={YOUR_OWN_BOT_PASSWORD}
...

シナリオのカスタマイズ

使用できるデバッグシナリオの一覧を次に示します。

前提条件のチェックをスキップする

で.vscode/tasks.json"prerequisites""Validate prerequisites">"args">、スキップする前提条件チェックを更新します。

スキップの前提条件チェックを示すスクリーンショット。

開発証明書を使用する

でteamsapp.local.yml、アクションからdevTool/install削除devCertします (または、が含まれている場合はアクション全体devTool/installをdevCert削除します)。

でteamsapp.local.yml、証明書ファイルのfile/createOrUpdateEnvironmentFileパスと"SSL_KEY_FILE"キーファイルパスを設定"SSL_CRT_FILE"し、実際に実行します。

# teamsapp.local.yml
...
  # Remove devCert or this whole action
  - uses: devTool/install
    with:
      # devCert:
  ...
  - uses: file/createOrUpdateEnvironmentFile
    with:
      target: ./.localSettings
      envs:
        ...
        # set your own cert values
        SSL_CRT_FILE: ...
        SSL_KEY_FILE: ...
...

npm install コマンドをカスタマイズする

でteamsapp.local.yml、アクションのcli/runNpmCommand編集argsを行います。

# teamsapp.local.yml
...
  - uses: cli/runNpmCommand
    with:
      # edit the npm command args
      args: install --no-audit
...

ポートの変更

Bot
1. プロジェクト全体を"3978"検索し、と index.jsでtasks.json外観を探します。
2. ポートに置き換えます。
Tab
1. プロジェクト全体を"53000"検索し、と tasks.jsonでteamsapp.local.yml外観を探します。
2. ポートに置き換えます。

独自のアプリパッケージを使用する

Teams Toolkit では、既定でアプリパッケージを管理するための一連の teamsApp アクションが作成されます。では、独自の teamsapp.local.yml アプリパッケージを使用するようにそれらを更新できます。

# teamsapp.local.yml
...
  - uses: teamsApp/create # Creates a Teams app
    ...
  - uses: teamsApp/validateManifest # Validate using manifest schema
    ...
  - uses: teamsApp/zipAppPackage # Build Teams app package with latest env value
    ...
  - uses: teamsApp/validateAppPackage # Validate app package using validation rules
    ...
  - uses: teamsApp/update # Apply the app manifest (previously called Teams app manifest) to an existing Teams app in Teams Developer Portal.
    ...
...

独自のトンネルを使用する

で .vscode/tasks.json"Start Teams App Locally"を更新 "Start Local tunnel"できます。

独自のトンネルを使用するタスクを示すスクリーンショット。

# env/.env.local

# Built-in environment variables
TEAMSFX_ENV=local
...
BOT_DOMAIN={YOUR_OWN_TUNNEL_DOMAIN}
BOT_ENDPOINT={YOUR_OWN_TUNNEL_URL}
...

# env/.env.local

# Built-in environment variables
TEAMSFX_ENV=local
...
BOT_DOMAIN={YOUR_OWN_TUNNEL_DOMAIN}
BOT_ENDPOINT={YOUR_OWN_TUNNEL_URL}
...

環境変数を追加する

タブ、ボット、メッセージ拡張機能、および Azure Functions の .localConfigs ファイルに環境変数を追加できます。 Teams Toolkit は、ローカルデバッグ中にサービスを開始するために追加した環境変数を読み込みます。

注:

環境変数ではホットリロードがサポートされていないため、新しい環境変数を追加した後で新しいローカルデバッグを開始してください。

部分コンポーネントをデバッグする

Teams Toolkit は、Visual Studio Code マルチターゲットデバッグを利用して、タブ、ボット、メッセージ拡張機能、および Azure Functions を同時にデバッグします。部分コンポーネントをデバッグするには、.vscode/launch.json と .vscode/tasks.json を更新できます。タブとAzure Functions プロジェクトを含むボットでのみタブをデバッグする場合は、次の手順を使用します。

のデバッグ複合からと "Attach to Backend" を.vscode/launch.json更新"Attach to Bot"します。

{
    "name": "Debug in Teams (Edge)",
     "configurations": [
        "Attach to Frontend (Edge)",
        // "Attach to Bot",
        // "Attach to Backend"
        ],
        "preLaunchTask": "Start Teams App Locally",
        "presentation": {
            "group": "all",
            "order": 1
        },
        "stopAll": true

}

.vscode/tasks.json の [すべて開始] タスクからと "Start Bot" を更新"Start Backend"します。

{

    "label": "Start application",
    "dependsOn": [
        "Start Frontend",
          // "Start Backend",
          // "Start Bot"

      ]

}

アプリをローカルでデバッグする

Teams アプリをデバッグする

Visual Studio Code 用の Teams アプリをデバッグする

Teams Toolkit の主なデバッグ機能

デバッグの開始

マルチターゲットデバッグ

ブレークポイントの切り替え

ホットリロード

デバッグの停止

Teams アプリテストツール

デバッグの準備

ブレークポイントの切り替え

デバッグ設定をカスタマイズする

シナリオのカスタマイズ

Next

関連項目

フィードバック

その他のリソース

Teams アプリをデバッグする

Visual Studio Code 用の Teams アプリをデバッグする

Teams Toolkit の主なデバッグ機能

デバッグの開始

マルチターゲット デバッグ

ブレークポイントの切り替え

ホット リロード

デバッグの停止

Teams アプリ テスト ツール

デバッグの準備

Microsoft 365 にサインインする

ブレークポイントの切り替え

デバッグ設定をカスタマイズする

シナリオのカスタマイズ

Next

関連項目

フィードバック

その他のリソース

マルチターゲットデバッグ

ホットリロード

Teams アプリテストツール