Debug add-ins using F12 developer tools on Windows 10
The F12 developer tools included in Windows 10 help you debug, test, and speed up your webpages. You can also use them to develop and debug Office Add-ins, if you are not using an IDE like Visual Studio, or if you need to investigate a problem while running your add-in outside the IDE. You can start the F12 developer tools after your add-in is running.
This article shows how you how to use the Debugger tool from the F12 developer tools in Windows 10 to test your Office Add-in. You can test add-ins from the Office Store or add-ins that you have added from other locations. The F12 tools display 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.
You need the following software:
The F12 developer tools, which are included in Windows 10.
The Office client application that hosts your add-in.
Using the Debugger
This example uses Word and a free add-in from the Office Store.
Open Word and choose a blank document.
On the Insert tab, in the Add-ins group, 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\F12Chooser.exe
For the 64-bit version of Office, use C:\Windows\SysWOW64\F12\F12Chooser.exe
When you launch F12Chooser, 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, choose the folder icon above the script (left) pane. The dropdown list shows the available files. Select home.js.
Set the breakpoint.
Run your add-in to trigger the breakpoint.
Choose the URL textbox in the upper part of the QR4Office pane to change the text. In the Debugger, in the Callstack and Breakpoints pane, you'll see that the breakpoint has triggered and shows various information. You might need to refresh the F12 tool to see the results.