Visual Studio Code 用 Microsoft Office アドイン デバッガー拡張機能

  • [アーティクル]

Windows で実行されている Office アドインでは、Visual Studio Code の Office アドイン デバッガー拡張機能を使用して、元の WebView (EdgeHTML) ランタイムを使用したMicrosoft Edge 従来版に対してデバッグできます。

重要

この記事は、「Office アドインで使用されるブラウザー」で説明されているように、Office が元の WebView (EdgeHTML) ランタイムでアドインを実行する場合にのみ適用されます。Microsoft Edge WebView2 (Chromium ベース) に対する Visual Studio コードでのデバッグの手順については、「Microsoft Office アドイン デバッガー拡張機能 for Visual Studio Code」を参照してください。

ヒント

Visual Studio Code に組み込まれているツールを使用してデバッグできない場合、またはしたくない場合。または、アドインが Visual Studio Code の外部で実行されている場合にのみ発生する問題が発生している場合は、「Microsoft Edge 従来版の開発者ツールを使用してアドインをデバッグする」で説明されているように、Edge レガシ開発者ツールを使用して Edge レガシ (EdgeHTML) ランタイムをデバッグできます。

このデバッグ モードは動的であるため、コードの実行中にブレークポイントを設定できます。 デバッガーがアタッチされている間、コードの変更をすぐに確認できます。すべてデバッグ セッションを失う必要はありません。 コードの変更も保持されるため、コードに対する複数の変更の結果を確認できます。 次の画像は、この拡張機能の動作を示しています。

Excel アドインのセクションをデバッグする Office アドイン デバッガー拡張機能。

前提条件

デバッガーをインストールして使用する

これらの手順では、Office アドイン 用 Yeoman ジェネレーターを使用する前に、コマンド ラインの使用経験、基本的な JavaScript の理解、Office アドイン プロジェクトの作成を前提としています。これを行ったことがない場合は、こちらの Excel Office アドイン チュートリアルのように、チュートリアルの 1 つにアクセスすることを検討してください。

  1. 最初の手順は、プロジェクトとその作成方法によって異なります。

  2. VS Code を開始し、プロジェクトを開きます。

  3. VS Code で Ctrl キー + Shift キー + X キーを選択して、拡張機能バーを開きます。 "Microsoft Office アドイン デバッガー" 拡張機能を検索してインストールします。

  4. [View Run]\(実行の表示>\) を選択するか、Ctrl + Shift + D キーを押してデバッグ ビューに切り替えます。

  5. [実行とデバッグ] オプションから、ホスト アプリケーションの [Edge レガシ] オプション (Outlook Desktop (Edge レガシ) など) を選択します。 F5 キーを押すか、メニューから [デバッグの開始>] を選択してデバッグを開始します。 この操作により、アドインをホストするローカル サーバーがノード ウィンドウで自動的に起動され、Excel や Word などのホスト アプリケーションが自動的に開きます。 これには数秒かかる場合があります。

  6. ホスト アプリケーションで、アドインを使用する準備ができました。 [作業ウィンドウの表示] を選択するか、その他のアドイン コマンドを実行します。 次のようなダイアログ ボックスが表示されます。

    WebView は読み込み時に停止します。 WebView をデバッグするには、Microsoft Debugger for Edge 拡張機能を使用して VS Code を WebView インスタンスにアタッチし、[ OK] を クリックして続行します。 このダイアログが今後表示されないようにするには、[ キャンセル] をクリックします。

    [OK] をクリックします。

    注:

    [キャンセル] を選択すると、このアドインのインスタンスの実行中はダイアログが表示されなくなります。 ただし、アドインを再起動すると、ダイアログはもう一度表示されます。

  7. プロジェクトの作業ウィンドウ ファイルにブレークポイントを設定します。 Visual Studio Code でブレークポイントを設定するには、コード行の横にマウス ポインターを置き、表示される赤い円を選択します。

    Visual Studio Code のコード行に赤い円が表示されます。

  8. ブレークポイントを使用して行を呼び出すアドインの機能を実行します。 ブレークポイントがヒットし、ローカル変数を検査できます。

    注:

    Office.initialize または Office.onReady の呼び出しのブレークポイントは無視されます。 これらのメソッドの詳細については、「 Office アドインを初期化する」 を参照してください。

重要

デバッグ セッションを停止する最善の方法は、Shift + F5 キーを押すか、メニューから [デバッグの停止の実行>] を選択することです。 この操作では、ノード サーバー ウィンドウを閉じてホスト アプリケーションを閉じようとしますが、ドキュメントを保存するかどうかを確認するプロンプトがホスト アプリケーションに表示されます。 適切な選択を行い、ホスト アプリケーションを閉じます。 ノード ウィンドウまたはホスト アプリケーションを手動で閉じないようにします。 これを行うと、特にデバッグ セッションの停止と開始を繰り返している時に、バグが発生する可能性があります。

デバッグが動作を停止する場合、たとえば、ブレークポイントが無視される場合などは、デバッグを停止します。 その後、必要に応じて、すべてのホスト アプリケーション ウィンドウとノード ウィンドウを閉じます。 最後に、Visual Studio Code を閉じて、もう一度開きます。

付録

プロジェクトが Yo Office で作成されていない場合は、Visual Studio Code のデバッグ構成を作成する必要があります。

  1. プロジェクトの \.vscode フォルダーに launch.json という名前のファイルがまだ存在しない場合は作成します。

  2. ファイルに configurations 配列があることを確認します。 launch.json の簡単な例を次に示します。

    {
  // Other properties may be here.

  "configurations": [

    // Configuration objects may be here.

  ]

  // Other properties may be here.
}

  3. configurations 配列に次のオブジェクトを追加します。

    {
  "name": "HOST Desktop (Edge Legacy)",
  "type": "office-addin",
  "request": "attach",
  "url": "https://localhost:3000/taskpane.html?_host_Info=HOST$Win32$16.01$en-US$$$$0",
  "port": 9222,
  "timeout": 600000,
  "webRoot": "${workspaceRoot}",
  "preLaunchTask": "Debug: HOST Desktop",
  "postDebugTask": "Stop Debug"
}

  4. 3 つすべての場所のプレースホルダー HOST を、アドインが実行する Office アプリケーションの名前 (例: Outlook または Word) に置き換えます。

  5. ファイルを保存して閉じます。

関連項目