How to: Debug OfficeJs Add-ins in Visual Studio Code

In this demo I attach a debugger session from within Visual Studio Code to an OfficeJS Office Add-in.
Prereq:
OfficeJS Add-in (for instance generated by Yeoman ... yo office)
Visual Studio Code Extension installed:
Microsoft Office Add-in Debugger for Visual Studio Code
marketplace.vi...
Steps:
- Open Admin Command (Start Menu, type Command, right click, Run As Administrator)
- Goto OfficeJS repo
- Start Visual Studio Code to open the repo directory
- Add configuration to launch.json:
{
"type": "office-addin",
"request": "attach",
"name": "Attach to Office Add-ins",
"port": 9222,
"trace": "verbose",
"url": "localhost:3000/taskpane.html?_host_Info=Excel$Win32$16.01$en-US$$$$0",
"webRoot": "${workspaceFolder}",
"timeout": 45000
}
Note: I selected Excel as host so _host_info should contain Excel as in example above.
- Start Terminal in VS Code
- Make sure the Webview is using Edge (not Edge Chromium) using the command:
npx office-addin-dev-settings webview .\manifest.xml edge
This should output:
The web view type is set to Edge.
- Verify the used webview using the command:
npx office-addin-dev-settings webview .\manifest.xml
This should output:
The web view type is set to Edge.
- run command: npm start
This should start a Node window as web server and Excel as host application
- Wait for Node to complete compiling
- Open the TaskPane
- Attach VS Code Debugger by:
- Hit Ctrl-Shift-D
- Select Attach to Office Add-Ins from dropdown list
- Click the green run arrow (or hit Run-Start Debugging from the menu)
- Check the Debug Console output to see if debugger attached properly
- Place a breakpoint in (for instance Taskpane.js) your .js file
- Run your code and verify the breakpoint will hit and code stopped at the breakpoint.
#OfficeDev #OfficeJS #Debugging

[@RickyPatnaik]

Great work. I was looking for some help on debugging react based office add in. I followed all you steps but still the debugger does not get attached. Can it be a problem if I have Edge chromium installed.

[@SoftAsInSoftware]

You do need the Edge (non Chromium) version for this to work at this time. You should be able to install Edge (non Chromium) side by side and switch the debugger with the command: npx office-addin-dev-settings webview .\manifest.xml edge You can check your current status by running npx office-addin-dev-settings webview .\manifest.xml leaving out the edge option.Last week I too was messing with it where it still did not connect. Rebooting the machine and starting clean might help you getting it to work for you.

[@RickyPatnaik]

@@SoftAsInSoftware Somehow uninstalling Edge (Chromium) and re-setting debugging as per your instruction did work. I was able to install Edge (Chromium) later on and everything still work as desired. Thanks for your inputs.

[@vickymishra3520]

i really need some help in connecting postgresql database to excel office add-in plz provide me some references because done some reasearch work but did not get any thing

[@vickymishra3520]

Can we change excel file to another excel file in office addin

[@vickymishra3520]

Mean that excel file we are getting after running the addin that I have to change and I want to add my excel file can we do that

[@SoftAsInSoftware]

It is a complete other topic but yes, you should be able to do that if you follow the instructions found here docs.microsoft.com/en-us/office/dev/add-ins/excel/excel-add-ins-workbooks#insert-a-copy-of-an-existing-workbook-into-the-current-one Good question and I might use this for another KZbin video.

[@opeyemianiwura8809]

Please the file path does not exist on my system

[@SoftAsInSoftware]

What file path are you refering to?

[@vickymishra3520]

can you make video today itself because its urgent and i am requesting you plz

[@SoftAsInSoftware]

You clearly don't have a clue how much time it takes to create these instruction videos 😉 But you are lucky and the demo is available as part of one of the Office Community Calls by the Office PG here kzbin.info/www/bejne/b2SXf2ijj76Sa68 and a demo repo is available on GitHub (the one that is demoed in the video: github.com/OfficeDev/PnP-OfficeAddins/tree/main/Samples/excel-insert-file Hope that helps!

[@vesogry]

After a while, I managed to have it working for the taskpane. Do you know how to do it for Custom functions? Tried to follow instruction from the site, but the code doesn't stop on breakpoints. docs.microsoft.com/en-us/office/dev/add-ins/excel/custom-functions-debugging

[@braddixon1503]

I have the same problem, very frustrating and haven't managed to get to the bottom of it.

[@matthewgraziano1124]

Is the code you executed hosted on github (or otherwise)?

[@SoftAsInSoftware]

The code in the demo is in general a simple generated project by running "yo office" (for full details on the Yeoman generator: github.com/officedev/generator-office ). I do have my own github repo where I put some sample scipts, test projects and forked repos I work on at github.com/aafvstam but this one was a generated boilerplate with Yeoman

[@matthewgraziano1124]

@@SoftAsInSoftware Thanks! I ended up surmising that as I dove deeper into the OfficeJs Docs. I've been able to replicate all of the tutorial here except when I start the debugger, I get no output in "Debug Console" despite the add-in running successfully. Did you happen to encounter something similar or have any nudges? Seems like a common thing folks are running into (github issues) with no defined "fix".

[@SoftAsInSoftware]

@@matthewgraziano1124 Did you run VS Code 'as admin' ?

[@matthewgraziano1124]

@@SoftAsInSoftware Yes!

[@SoftAsInSoftware]

@@matthewgraziano1124 What WebView are you using? run "npx office-addin-dev-settings webview .\manifest". Be aware that if you use the 'default' generated template it will return "set to Edge" (non chromium) but with the latest office-addin-dev-settings it will still say Edge but can return the Chromium version. Update the office-addin-debugging package to the latest version as I discussed in this comment: github.com/OfficeDev/generator-office/issues/624 that allows you to target more specific to ie, legacy or chromium.

[@vickymishra3520]

please make video fast its urgent

[@SoftAsInSoftware]

See my answer on the other video to you 😊