Outlook Plugin Visual Studio Code debugger not working

[sid1260]

This does not seem to be working as mentioned in the article. If we try to do as suggested below is the exception received This is the debugging config in launch.json { "name": "Outlook Desktop (Edge Legacy)", "type": "office-addin", "request": "attach", "url": "https://localhost:3000/taskpane.html?_host_Info=Outlook$Win32$16.01$en-US$$$$0", "port": 9222, "timeout": 600000, "webRoot": "${workspaceRoot}", "preLaunchTask": "Debug: Outlook Desktop", "postDebugTask": "Stop Debug" },

I have also tried to use { "name": "Outlook Desktop (Edge Chromium)", "type": "edge", "request": "attach", "useWebView": "advanced", "port": 9229, "timeout": 600000, "webRoot": "${workspaceRoot}", "preLaunchTask": "Debug: Outlook Desktop", "postDebugTask": "Stop Debug" }, This throws exception saying edge is no more supported.

In the end both options seems to fail

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 614e6992-f9be-4ce5-1f15-0fc6bf285c43
• Version Independent ID: 1b37e38d-06ec-cd00-16bb-3324b1f0048f
• Content: Microsoft Office Add-in Debugger Extension for Visual Studio Code - Office Add-ins
• Content Source: docs/testing/debug-with-vs-extension.md
• Product: non-product-specific
• Technology: add-ins
• GitHub Login: @o365devx
• Microsoft Alias: o365devx

[AlexJerabek]

Hi @sid1260,

Thank you for reporting this. I just reproduced your issue. I'll tag @millerds to help find a solution.

[AlexJerabek]

Also tagging @igor-ribeiiro to help investigate.

[AlexJerabek]

@sid1260, One quick question, do you have the same experience if you select "Outlook Desktop (Edge Chromium)" from the "Run and Debug" menu?

[sid1260]

If I choose edge chromium , I get a warning

Then once outlook opens and after opening the task pane, below error pops up

Let me know if you need more info. Are you able to reproduce this behaviour?

[millerds]

I'm a little confused here. The step linked to here are for running dev server first and attaching to it using the launch config code in the instructions added to the config file . . . but the discussion here is talking about using the existing launch configs in our templates which don't require running dev server first. What are the specific steps of the repro?

[sid1260]

Hi Millerds, if you start the dev server and try to attach you end up with the same issue. Either ways for Outlook, it looks like debugging does not work.

[millerds]

If I create a new project for an outlook task pane using 'yo office' and use the chromium debugger command provided it doesn't have either of those errors.

I have seen that first error when trying to use the wrong debugger (Legacy when the browser being used is Chromium), but the other one I have not seen. Can you tell me more about your environment (version of Office, VS Code, Edge, OS, Node, and npm)?

[sid1260]

version of Office - Version 2111 Build 14701.20262 VS Code Version 1.6 Edge - Microsoft Edge Version 96.0.1054.62 OS Windows 10 Enterprise Node - v.14.18.1 npm - 8.0.0

[sid1260]

Here's a video grab if this helps. Let me know if something strikes https://drive.google.com/file/d/1MEi95QSqvaK6A-DOfBiS1GLsU4q8fjSI/view?usp=sharing

If you want me to try out different options , let me know

The details for the environment is below

version of Office - Version 2102 Build 13801.21092 VS Code Version 1.63.2 Edge - Microsoft Edge version 96.0.1054.62 (Official build) (64-bit) OS Windows 10 Pro Node - v.14.16.0 npm - 6.14.11

[millerds]

OK, I can get that error when I disable my "Debugger for Microsoft Edge" extension (I noticed some extension error in your video). Looks like the debugging plugins have changed and our templates need to be updated. In the meantime, if you change your launch.json entries from "type": "edge" to "type": "pwa-msedge" then your chromium entries should work.

[sid1260]

It better..but..

If I change to pwa-msedge, the error goes away, however the breakpoint never gets hit. See here https://drive.google.com/file/d/183VOFt9oUPyfT9NLBe5Jd1ImdYKcQ7R5/view?usp=sharing

Are you able to hit the breakpoint?

[millerds]

OK . . . looks like the useWebView config setting has changed type. Change

"useWebView": "advanced" 

in the launch.json file to be

"useWebView": true

[sid1260]

I did that. Still the same, unable to debug,its not hitting the debug points.

[millerds]

No quotes around the 'true' . . . it needs to be a boolean value not a string.

[sid1260]

ahh. Good catch.

Unfortunately no luck :(

[millerds]

So after making those two modifications I'm able to hit breakpoint in a new project for Outlook. Can you explain what your current experience is including specific steps on what you are trying to do?

[sid1260]

I have added breakpoints to taskpane.js , then started the debug process, but it does not hit the breakpoint. Added a video recording.

https://drive.google.com/file/d/1_KxFIbMU7QJMJd9fF7tB62l-sIbrky_W/view?usp=sharing

[millerds]

OK . . . let's look at some more environment information. Can you let me know:

• The type of Office install (32 vs. 64 bit and if it O365/"click-to-run" or a standalone install (like Office 2019)
• The plugins you have installed for VS Code
• The output of running "npx office-addin-dev-settings webview manifest.xml" in your project

[sid1260]

The type of Office install (32 vs. 64 bit and if it O365/"click-to-run" or a standalone install (like Office 2019)

Its 64 bit o365 click to run

The plugins you have installed for VS Code

Here are the list of VS code plugins code --list-extensions | % { "code --install-extension $_" } code --install-extension dbaeumer.vscode-eslint code --install-extension esbenp.prettier-vscode code --install-extension flowtype.flow-for-vscode code --install-extension hashicorp.terraform code --install-extension ms-azuretools.vscode-azureterraform code --install-extension ms-azuretools.vscode-docker code --install-extension ms-edgedevtools.vscode-edge-devtools code --install-extension ms-kubernetes-tools.vscode-kubernetes-tools code --install-extension ms-python.python code --install-extension ms-python.vscode-pylance code --install-extension ms-toolsai.jupyter code --install-extension ms-toolsai.jupyter-keymap code --install-extension ms-toolsai.jupyter-renderers code --install-extension ms-vscode-remote.remote-containers code --install-extension ms-vscode-remote.remote-wsl code --install-extension ms-vscode.azure-account code --install-extension ms-vscode.powershell code --install-extension mshdinsight.azure-hdinsight code --install-extension msjsdiag.debugger-for-chrome code --install-extension msjsdiag.vscode-react-native code --install-extension msoffice.microsoft-office-add-in-debugger code --install-extension redhat.vscode-yaml code --install-extension scala-lang.scala code --install-extension tht13.python code --install-extension vscode-icons-team.vscode-icons

The output of running "npx office-addin-dev-settings webview manifest.xml" in your project

PS C:\Temp\officeoutlookplugin\testproject> npx office-addin-dev-settings webview manifest.xml The web view type has not been set.

[millerds]

Can you check if WebView2 is install on your machine (using 'Add or remove programs' settings)?

Also run 'npx office-addin-dev-settings webview manifest.xml edge' and try debugging again.

[sid1260]

Yes, webview2 seems to be there

Did the change

Still no luck

[sid1260]

hi Millerds, Any update on the above?

[millerds]

Are you able to provide a zip file of the project (remove the nod_modules folder first)?

[sid1260]

sorry for the delay. Seems i missed the update. I have attached the test project here. Let me know if you need anything else. testproject.zip

[millerds]

I am able to debug your project just fine . . . so it's definitely something about the environment. I can't see anything wrong with the environment information you've given me, but may just try getting an update version of VS code and Office (if possible).

[sid1260]

version of Office - Version 2102 Build 13801.21092 VS Code Version 1.63.2

upgraded to VS Code Version 1.64.2 Office version (16.0.14326.20782) 64-bit

And voila - we have a winner :)

Not sure what and how. But glad that is working. Thanks for the patience and help!!

[millerds]

Glad it worked!

[AlexJerabek]

Thanks @millerds!

Since the updating to the latest versions of VS Code and Office solved the problem, I'm going to close the issue. If I'm mistaken and there's a documentation issue that needs to be addressed, please let me know and I'll reopen it.