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

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

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

コンピューターで使用されているブラウザーを確認するには、「アドインで使用Officeブラウザー」を参照してください

ヒント

Office の最近のバージョンでは、Office が使用している Webview コントロールを特定する方法の 1 つは、使用可能なアドインのパーソナリティ メニューを使用します。 (この機能では、パーソナリティ メニュー Outlook)。メニューを開き、[セキュリティ情報 ] を選択します。 [セキュリティ 情報] ダイアログ ボックスWindowsランタイム は、Microsoft Edge**、Microsoft Edge 従来版****、または****Internet Explorer。** ランタイムは、以前のバージョンのバージョンのダイアログ に含Office。

注意

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

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

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

注意

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

次の手順は、アドインをデバッグするための手順です。 F12 ツール自体をテストする場合は、「F12 ツールをテストするアドインの例 」を参照してください

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

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

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

    IEChooser が開き、[デバッグするターゲットの選択 ] という名前のウィンドウが開きます。 アドインは、アドインのホーム ページのファイル名で指定されたウィンドウに表示されます。 次のスクリーンショットでは、 です Home.html。 ユーザーまたは Trident で実行Internet Explorerプロセスだけが表示されます。 このツールは、他のブラウザーや Web ビューで実行されているプロセス (ブラウザーや web ビューなど) に接続Microsoft Edge。

    IEChooser 画面で、複数のInternet Explorerトライデント プロセスが一覧表示されます。1 つは名前が Home.html。

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

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

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

    フォルダー ドロップダウンが開いているデバッガー タブの左上隅とファイルの一覧のスクリーンショット。

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

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

    ファイル内のブレークポイントを持つデバッガーhome.jsします。

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

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

ヒント

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

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

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

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

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

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

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

11 webview Internet Explorerに切り替える

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

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

コマンド ライン経由で切り替える

プロジェクトが node.js ベース (つまり、Visual Studio およびインターネット インフォメーション サーバー (IIS Office) で開発されていない) 場合は、Windows バージョンと Office バージョンを組み合わせて使用している場合でも、Windows でエッジ レガシまたは Internet Explorer を使用してアドインを実行できます。 Windows バージョンと Office バージョンのさまざまな組み合わせで使用されるブラウザーの詳細については、「Office アドインで使用されるブラウザー」を参照してください

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

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

    重要

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

  2. プロジェクトのルートにあるコマンド プロンプトOfficeコマンドで使用するブラウザーを指定します。 プロジェクト <path-to-manifest> のルートにある場合は、マニフェストファイル名の相対パスに置き換える。 どちらかまたは <webview> で置き換 ie える edge-legacy

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

    次に例を示します。

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

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

  3. 完了したら、Office Windows と Office バージョンの組み合わせに既定のブラウザーを使用して次のコマンドを使用して再開Officeを設定します。

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

アプリケーションを使用するバージョンOfficeインストールInternet Explorer

次の手順に従って、Microsoft Edge 従来版 Webview (EdgeHTML) を使用してアドインを実行するサブスクリプション Officeのバージョンまたは Internet Explorer (Trident) を使用するバージョンをインストールします。

  1. 任意のOfficeアプリケーションで、リボンの [ファイル] タブを開き、アカウントまたはアカウントOffice 選択します。 [ホスト名 の概要] ボタン ([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

    • Edge Legacy を使用するバージョンをインストールするには、次のように 16.0.11929.20946変更します。
    • Internet Explorer を使用するバージョンをインストールするには、次のように変更します 16.0.10730.20348
  7. 必要に応じて、32 ビット Officeをインストールするように"32"OfficeClientEditionを変更し、必要に応じて値をLanguage ID変更して、別の言語でOfficeをインストールします。

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

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

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

    setup.exe /configure config.xml
    

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

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

重要

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

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

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

関連項目