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

この記事では、現在の IDE の外部でアドインのクライアント側コード (JavaScript または TypeScript) をデバッグする方法について説明します。

Microsoft Edge 開発者ツールを使用して作業ウィンドウ アドインをデバッグする

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

   注:

   Outlook でアドインをサイドロードするには、「 テスト用の Outlook アドインをサイドロードする」を参照してください。

2. 次のいずれかの方法で Microsoft Edge 開発者ツールを実行します。

   • アドインの作業ウィンドウにフォーカスがあることを確認し、Ctrl+Shift+Iキーを押します。
   • 作業ウィンドウを右クリック (または長押し) してコンテキスト メニューを開き、[ 検査] を選択するか、 パーソナリティ メニュー を開 いて [デバッガーのアタッチ] を選択します。 (Outlook ではパーソナリティ メニューはサポートされていません)。

   注:

   新しい Outlook on Windows デスクトップ クライアントでは、Microsoft Edge 開発者ツールにアクセスするためのコンテキスト メニューやキーボード ショートカットはサポートされていません。 代わりに、コマンド プロンプトから olk.exe --devtools を実行する必要があります。 詳細については、「 新しい Outlook on Windows 用 Outlook アドインを開発する」の「アドインをデバッグする」セクションを参照してください。

3. [ ソース ] タブを開きます。

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

   1. ツールの上部のメニュー バーの右端にある [.. .] ボタンを選択し、[ 検索] を選択します。
   2. デバッグするファイルのコード行を検索ボックスに入力します。 これは、他のファイルにはないはずです。
   3. [更新] ボタンを選択します。
   4. 検索結果で行を選択して、検索結果の上のペインでコード ファイルを開きます。

   

5. ブレークポイントを設定するには、コード ファイル内の行番号を選択します。 コード ファイル内の行に赤いドットが表示されます。 右側のデバッガー ウィンドウで、ブレークポイントが [ ブレークポイント ] ドロップダウンに登録されます。

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

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

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

1. アドインを実行します。

2. ダイアログを開き、フォーカスがあることを確認します。

3. 次のいずれかの方法で Microsoft Edge 開発者ツールを開きます。

   • Ctrl+Shift+I または F12 キーを押します。
   • ダイアログを右クリック (または選択して長押し) してコンテキスト メニューを開き、[ 検査] を選択します。

4. 作業ウィンドウのコードと同じツールを使用します。 この記事 の「Microsoft Edge 開発者ツールを使用して作業ウィンドウ アドインをデバッグ する」を参照してください。

初期化をデバッグするために Microsoft Edge 開発者ツールを自動的に開く

アドインの初期化シーケンスをデバッグするには、アドインの起動時に Microsoft WebView2 開発者ツールが自動的に開く環境を構成します。

1. アドインをデバッグする予定の Office アプリケーションを閉じます。
2. --auto-open-devtools-for-tabs値を含むようにWEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS環境変数を設定します。
3. Office アプリケーションを開きます。
4. アドインを実行します。
5. Microsoft Edge 開発者ツールが自動的に開きます。 「Microsoft Edge 開発者ツールを使用して作業ウィンドウ アドインをデバッグする」で指定されているように、作業ウィンドウのデバッグ時と同じツールを使用します。