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

[アーティクル]
09/01/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 ジェネレーターで作成] オプションに従います。それ以外の場合は、 その他 の手順に従います。 Visual Studio Code は、少なくともバージョン 1.56.1 である必要があります。

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

マニフェストからアドインの ID を取得します。
- アドインのみのマニフェスト: ルート <OfficeApp> 要素の <Id> 要素の子の値を使用します。
- Microsoft 365 の統合マニフェスト: ルート匿名 { ... } オブジェクトの "id" プロパティの値を使用します。
HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Wef\Developer\[Add-in ID]で UseDirectDebugger という名前のレジストリ DWORD値を作成します。 [Add-in ID]をマニフェストのアドインの ID に置き換えます。
注:

HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\WEF\の下にDeveloper キー (フォルダー) がまだ存在しない場合は、次の手順を実行して作成します。
1. WEF キー (フォルダー) を右クリック (または長押し) し、[新規>Key] を選択します。
2. 新しいキーに Developer という名前を付けます。
Yeoman ジェネレーターを使用して作成: コマンドラインウィンドウで、アドインフォルダーのルートに移動し、次のコマンドを実行します。
```
npm start
```
このコマンドは、コードをビルドしてローカルサーバーを起動するだけでなく、このアドインの UseDirectDebugger レジストリ DWORD 値データを 1に設定します。

その他: 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\[Add-in ID]で、 [Add-in ID] がマニフェストからのアドインの ID である場合は、次の構成で新しい DWORD 値を作成します。
- 値名: DebuggerPort
- 値データ (16 進数): 00002407
これにより、デバッガーポートが 9223に設定されます。
Outlook を起動するか、既に開いている場合は再起動します。
OnNewMessageComposeイベントを開始するための新しいメッセージの作成やスパムメッセージの報告など、開発対象のイベントを開始するアクションを実行します。 [デバッグイベントベースのハンドラー] ダイアログが表示されます。ダイアログをまだ操作 しないでください 。

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 ファイルが Wef フォルダーに表示されない場合は、次の手順を試してください。
- アドインがインストールされているかサイドロードされている場合は、Outlook を再起動します。
- Outlook からアドインを削除し、もう一度サイドロードします。
Visual Studio Code で bundle.js を開きます。
デバッガーを停止 する場所bundle.js にブレークポイントを配置します。
[ デバッグ ] ドロップダウンで、[ 直接デバッグ] を選択し、[ デバッグの開始 ] アイコンを選択します。

デバッガーを実行する

デバッガーがアタッチされていることを確認したら、Outlook に戻り、[ デバッグイベントベースのハンドラー ] ダイアログで [OK] を選択 します 。
Visual Studio Code でブレークポイントにヒットし、イベントベースのアクティブ化またはスパムレポートコードをデバッグできるようになりました。

デバッガーを停止する

現在の 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 イベントを開始する新しいメッセージを作成します。これにより、空の開発者ウィンドウが開きます。ウィンドウのタイトルバーにアドインの名前が表示されます。
開発者ウィンドウ内の任意の場所を右クリック (または選択して長押し) し、[ 要素の検査] を選択します。これによりインスペクターが開き、ブレークポイントを設定してアドインをデバッグできます。

次の方法で共有