Visual Studio Code と Microsoft Edge WebView2 (Chromium ベース) を使用して Windows 上の Office アドインをデバッグする

Windows で実行されている Office アドインは、Edge Chromium WebView2 ランタイムに対して Visual Studio Code で直接デバッグできます。

このデバッグ モードは動的であるため、コードの実行中にブレークポイントを設定できます。 デバッガーがアタッチされている間、デバッグ セッションを失うことなく、コードの変更を直ちに確認できます。 コードの変更も保持されるため、コードに対する複数の変更の結果が表示されます。 次の画像は、この拡張機能の動作を示しています。

前提条件

• Visual Studio Code
• Node.js (バージョン 10 以上)
• Windows 10, 11
• 「ブラウザーと Office アドインで使用される Webview コントロール」で説明されているように、Microsoft Edge と WebView2 (Chromium ベース) をサポートするプラットフォームと Office アプリケーションの組み合わせ。Microsoft 365 サブスクリプションの Office のバージョンがバージョン 2101 より前の場合は、WebView2 をインストールする必要があります。 WebView2 をインストールする手順については、「 Microsoft Edge WebView2 / Web コンテンツの埋め込み ...」を参照してください。Microsoft Edge WebView2 を使用します。

Yo Office で作成されたプロジェクトをデバッグする

これらの手順は、コマンド ラインの使用経験があり、基本的な JavaScript を理解し、Office アドイン用の Yeoman ジェネレーターを使用する前に Office アドイン プロジェクトを作成したことを前提としています。これまでにこれを行ったことがない場合は、Excel Office アドイン チュートリアルなどのチュートリアルの 1 つにアクセスすることを検討してください。

1. 最初の手順は、プロジェクトとその作成方法によって異なります。

   • Visual Studio Code でデバッグを試すプロジェクトを作成する場合は、 Office アドイン用の Yeoman ジェネレーターを使用します。 Outlook アドインのクイック スタートなど、Yo Office クイック スタート ガイドのいずれかに従います。
   • Yo Office で作成された既存のプロジェクトをデバッグする場合は、スキップして次の手順に進みます。

2. VS Code を開始し、プロジェクトを開きます。

3. [表示] を選択>Run キーを押すか、Ctrl + Shift + D キーを押してデバッグ ビューに切り替えます。

4. [実行とデバッグ] オプションから、ホスト アプリケーションの Edge Chromium オプション (Outlook デスクトップ (Edge Chromium) など) を選択します。 F5 キーを押すか>メニューの [デバッグの開始] を選択してデバッグを開始します。 この操作により、アドインをホストするローカル サーバーがノード ウィンドウで自動的に起動され、Excel や Word などのホスト アプリケーションが自動的に開きます。 これには数秒かかる場合があります。

   ヒント

   Yo Officeで作成されたプロジェクトを使用していない場合は、レジストリ キーを調整するように求められる場合があります。 プロジェクトのルート フォルダーで、コマンド ラインを使用して以下を実行します。

   npx office-addin-debugging start <your manifest path>
   

   重要

   プロジェクトが以前のバージョンの Yo Office で作成されている場合、デバッグを開始してから約 10 秒から 30 秒後に、次のエラー ダイアログ ボックスが表示される場合があります (その時点で、既にこの手順内の別の手順に進んでいる可能性があります)。また、次の手順で説明するダイアログ ボックスの背後に隠れている可能性があります。

   

   付録のタスクを完了し、この手順を再起動します。

5. ホスト アプリケーションで、アドインを使用する準備ができました。 [作業ウィンドウの表示] を選択するか、その他のアドイン コマンドを実行します。 次のようなテキストを含むダイアログ ボックスが表示されます。

   WebView は読み込み時に停止します。 WebView をデバッグするには、拡張機能 Microsoft Debugger for Edge を使用して VS Code を WebView のインスタンスにアタッチし、[OK] をクリックして続行します。 今後このダイアログが表示されないようにするには、[キャンセル] をクリックします。

   [OK] を選択します。

   注:

   [キャンセル] を選択すると、このアドインのインスタンスの実行中はダイアログが表示されなくなります。 ただし、アドインを再起動すると、ダイアログはもう一度表示されます。

6. これで、プロジェクトのコードにブレークポイントを設定し、デバッグを実行できるようになりました。 Visual Studio Code でブレークポイントを設定するには、コード行の横にマウス ポインターを置き、表示される赤い円を選択します。

   

7. ブレークポイントを使用して行を呼び出すアドインの機能を実行します。 ブレークポイントがヒットし、ローカル変数を検査できます。

   注:

   Office.initialize または Office.onReady の呼び出しのブレークポイントは無視されます。 これらの機能の詳細については、「Office アドインを初期化する」を参照してください。

Yo Office で作成されていないプロジェクトをデバッグする

Yo Office でプロジェクトが作成されていない場合は、Visual Studio Code のデバッグ構成を作成する必要があります。

ファイルpackage.json構成する

1. package.json ファイルがあることを確認します。 package.json ファイルがまだない場合は、プロジェクトのルート フォルダーで npm init を実行し、プロンプトに応答します。

2. npm install office-addin-debugging を実行します。 このパッケージは、デバッグのためにアドインをサイドロードします。

3. package.json ファイルを開きます。 [ scripts ] セクションで、次のスクリプトを追加します。

   "start:desktop": "office-addin-debugging start $MANIFEST_FILE$ desktop",
   "dev-server": "$SERVER_START$"
   

4. $MANIFEST_FILE$をマニフェストの正しいファイル名とフォルダーの場所に置き換えます。

5. $SERVER_START$ を コマンドに置き換えて、Web サーバーを起動します。 これらの手順の後半で、 office-addin-debugging パッケージは、Web サーバーを起動するための dev-server スクリプトを特に探します。

6. package.json ファイルを保存して閉じます。

launch.json ファイルを構成する

1. プロジェクトの \.vscode フォルダーに launch.json という名前のファイルがまだ存在しない場合は作成します。

2. 次の JSON をファイルにコピーします。

   {
     // Other properties may be here.
     "configurations": [
       {
         "name": "$HOST$ Desktop (Edge Chromium)",
         "type": "msedge",
         "request": "attach",
         "useWebView": true,
         "port": 9229,
         "timeout": 600000,
         "webRoot": "${workspaceRoot}",
         "preLaunchTask": "Debug: Excel Desktop"
       }
     ]
     // Other properties may be here.
   }
   

   注:

   launch.json ファイルが既にある場合は、単一の構成を [configurations] セクションに追加するだけです。

3. プレースホルダー $HOST$ を、アドインが実行する Office アプリケーションの名前に置き換えます。 たとえば、Outlook および Word が禁止となります。

4. ファイルを保存して閉じます。

tasks.jsonの構成

1. プロジェクトの \.vscode フォルダーに tasks.json という名前のファイルを作成します。

2. 次の JSON をファイルにコピーします。 これには、アドインのデバッグを開始するタスクが含まれています。

   {
     "version": "2.0.0",
     "tasks": [
       {
         "label": "Debug: $HOST$ Desktop",
         "type": "shell",
         "command": "npm",
         "args": ["run", "start:desktop", "--", "--app", "$HOST$"],
         "presentation": {
           "clear": true,
           "panel": "dedicated"
         },
         "problemMatcher": []
       }
     ]
   }
   

   注:

   tasks.json ファイルが既にある場合は、単一のタスクを [tasks] セクションに追加するだけです。

3. プレースホルダー $HOST$ の両方のインスタンスを、アドインが実行する Office アプリケーションの名前に置き換えます。 たとえば、Outlook および Word が禁止となります。

VS Code デバッガー (F5) を使用してプロジェクトをデバッグできるようになりました。

付録

1. エラー ダイアログ ボックスで、[キャンセル] ボタンを選択 します。
2. デバッグが自動的に停止しない場合は、 Shift + F5 キー を押すか、メニューから [実行>Stop デバッグ ] を選択します。
3. ローカル サーバーが実行されているノード ウィンドウを閉じます (自動的に閉じられない場合)。
4. Office アプリケーションを閉じます (自動的に閉じられない場合)。
5. プロジェクトで \.vscode\launch.json ファイルを開きます。
6. configurations 配列には、いくつかの構成オブジェクトがあります。 名前のパターンが $HOST$ Desktop (Edge Chromium)であるものを見つけます。ここで、$HOST$ はアドインが実行される Office アプリケーションです。たとえば、Outlook Desktop (Edge Chromium) や Word Desktop (Edge Chromium) などです。
7. "type" プロパティの値を "edge" から "pwa-msedge" に変更します。
8. "useWebView" プロパティの値を文字列 "advanced" からブール値 true に変更します (true は引用符で囲まないことに注意してください)。
9. ファイルを保存します。
10. VS Code を閉じます。

関連項目

• Office アドインのテストとデバッグ
• Internet Explorer の開発者ツールを使用してアドインをデバッグする
• Edge レガシー用の開発者ツールを使用してアドインをデバッグする
• Microsoft Edge (Chromium ベース)で開発者ツールを使用してアドインをデバッグする
• 作業ウィンドウからデバッガーをアタッチする
• Office アドインのランタイム