Edit

Debug add-ins in Office on the web

  • Article

This article describes how to use Office on the web to debug your add-ins. Use this technique:

  • To debug add-ins on a computer that isn't running Windows or the Office desktop client—for example, if you're developing on a Mac or Linux.
  • As an alternative debugging process if you can't, or don't wish to, debug in an IDE, such as Visual Studio or Visual Studio Code.

This article assumes that you have an add-in project that needs to be debugged. If you just want to practice debugging on the web, create a new project using one of the quick starts for specific Office applications, such as this quick start for Word.

Debug your add-in

To debug your add-in by using Office on the web:

  1. Run the project on localhost and sideload it to a document in Office on the web. For detailed sideloading instructions, see Manually sideload Office Add-ins on the web.

  2. Open the browser's developer tools. This is usually done by pressing F12. Open the debugger tool and use it to set breakpoints and watch variables. For detailed help in using your browser's tool, see one of the following:

    Note

    • Office on the web won't open in Internet Explorer.
    • The new Outlook on Window desktop client (preview) doesn't support the context menu or the keyboard shortcut to access the Microsoft Edge developer tools. Instead, you must run olk.exe --devtools from a command prompt. For more information, see the "Debug your add-in" section of Develop Outlook add-ins for the new Outlook on Windows (preview).

Potential issues

The following are some issues that you might encounter as you debug.

  • Some JavaScript errors that you see might originate from Office on the web.
  • The browser might show an invalid certificate error that you'll need to bypass. The process for doing this varies with the browser and the various browsers' UIs for doing this change periodically. You should search the browser's help or search online for instructions. (For example, search for "Microsoft Edge invalid certificate warning".) Most browsers will have a link on the warning page that enables you to click through to the add-in page. For example, Microsoft Edge has a "Go on to the webpage (Not recommended)" link. But you'll usually have to go through this link every time the add-in reloads. For a longer lasting bypass, see the help as suggested.
  • If you set breakpoints in your code, Office on the web might throw an error indicating that it's unable to save.

See also