次の方法で共有

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

  • [アーティクル]

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

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

ヒント

Visual Studio Code 内の Edge WebView2 (Chromium ベース) でのデバッグの詳細については、「Visual Studio Code と Microsoft Edge WebView2 (Chromium ベース) を使用した Windows でのアドインのデバッグ」を参照してください。

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

ヒント

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

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

注:

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

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

    注:

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

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

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

    注:

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

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

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

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

    Edge Chromium 開発者ツールの [ソース] タブには、A から D のラベルが付いた 4 つのパーツがあります。

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

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

ヒント

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

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

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

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

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

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

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

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