Debug add-ins using developer tools on Windows 10
There are developer tools outside of IDEs available to help you debug your add-ins on Windows 10. These are useful when you need to investigate a problem while running your add-in outside the IDE.
The tool that you use depends on whether the add-in is running in Microsoft Edge or Internet Explorer. This is determined by the version of Windows 10 and the version of Office that are installed on the computer. To determine which browser is being used on your development computer, see Browsers used by Office Add-ins.
The instructions in this article cannot be used to debug an Outlook add-in that uses Execute Functions. To debug an Outlook add-in that uses Execute Functions, we recommend that you attach to Visual Studio in script mode or to some other script debugger.
When the add-in is running in Microsoft Edge
When the add-in is running in Microsoft Edge, UI-less code will not be able to attach to a debugger by default. UI-less code is any code running while the task pane is not visible, such as add-in commands. To enable debugging, you need to run the following Windows PowerShell commands.
Run the following command to get information for the Microsoft.Win32WebViewHost app package.
The command lists app package information similar to the following output.
Name : Microsoft.Win32WebViewHost Publisher : CN=Microsoft Windows, O=Microsoft Corporation, L=Redmond, S=Washington, C=US Architecture : Neutral ResourceId : neutral Version : 10.0.18362.449 PackageFullName : Microsoft.Win32WebViewHost_10.0.18362.449_neutral_neutral_cw5n1h2txyewy InstallLocation : C:\Windows\SystemApps\Microsoft.Win32WebViewHost_cw5n1h2txyewy IsFramework : False PackageFamilyName : Microsoft.Win32WebViewHost_cw5n1h2txyewy PublisherId : cw5n1h2txyewy IsResourcePackage : False IsBundle : False IsDevelopmentMode : False NonRemovable : True IsPartiallyStaged : False SignatureKind : System Status : Ok
Run the following command to enable debugging. Use the value for the PackageFullName listed from the previous command.
setx JS_DEBUG <PackageFullName>
If Office was already running, close and restart Office so that it picks up the debugging change.
Debug using Microsoft Edge DevTools
When the add-in is running in Microsoft Edge, you can use the Microsoft Edge DevTools.
Run the add-in.
Run the Microsoft Edge DevTools.
In the tools, open the Local tab. Your add-in will be listed by its name.
Click the add-in name to open it in the tools.
Open the Debugger tab.
To set a breakpoint, select the line. You will see a red dot to the left of the line and a corresponding line in the Call stack (bottom right) pane.
Execute functions in the add-in as needed to trigger the breakpoint.
When the add-in is running in Internet Explorer
When the add-in is running in Internet Explorer, you can use the debugger from the F12 developer tools in Windows 10 to test your add-in. You can start the F12 developer tools after the add-in is running. The F12 tools are displayed in a separate window and do not use Visual Studio.
The Debugger is part of the F12 developer tools in Windows 10 and Internet Explorer. Earlier versions of Windows do not include the Debugger.
This example uses Word and a free add-in from AppSource.
Open Word and choose a blank document.
On the Insert tab, in the Add-ins group, choose Store and select the QR4Office Add-in. (You can load any add-in from the Store or your add-in catalog.)
Launch the F12 development tools that corresponds to your version of Office:
For the 32-bit version of Office, use C:\Windows\System32\F12\IEChooser.exe
For the 64-bit version of Office, use C:\Windows\SysWOW64\F12\IEChooser.exe
When you launch IEChooser, a separate window named "Choose target to debug" displays the possible applications to debug. Select the application that you are interested in. If you are writing your own add-in, select the website where you have the add-in deployed, which might be a localhost URL.
For example, select home.html.
In the F12 window, select the file you want to debug.
To select the file in the F12 window, choose the folder icon above the script (left) pane. From the list of available files shown in the dropdown list, select Home.js.
Set the breakpoint.
To set the breakpoint in Home.js, choose line 144, which is in the
Run your add-in to trigger the breakpoint.
In Word, choose the URL textbox in the upper part of the QR4Office pane and attempt to enter some text. In the Debugger, in the Call stack and Breakpoints pane, you'll see that the breakpoint has triggered and shows various information. You might need to refresh the Debugger to see the results.