Add-in Debugger

The "Microsoft Office Add-in Debugger" Extension for Visual Studio Code allows you to use F5 to debug your Office Add-in against the Edge runtime.
This debugging mode is dynamic, allowing you to set breakpoints while code is running.
You can see changes in your code immediately while the debugger is attached, all without losing your debugging session.
Your code changes also persist, so you can see the results of multiple changes to your code.


Visual Studio Code (must be run as an administrator)
Node.js (version 10+)
Windows 10
Microsoft Edge (Not Chromium yet - coming soon)
Yo Office, if you need to create a new project

.vscode Folder

In the .vscode folder of your project, you will find a launch.json file. At the end of the file, add the following code to the configurations section of the file.

        "type": "office-addin",
        "request": "attach",
        "name": "Attach to Office Add-ins",
        "port": 9222,
        "trace": "verbose",
        "url": "https://localhost:3000/taskpane.html?_host_Info=HOST$Win32$16.01$en-US$$$$0",
        "webRoot": "${workspaceFolder}",
        "timeout": 45000

In the section of JSON you just copied, find the "url" section. In this URL, you will need to replace the uppercase HOST text with the host application for your Office add-in. For example, if your Office add-in is for Excel, your URL value would be "https://localhost:3000/taskpane.html?_host_Info=Excel$Win32$16.01$en-US$$$$0".
Open the command prompt and ensure you are at the root folder of your project. Run the command npm start to start the dev server. When your add-in loads in the Office host application, open the task pane.
Return to Visual Studio Code and choose View > Debug or enter CTRL + SHIFT + D to switch to debug view.
From the Debug options, choose Attach to Office Add-ins. Select F5 or choose Debug -> Start Debugging from the menu to begin debugging.
Set a breakpoint in your project's task pane file. You can set breakpoints in VS Code by hovering next to a line of code and selecting the red circle which appears.

© 2022 Better Solutions Limited. All Rights Reserved. © 2022 Better Solutions Limited TopPrevNext