Microsoft Edge 従来版の開発者ツールを使用してアドインをデバッグする

この記事では、次の条件が満たされたときにアドインのクライアント側コード (JavaScript または TypeScript) をデバッグする方法について説明します。

• IDE に組み込まれているツールを使用してデバッグすることはできません。または、アドインが IDE の外部で実行されている場合にのみ発生する問題が発生しています。
• お使いのコンピューターでは、元の Edge Webview コントロールである EdgeHTML を使用する Windows と Office のバージョンの組み合わせを使用しています。

ヒント

Visual Studio Code 内の Edge レガシを使用したデバッグの詳細については、「 Microsoft Office アドイン デバッガー拡張機能 for Visual Studio Code」を参照してください。

使用しているブラウザーまたは Web ビューを特定するには、「 Office アドインで使用されるブラウザーと Webview コントロール」を参照してください。

ヒント

最近のバージョンの Office では、Office が使用している Webview コントロールを識別する 1 つの方法は、使用可能なアドインの パーソナリティ メニュー を使用することです。 (Outlook ではパーソナリティ メニューはサポートされていません)。メニューを開き、[ セキュリティ情報] を選択します。 Windows の [セキュリティ情報] ダイアログで、ランタイムは Microsoft Edge、Microsoft Edge 従来版、またはインターネット エクスプローラーを報告します。 古いバージョンの Office では、ランタイムはダイアログに含まれていません。

注:

Edge レガシ Web ビューを使用するバージョンの Office をインストールする場合、または現在のバージョンの Office で Edge レガシを強制的に使用するには、「 Edge レガシ Web ビューに切り替える」を参照してください。

Microsoft Edge DevTools プレビューを使用して作業ウィンドウ アドインをデバッグする

1. Microsoft Edge DevTools プレビューをインストールします。 ("Preview" という単語は、履歴上の理由から名前に含まれています。より新しいバージョンはありません)。

   注:

   アドインに関数を実行する アドイン コマンド がある場合、関数は、Microsoft Edge DevTools が検出またはアタッチできない非表示のブラウザー ランタイム プロセスで実行されるため、この記事で説明する手法を使用して関数内のコードをデバッグすることはできません。

2. アドインをサイドロードして実行します。

3. Microsoft Edge DevTools を実行します。

4. ツールで、[ローカル] タブを開きます。アドインの名前が一覧表示されます。 (EdgeHTML で実行されているプロセスのみがタブに表示されます。このツールは、Microsoft Edge (WebView2) やインターネット エクスプローラー (Trident) など、他のブラウザーまたは Web ビューで実行されているプロセスにアタッチできません。

   

5. アドイン名を選択して、ツールで開きます。

6. [デバッガー] タブを開きます。

7. 次の手順で、デバッグするファイルを開きます。

   1. デバッガー タスク バー で、[ファイル内の検索を表示] を選択します。 検索ウィンドウが開きます。
   2. デバッグするファイルのコード行を検索ボックスに入力します。 これは、他のファイルにはないはずです。
   3. [更新] ボタンを選択します。
   4. 検索結果で行を選択して、検索結果の上のペインでコード ファイルを開きます。

   

8. ブレークポイントを設定するには、コード ファイル内の行を選択します。 ブレークポイントは、 呼び出し履歴 (右下) ウィンドウに登録されます。 コード ファイル内の行ごとに赤いドットが表示される場合もありますが、これは確実に表示されません。

9. 必要に応じてアドインの関数を実行して、ブレークポイントをトリガーします。

ヒント

ツールの使用方法の詳細については、「 Microsoft Edge (EdgeHTML) 開発者ツール」を参照してください。

アドインでダイアログをデバッグする

アドインが Office Dialog API を使用している場合、ダイアログは作業ウィンドウとは別のプロセスで実行され (存在する場合)、ツールはそのプロセスにアタッチする必要があります。 次の手順に従ってください。

1. アドインとツールを実行します。

2. ダイアログを開き、ツールの [ 更新 ] ボタンを選択します。 ダイアログ プロセスが表示されます。 その名前は、 <title> ダイアログで開いている HTML ファイル内の要素から取得されます。

3. 「 Microsoft Edge DevTools Preview を使用して作業ウィンドウ アドインをデバッグする」セクションの説明に従って、プロセスを選択して開き、デバッグします。

   

Edge レガシ Web ビューに切り替える

Edge レガシ Web ビューを切り替えるには、2 つの方法があります。 コマンド プロンプトで簡単なコマンドを実行することも、既定で Edge レガシを使用するバージョンの Office をインストールすることもできます。 最初の方法をお勧めします。 ただし、次のシナリオでは 2 つ目を使用する必要があります。

• プロジェクトは Visual Studio と IIS で開発されました。 Node.js ベースではありません。
• テストで絶対に堅牢である必要があります。
• 何らかの理由でコマンド ライン ツールが機能しない場合。

コマンド ラインを使用して切り替える

プロジェクトが Node.js ベース (つまり、Visual Studio とインターネット情報サーバー (IIS) で開発されていない) 場合は、通常より最近の Web ビューを使用する Windows と Office のバージョンを組み合わせて使用する場合でも、Edge レガシによって提供される EdgeHTML Webview コントロールまたはインターネット エクスプローラーによって提供される Trident Webview コントロールのいずれかを使用するように Windows 上の Office に強制できます。 Windows と Office のバージョンのさまざまな組み合わせで使用されるブラウザーと Web ビューの詳細については、「 Office アドインで使用されるブラウザーと Webview コントロール」を参照してください。

注:

Webview の変更を強制するために使用されるツールは、Microsoft 365 のベータ サブスクリプション チャネルでのみサポートされます。 Microsoft 365 Insider プログラムに参加し、[ベータ チャネル] オプションを選択して Office Beta ビルドにアクセスします。 「 Office について: 使用している Office のバージョン」も参照してください。

厳密には、ベータ チャネルが webview 必要なのは、このツールの切り替えです ( 手順 2 を参照)。 このツールには、この要件を持たない他のスイッチがあります。

1. プロジェクトが Office アドイン用 Yeoman ジェネレーターを使用して作成されていない場合は、office-addin-dev-settings ツールをインストールする必要があります。 コマンド プロンプトで次のコマンドを実行します。

   npm install office-addin-dev-settings --save-dev
   

   重要

   Office-addin-dev-settings ツールは Mac ではサポートされていません。

2. プロジェクトのルートにあるコマンド プロンプトで、Office で次のコマンドで使用する Web ビューを指定します。 を相対パスに置き換えます <path-to-manifest> 。これは、プロジェクトのルートにある場合はマニフェスト ファイル名だけです。 を または edge-legacyにie置き換えます<webview>。 オプションの名前は、Web ビューが作成されたブラウザーの名前に注意してください。 オプションは ie "Trident" を意味し、オプションは edge-legacy "EdgeHTML" を意味します。

   npx office-addin-dev-settings webview <path-to-manifest> <webview>
   

   次に例を示します。

   npx office-addin-dev-settings webview manifest.xml ie
   

   コマンド ラインに、Webview の種類が IE (または Edge レガシ) に設定されていることを示すメッセージが表示されます。

3. 完了したら、次のコマンドを使用して、Windows と Office のバージョンの組み合わせの既定の Web ビューを使用して再開するように Office を設定します。

   npx office-addin-dev-settings webview <path-to-manifest> default
   

Edge レガシを使用するバージョンの Office をインストールする

Microsoft Edge 従来版 Webview (EdgeHTML) を使用してアドインを実行する Office のバージョン (Microsoft 365 サブスクリプションからダウンロード) またはインターネット エクスプローラー (Trident) を使用するバージョンをインストールするには、次の手順に従います。

1. 任意の Office アプリケーションで、リボンの [ ファイル ] タブを開き、[ Office アカウント ] または [アカウント] を選択 します。 [About host-name]\(ホスト名について\) ボタン ([About Word] など) を選択します。

2. 開いたダイアログで、xx.x.xxxxx.xxxxx の完全なビルド番号を見つけて、そのコピーをどこかに作成します。

3. Office 展開ツールをダウンロードします。

4. ダウンロードしたファイルを実行して、ツールを抽出します。 ツールをインストールする場所を選択するように求められます。

5. ツールをインストールしたフォルダー (ファイルがある場所 setup.exe ) で、名前 config.xml を持つテキスト ファイルを作成し、次の内容を追加します。

   <Configuration>
     <Add OfficeClientEdition="64" Channel="SemiAnnual" Version="16.0.xxxxx.xxxxx">
       <Product ID="O365ProPlusRetail">
         <Language ID="en-us" />
       </Product>
     </Add>
   </Configuration>
   

6. 値を変更します Version 。

   • EdgeHTML を使用するバージョンをインストールするには、 に変更します 16.0.11929.20946。
   • Trident を使用するバージョンをインストールするには、 に変更します 16.0.10730.20348。

7. 必要に応じて、 の OfficeClientEdition 値を に "32" 変更して 32 ビット Office をインストールし、Office を Language ID 別の言語でインストールするために必要に応じて値を変更します。

8. 管理者としてコマンド プロンプトを開きます。

9. ファイルと config.xml ファイルを含むフォルダーにsetup.exe移動します。

10. 次のコマンドを実行します。

    setup.exe /configure config.xml
    

    このコマンドは Office をインストールします。 このプロセスには数分かかる場合があります。

11. Office キャッシュをクリアします。

重要

インストール後は、Office の自動更新をオフにして、使用を完了する前に使用する Webview を使用しないバージョンに Office が更新されないようにしてください。 これは、インストールから数分以内に発生する可能性があります。 次の手順に従ってください。

1. Office アプリケーションを起動し、新しいドキュメントを開きます。
2. リボンの [ ファイル ] タブを開き、[ Office アカウント ] または [アカウント] を選択 します。
3. [製品情報] 列で、[更新オプション] を選択し、[更新を無効にする] を選択します。 このオプションを使用できない場合、Office は自動的に更新されないように既に構成されています。

古いバージョンの Office の使用が完了したら、ファイルを編集 config.xml し、 を以前にコピーしたビルド番号に変更 Version して、新しいバージョンを再インストールします。 次に、管理者コマンド setup.exe /configure config.xml プロンプトでコマンドを繰り返します。 必要に応じて、自動更新を再度有効にします。