次の方法で共有

Internet Explorer で開発者ツールを使用してアドインをデバッグする

  • [アーティクル]

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

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

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

ヒント

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

注:

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

F12 ツールを使用して作業ウィンドウ アドインをデバッグする

Windows 10 と 11 には、もともと Internet Explorer で F12 キーを押して起動されたため、"F12" と呼ばれる Web 開発ツールが含まれています。 F12 は、Internet Explorer Webview コントロール Trident で実行されているときにアドインをデバッグするために使用される独立したアプリケーションになりました。 アプリケーションは、以前のバージョンの Windows では使用できません。

注:

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

アドインをデバッグする手順を次に示します。 F12 ツール自体をテストするだけの場合は、「アドインの例」を参照 して F12 ツールをテストします。

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

  2. Office のバージョンに対応する F12 開発ツールを起動します。

    • 32 ビット版の Office の場合は、C:\Windows\System32\F12\IEChooser.exe を使用します
    • 64 ビット版の Office の場合は、C:\Windows\SysWOW64\F12\IEChooser.exe を使用します

    IEChooser が開き、[ デバッグするターゲットの選択] という名前のウィンドウが表示されます。 アドインは、アドインのホーム ページのファイル名で名前が付けられたウィンドウに表示されます。 次のスクリーンショットでは、 Home.html。 Internet Explorer または Trident で実行されているプロセスのみが表示されます。 このツールは、Microsoft Edge を含む他のブラウザーまたは Web ビューで実行されているプロセスにアタッチできません。

    IEChooser 画面。Internet Explorer と Trident の複数のプロセスが一覧表示されています。1 つは Home.html という名前です。

  3. アドインのプロセスを選択します。つまり、ホーム ページのファイル名です。 このアクションにより、F12 ツールがプロセスにアタッチされ、メインの F12 ユーザー インターフェイスが開きます。

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

  5. タブの左上にあるデバッガー ツール リボンのすぐ下に、小さなフォルダー アイコンがあります。 これを選択すると、アドイン内のファイルのドロップダウン リストが開きます。 次に例を示します。

    フォルダー ドロップダウンが開き、ファイルの一覧が表示されたデバッガー タブの左上隅。

  6. デバッグするファイルを選択すると、[デバッガー] タブのスクリプト (左) ペインに開きます。ファイルの名前を変更するトランスパイラー、バンドルャー、または minifier を使用している場合は、元のソース ファイル名ではなく、実際に読み込まれる最終的な名前が付けられます。

  7. ブレークポイントを設定する行までスクロールし、行番号の左側にある余白をクリックします。 行の左側に赤いドットが表示され、右下ペインの [ ブレークポイント ] タブに対応する行が表示されます。 次のスクリーンショットは、その一例を示しています。

    home.js ファイルにブレークポイントがあるデバッガー。

  8. 必要に応じてアドインの関数を実行して、ブレークポイントをトリガーします。 ブレークポイントにヒットすると、ブレークポイントの赤いドットに右向きの矢印が表示されます。 次のスクリーンショットは、その一例を示しています。

    トリガーされたブレークポイントからの結果を含むデバッガー。

ヒント

F12 ツールの使用の詳細については、「デバッガーを使用して 実行中の JavaScript を検査する」を参照してください。

F12 ツールをテストするアドインの例

次の例では、AppSource から Word と無料のアドインを使用します。

  1. Word を起動し、空白の文書を選択します。
  2. [ ホーム>アドイン] を選択し、[ アドインの取得] を選択します。
  3. [ Office アドイン ] ダイアログで、[ ストア ] タブを選択します。
  4. QR4Office アドインを選択します。 作業ウィンドウで開きます。
  5. 前のセクションで説明したように、Office のバージョンに対応する F12 開発ツールを起動します。
  6. F12 ウィンドウで、 Home.htmlを選択します。
  7. [ デバッガー ] タブで、前のセクションで説明したように Home.js ファイルを開きます。
  8. 310 行目と 312 行目にブレークポイントを設定します。
  9. アドインで、[ 挿入 ] ボタンを選択します。 1 つまたは他のブレークポイントにヒットします。

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

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

  1. アドインとツールを実行します。
  2. ダイアログを開き、ツールの [ 更新 ] ボタンを選択します。 ダイアログ プロセスが表示されます。 その名前は、ダイアログで開いているファイルのファイル名です。
  3. F12 ツールを使用した作業ウィンドウ アドインのデバッグに関するセクションの説明に従って、プロセスを選択して開き、デバッグします。

Trident Webview に切り替える

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

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

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

プロジェクトが Node.js ベース (つまり、Visual Studio とインターネット情報サーバー (IIS) で開発されていない) 場合は、通常は最新の Web ビューを使用する Windows と Office のバージョンを組み合わせて使用する場合でも、アドインを実行するために Internet Explorer によって提供される Edge レガシまたは 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>を相対パスに置き換えます。これは、プロジェクトのルートにある場合はマニフェスト ファイル名だけです。 <webview>をieまたはedge-legacyに置き換えます。 オプションの名前は、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

    npx office-addin-dev-settings webview manifest.json edge-legacy

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

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

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

Internet Explorer を使用するバージョンの Office をインストールする

次の手順に従って、Microsoft Edge レガシ Web ビュー (EdgeHTML) を使用してアドインを実行する Office のバージョン (Microsoft 365 サブスクリプションからダウンロード) または Internet Explorer (Trident) を使用するバージョンをインストールします。

  1. 任意の Office アプリケーションで、リボンの [ ファイル ] タブを開き、[ Office アカウント ] または [アカウント] を選択 します。 [About host-name]\(ホスト名について\) ボタン (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 をインストールし、必要に応じて Language ID 値を変更して Office を別の言語でインストールします。

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

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

  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 コマンドを繰り返します。 必要に応じて、自動更新を再度有効にします。

関連項目