イベントベースまたはスパムレポートの Outlook アドインをデバッグする

[アーティクル]
12/19/2024

この記事では、アドインでイベントベースのアクティブ化または統合スパムレポートを実装するときに、コードでブレークポイントを有効にして設定するための主要なデバッグステージについて説明します。先に進む前に、開発エラーを解決する方法の追加の手順については、トラブルシューティングガイドを確認することをお勧めします。

デバッグを開始するには、該当するクライアントのタブを選択します。

任意のブラウザーの開発者ツールを使用して、Outlook on the webでイベントベースのアドインをデバッグします。詳細については、「Office on the web でアドインをデバッグする」を参照してください。

新しい Outlook on Windows デスクトップクライアント (プレビュー) でアドインをデバッグするには、次のコマンドを実行して Microsoft Edge DevTools を開く必要があります。

olk.exe --devtools

詳細については、「新しい Outlook on Windows 用 Outlook アドインを開発する」の「アドインをデバッグする」セクションを参照してください。

Office アドイン用 Yeoman ジェネレーターを使用してアドインプロジェクトを作成した場合 (たとえば、イベントベースのアクティブ化のチュートリアルを完了するなど)、この記事全体を通じて[Yeoman ジェネレーターで作成] オプションに従います。それ以外の場合は、 その他 の手順に従います。

デバッグ用にアドインをマークし、デバッガーポートを設定する

マニフェストからアドインの ID を取得します。
- アドインのみのマニフェスト: ルート <OfficeApp> 要素の <Id> 要素の子の値を使用します。
- Microsoft 365 の統合マニフェスト: ルート匿名 { ... } オブジェクトの "id" プロパティの値を使用します。
レジストリで、デバッグ用にアドインをマークします。
- Yeoman ジェネレーターを使用して作成: コマンドラインウィンドウで、アドインフォルダーのルートに移動し、次のコマンドを実行します。
```
npm start
```
  このコマンドは、コードをビルドしてローカルサーバーを起動するだけでなく、このアドインの HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\WEF\Developer\[Add-in ID]\UseDirectDebugger レジストリ DWORD 値のデータを 1に設定します。 [Add-in ID] は、マニフェストからのアドインの ID です。
- その他: HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\WEF\Developer\[Add-in ID]\UseDirectDebugger レジストリ DWORD 値で、 [Add-in ID] はマニフェストからのアドインの ID で、そのデータを 1 に設定します。
  注:
  
  HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\WEF\の下にDeveloper キー (フォルダー) がまだ存在しない場合は、次の手順を実行して作成します。
  1. WEF キー (フォルダー) を右クリック (または長押し) し、[新規>Key] を選択します。
  2. 新しいキーに Developer という名前を付けます。
レジストリキー HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Wef\Developer\[Add-in ID]で、 [Add-in ID] がマニフェストからのアドインの ID である場合は、次の構成で新しい DWORD 値を作成します。
- 値名: DebuggerPort
- 値データ (16 進数): 00002407
これにより、デバッガーポートが 9223に設定されます。
Outlook を起動するか、既に開いている場合は再起動します。
OnNewMessageComposeイベントを開始するための新しいメッセージの作成やスパムメッセージの報告など、開発対象のイベントを開始するアクションを実行します。 [デバッグイベントベースのハンドラー] ダイアログが表示されます。ダイアログをまだ操作 しないでください 。

デバッガーを構成してアタッチする

アドインは、Microsoft Edge Inspect ツールまたは Visual Studio Code を使用してデバッグできます。

Microsoft Edge を使用したデバッグ

Microsoft Edge を開き、[ edge://inspect/#devices] に移動します。
[ リモートターゲット ] セクションで、マニフェストの ID を使用してアドインを探します。次に、[ 検査] を選択します。

[DevTools] ウィンドウが表示されます。

注:

アドインが [リモートターゲット ] セクションに表示されるまでに時間がかかる場合があります。アドインが表示されるようにページを更新する必要がある場合があります。
[ソース] タブで、[file://>Users/[User]/AppData/Microsoft/Office/16.0/Wef/{[Outlook プロファイル GUID]}/[Outlook メールアカウントエンコード]/Javascript/[アドイン ID]_[アドインバージョン]_[ロケール]>bundle.jsに移動します。

ヒント

bundle.js ファイルパスで使用される Outlook プロファイル GUID またはメールアカウントエンコードを決定する直接の方法はありません。複数のアドインを同時にデバッグする場合、DevTools ウィンドウからアドインの bundle.js ファイルにアクセスする最も簡単な方法は、ファイルパスでアドインの ID を見つけることです。
bundle.js ファイルで、デバッガーを停止する場所にブレークポイントを配置します。
デバッガーを実行します。

Visual Studio Code を使用したデバッグ

Visual Studio Code でアドインをデバッグするには、少なくともバージョン 1.56.1 がインストールされている必要があります。

デバッガーを構成する

Visual Studio Code でデバッガーを構成します。アドインプロジェクトに該当する手順に従います。

Yeoman ジェネレーターを使用して作成

コマンドラインで、次のコマンドを実行して、Visual Studio Code でアドインプロジェクトを開きます。
```
code .
```
Visual Studio Code で 、./.vscode/launch.json ファイルを 開き、構成の一覧に次の抜粋を追加します。変更内容を保存します。
```
{
  "name": "Direct Debugging",
  "type": "node",
  "request": "attach",
  "port": 9223,
  "timeout": 600000,
  "trace": true
}
```

その他

デバッグという名前の新しいフォルダーを作成します (デスクトップフォルダー内など)。
Visual Studio Code を開きます。
[ファイル] に移動し>[フォルダーを開く] に移動し、先ほど作成したフォルダーに移動し、[フォルダーの選択] を選択します。
アクティビティバーで、 実行とデバッグ (Ctrl + Shift + D) を選択します。
[ launch.json ファイルの作成 ] リンクを選択します。
[ 環境の選択 ] ドロップダウンで、[ Edge: 起動 ] を選択して、launch.json ファイルを作成します。

構成の一覧に次の抜粋を追加します。変更内容を保存します。

{
  "name": "Direct Debugging",
  "type": "node",
  "request": "attach",
  "port": 9223,
  "timeout": 600000,
  "trace": true
}

デバッガーをアタッチする

アドイン のbundle.js ファイルには、アドインの JavaScript コードが含まれています。これは、従来の Outlook on Windows を開いたときに作成されます。 Outlook が起動すると、インストールされている各アドインの bundle.js ファイルがコンピューターの Wef フォルダーにキャッシュされます。

アドインのbundle.jsファイルを見つけるには、エクスプローラー内の次のフォルダーに移動します。 []で囲まれたテキストは、該当する Outlook とアドインの情報を表します。
```
%LOCALAPPDATA%\Microsoft\Office\16.0\Wef\{[Outlook profile GUID]}\[Outlook mail account encoding]\Javascript\[Add-in ID]_[Add-in Version]_[locale]
```
ヒント
- bundle.js ファイルパスで使用される Outlook プロファイル GUID とメールアカウントエンコードを決定する直接の方法はありません。アドインの bundle.js ファイルを見つけるための最も効果的な方法は、アドインの ID を含む Javascript フォルダーが見つかるまで、各フォルダーを手動で検査することです。
- bundle.js ファイルが Wef フォルダーに表示されない場合、アドインがインストールまたはサイドロードされている場合は、Outlook を再起動します。または、Outlook からアドインを削除してから、もう一度サイドロードします。
Visual Studio Code で bundle.js を開きます。
デバッガーを停止 する場所bundle.js にブレークポイントを配置します。
[ デバッグ ] ドロップダウンで、[ 直接デバッグ] を選択し、[ デバッグの開始 ] アイコンを選択します。

デバッガーを実行する

デバッガーがアタッチされていることを確認したら、Outlook に戻ります。 [ イベントベースのハンドラーのデバッグ ] ダイアログで、[ OK] を選択します 。

ブレークポイントにヒットして、イベントベースのアクティブ化またはスパム報告コードをデバッグできるようになりました。

デバッガーを停止する

現在の Outlook on Windows セッションの残りの部分のデバッグを停止するには、[ イベントベースのハンドラーのデバッグ ] ダイアログで [キャンセル] を選択 します。デバッグを再度有効にするには、Outlook を再起動します。

[イベントベースのハンドラーのデバッグ] ダイアログがポップアップ表示されないようにし、後続の Outlook セッションのデバッグを停止するには、関連付けられているレジストリキーを削除するか、HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Wef\Developer\[Add-in ID]\UseDirectDebuggerするか、その値を 0 に設定します。

ローカルサーバーを停止する

ローカル Web サーバーを停止してアドインをアンインストールする場合は、該当する手順に従います。

サーバーを停止するには、次のコマンドを実行します。 npm startを使用した場合は、次のコマンドもアドインをアンインストールする必要があります。
```
npm stop
```
アドインを手動でサイドロードした場合は、「サイドロードされたアドインを削除する」を参照してください。

Outlook on Mac で実行されるイベントベースのアドインでは、ブラウザーランタイムが使用されます。このため、Safari Web Inspector を使用してアドインをデバッグできます。

Outlook で Safari Web インスペクターを使用するには、「Mac 上の Safari Web インスペクターを使用したデバッグ」の手順に従います。
Outlook を開き、アドインをサイドロードします。
アドインが処理するイベントを開始するアクションを実行します。たとえば、 OnNewMessageCompose イベントを開始する新しいメッセージを作成します。これにより、空の開発者ウィンドウが開きます。ウィンドウのタイトルバーにアドインの名前が表示されます。
開発者ウィンドウ内の任意の場所を右クリック (または選択して長押し) し、[ 要素の検査] を選択します。これによりインスペクターが開き、ブレークポイントを設定してアドインをデバッグできます。

次の方法で共有