Skip to content

Latest commit

 

History

History
61 lines (41 loc) · 3.93 KB

debug-add-ins-using-devtools-edge-chromium.md

File metadata and controls

61 lines (41 loc) · 3.93 KB
title description ms.date ms.localizationpriority
Debug add-ins using developer tools for Microsoft Edge WebView2
Debug add-ins using the developer tools in Microsoft Edge WebView2 (Chromium-based).
05/20/2023
medium

Debug add-ins using developer tools in Microsoft Edge (Chromium-based)

This article shows how to debug the client-side code (JavaScript or TypeScript) of your add-in when the following conditions are met.

  • You cannot, or don't wish to, debug using tools built into your IDE; or you are encountering a problem that only occurs when the add-in is run outside the IDE.
  • Your computer is using a combination of Windows and Office versions that use the Edge (Chromium-based) webview control, WebView2.

Tip

For information about debugging with Edge WebView2 (Chromium-based) inside Visual Studio Code, see Debug add-ins on Windows using Visual Studio Code and Microsoft Edge WebView2 (Chromium-based).

To determine which webview you're using, see Browsers and webview controls used by Office Add-ins.

Tip

[!INCLUDEIdentify the webview through the add-in UI]

Debug a task pane add-in using Microsoft Edge (Chromium-based) developer tools

Note

If your add-in has an add-in command that executes a function, the function runs in a hidden browser runtime process that the Microsoft Edge (Chromium-based) developer tools cannot be launched from, so the technique described in this article cannot be used to debug code in the function.

  1. Sideload and run the add-in.

  2. Run the Microsoft Edge (Chromium-based) developer tools by one of these methods:

    • Be sure the add-in's task pane has focus and press Ctrl+Shift+I.
    • Right-click the task pane to open the context menu and select Inspect, or open the personality menu and select Attach Debugger. (The personality menu isn't supported in Outlook.)

  3. Open the Sources tab.

  4. Open the file that you want to debug with the following steps.

    1. On the far right of the tool's top menu bar, select the ... button and then select Search.
    2. Enter a line of code from the file you want to debug in the search box. It should be something that's not likely to be in any other file.
    3. Select the refresh button.
    4. In the search results, select the line to open the code file in the pane above the search results.

    :::image type="content" source="../images/open-file-in-edge-chromium-devtools.png" alt-text="Screenshot of Edge Chromium developer tools source tab with 4 parts labelled A through D.":::

  5. To set a breakpoint, select the line number of the line in the code file. A red dot appears by the line in the code file. In the debugger window to the right, the breakpoint is registered in the Breakpoints drop down.

  6. Execute functions in the add-in as needed to trigger the breakpoint.

Tip

For more information about using the tools, see Microsoft Edge Developer Tools overview.

Debug a dialog in an add-in

If your add-in uses the Office Dialog API, the dialog runs in a separate process from the task pane (if any) and the tool must be started from that separate process. Follow these steps.

  1. Run the add-in.

  2. Open the dialog and be sure it has focus.

  3. Open the Microsoft Edge (Chromium-based) developer tools by one of these methods:

    • Press Ctrl+Shift+I or F12.
    • Right-click the dialog to open the context menu and select Inspect.

  4. Use the tool the same as you would for code in a task pane. See Debug a task pane add-in using Microsoft Edge (Chromium-based) developer tools earlier in this article.