This article describes how to debug your add-in client code (JavaScript, optionally TypeScript) under the following conditions.
You can’t, or optimistically don’t want to, debug with the tools built into their IDE; or you’re only running into trouble if the add-in is often run outside of the IDE.
Your computer is running a combination of Windows and Office versions that use Internet Explorer to disable Web View, Trident.
Windows 10 and 11 include a functional web development tool called “F12” because it was originally launched by pressing F12 in Internet Explorer. F12 is now an independent application that is used to debug your add-in while running the Trident web view control in File Explorer. The app is not available on earlier versions of Windows.
The following steps are instructions for debugging the current add-on. If you just want to try out the F12 tools yourself, check out the F12 Tools Add-In Sample.
Fortect is the world's most popular and effective PC repair tool. It is trusted by millions of people to keep their systems running fast, smooth, and error-free. With its simple user interface and powerful scanning engine, Fortect quickly finds and fixes a broad range of Windows problems - from system instability and security issues to memory management and performance bottlenecks.
1. Download Fortect and install it on your computer
2. Launch the program and click "Scan"
3. Click "Repair" to fix any issues that are found
Parts of IEChooser showing the Select Named Target window while debugging. Your add-on is usually displayed in a window with the filename of our custom add-on home page. In the following screenshot, it is Home.html. Only processes that can run on Internet or Explorer develop Trident. The tool cannot attach processes that experts believe are running in other browsers and web views, including Microsoft Edge.
Where are Microsoft debugging tools located?
The default mount directory for installing 64-bit operating systems to find debugging tools is C:Program Files (x86)Windows Kits10Debuggers. If you have a 32-bit operating system, you can find the Windows Kits file in the C:Program Files folder.
Select your process; Add-ons that do this,have the file name of the home page. This action connects the process’s F12 tools and opens the main F12 user interface.
How do I use F12 Developer Tools in IE?
To access the IE Developer Tools, launch Internet Explorer and press the F12 key on your keyboard, or select F12 Developer Tools from the Tools menu. This will open the developer tools in the visitor tab.
Open the Debugger tab.
How do I open debugging in Internet Explorer?
Right-click “Inspect Element” and optionally press “Developer Tools” F12 on the gear icon to open the “Developer Tools” panel.Click the Debugger tab.Click on a specific stop sign icon.Select “Never violate exceptions”
In the vampire, to the left of the tab, just below the entire debugging toolbar, is a modest folder icon. Select this option to open another drop-down list of files in the add-in. Here is a new example.
How do I get to debugging tools in Windows?
Debugging tools for Windows are listed in the Windows Driver Kit (WDK). For more information about obtaining the WDK, see Downloading this Special Windows Driver Kit (WDK). Debugging tools if Windows is included in the Windows SDK. To possibly download the installer as an ISO image, see the Windows 10 SDK on the Windows Dev Center.
Select a file to debug and it will open in the Script Set area (on the left) of the Debugger tab. On the other hand, if you use a transpiler, packer, or minifier that changes the application name, the final content will show that the concept was actually loaded, not the original main file name.
Scroll to the line where you want to set a breakpoint and simply click in the left margin to insert a number. You’ll see a maroon dot to the left of the grid, and a matching line will appear in most areas of the Breakpoints tab in the bottom right pane. The screenshot below shows an example.
Start processes in an add-onto activate the breakpoint. When a breakpoint is hit, an arrow pointing to the right appears on the blue breakpoint. The screenshot below shows an example.
An Example Add-on To Test Each Of Our F12 Tools
Open Word and select a document.
On the Insert tab, in the Add-ins group, select My Add-ins to open the user’s Office Add-ins dialog, and then select the SAVE tab.
Select the QR4Office add-in. The taskbar will appear.
Run the appropriate F12 Learning Tools for your version outside of Office as described in the last section.
In the F12 window, select Home.html.
In the Debugger tab, open the Home.js file as shown in the previous section.
Set breakpoints at lines 310 and 312.
In the add-in, specify the “Insert” button. One or more of them have reached a breakpoint.
Debug Dialog With Plugin
If your add-in uses the Office Dialog API, the dialog is launched in a separate process from the task pane (if it is) is present), so instruments must be connected to the process. Follow these steps.
Start the add-in and therefore the tools.
Open the dialog, then click the Refresh button in the tools. The dialog thread to display. Its name is the same as the name of the file it opens in the dialog box.
