EdgeWebview crashing after 5 seconds

[G00golplex]

Until now I have alwayse used Microsoft Edge DevTools preview but finally the update of the Edge Chromium with webView 2 DevTools have been deployed. I wanted to run my office JS Excel addin (TypeScript React, FluentUI, with the Yeoman generator scaffolding) and attach the debugger. but the debugger opens up for 5 seconds and then closes and restarts the plugin. As a concenquence, after the reboot of the addin, the attach debugger is not possible for about a minute.

Expected Behavior

I would like to debug my code with the DevTools but it does not seem to work

Current Behavior

Crash of DevTools after 5 seconds.
I have tried the following:

• Update Windows (is on 20H2 now). Excel already was on 2104.
• I updated all my Packages with npm install -g npm-check-updates. This killed the dev server and now it is not starting up at all
• I tried reinstalling the Edge debugger addin for VS-Code.
• I removed Edge Beta which was installed before the full version was available.
• I updated Node JS to version 16.1.0

Steps to Reproduce, or Live Example

Your Environment

• Platform [PC desktop, Mac, iOS, Office on the web]: PC desktop
• Host [Excel, Word, PowerPoint, etc.]: Excel
• Office version number: 2104
• Operating System: Windows 10 Pro 20H2
• Browser (if using Office on the web):

Useful logs

• Console errors
• Screenshots
• Test file (if only happens on a particular file)

[G00golplex]

Update!!!
I tried a brand new project with the Yeoman generator (TypeScript, React) today and the result is identical. WebView closes after 5s and I cannot debug.

[nancy-wang]

Thanks for this feedback @G00golplex ! I'll tag someone on our team to investigate this further.

[sohailzafar]

Thanks for your patience, we will provide an update as soon as we are done investigating.

[4tti]

Hey @G00golplex , @sohailzafar please check UseLiveReload - when True it was causing issues on our end (you need to check all the items under 'Developer' key...

[Delsus78]

@4tti Hey, i try to modify these REGEDIT but it doesnt seem to resolve the issue for me, have you other tricks that can maybe work ? x)

[G00golplex]

@4tti: the UseWebDebugger Reg_Dword is false for all of them. Only UseDirectDebugger is 1.

[4tti]

@Delsus78 unfortunately I don't
@G00golplex well and what about the UseLiveReload ?

[millerds]

Can I get some clarification . . .

• "Microsoft Edge DevTools preview" works with the legacy edge and not the chromium. You said you got an update, but I'm not sure what you are referring too. Are you talking about the dev tools that are part of the Edge chromium install?
  • If you are what are you doing to attach to the add-in (I've only been able to use that in association with a page in the browser and not as a stand alone tool) ?
• What is the specific plugin in VS Code, and it's version, you are using?
• I can create a new project using yo office and use the vs code to debug (Excel Desktop (edge chromium) configuration) just fine. Are you trying not to use VS code for debugging?
• Can you give us some specific steps of what you are trying to do?

[Aniruddha-Shriwant]

Hey @millerds, I was also getting the same error that @G00golplex has,
First I used to use Microsoft Edge Dev Tools Preview for debugging my add-in

Accord Project is the name of my add-in whenever I used to sideload it on ms word there in the debugger tool I used to get an option of Accord Project and then was able to debug perfectly...

But a few days back I was unable to get that Accord Project option in the dev tools for debugging,
Instead, When I start the add-in I got the following Prompt in MS Word:

Also in the Add-in, I tried attaching a debugger option but when the debugger was attached it kept crashing within a few seconds hence I was unable to debug my console logs :)

I had recorded my screen while the debugger was crashing have a look
https://www.loom.com/share/f95a9eacfd194bf58ae48a25f2213cc4

Can anyone here help me how I can debug my Add-in, if there is any new documentation or new methods to do so can you please point out some links to them?

Thanks in Advance :)

[G00golplex]

Hi, please see my clarification below.

On Wed, May 12, 2021 at 12:55 AM Darren Miller ***@***.***> wrote: Can I get some clarification . . . - "Microsoft Edge DevTools preview" works with the legacy edge and not the chromium. You said you got an update, but I'm not sure what you are referring too. Are you talking about the dev tools that are part of the Edge chromium install? - First I had the DevTools Preview with legacy Edge (non Chromium) but there were a lot of problems with that solution so I tried to search for an alternative and that was Edge Chromium Beta. I installed it before Windows 20H2, where it is baked in, was available. Because the DevTools Preview had a lot of hiccups and I wanted to change as fast as possible to the new Edge Chromium DevTools. But after I installed windows 20H2 I I uninstalled Edge Chromium Beta and only the full version of Edge(Version 90.0.818.56 (Official build) (64-bit)) is installed on my machine.I hope that is more clear? - If you are what are you doing to attach to the add-in (I've only been able to use that in association with a page in the browser and not as a stand alone tool) ? To attach the addin I use the "attach debugger button" :


- - What is the specific plugin in VS Code, and it's version, you are using? [image: image.png]

version 1.0.15 [image: image.png] I also installed Microsoft Office Add-in debugger

- I can create a new project using yo office and use the vs code to debug (Excel Desktop (edge chromium) configuration) just fine. Are you trying not to use VS code for debugging? No absolutely not! I would love to have the full step by step debugging I

am used to have with Visual Studio. But here there is also something strange. I can start a debug session with VS code [image: image.png] and the system says that debugging has started but it kills the node sever and then I get this [image: image.png]

- Can you give us some specific steps of what you are trying to do? First I run NPM start:

then attach debugger, I will then see this screen for 5 seconds:  and then it disappears and it takes up to one minute before I can click the DevTools again. kind regards,

…

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1852 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADJROAI6JPVBHGKJEABNGQLTNGYWHANCNFSM44JJFAFQ> .

[millerds]

Thanks. I'm getting a better picture, but all the images seems to be missing.

[millerds]

I have been able to repro the same behavior. I'm not familiar with the debug comment in the add-in menu so I'm trying to find some one who is.

In the mean time, you can try the VS Code debugger instead of the dev tools. Before you do this you'll need to correct some dev cert problems triggered by using the dev tool menu (possibly related to your problem). First delete the 'C:\Users{username}.office-addin-dev-certs' folder and then run 'npx office-addin-dev-certs install'. After you do this you can debug using VS Code instead of dev tools

Instead of running npm start, in VS Code switch to the debug tab, select "Excel Desktop (Edge Chromium)" form the drop down, and then click the play button next to the drop down. This will do the same thing as start does, but also attach VS Code as the debugger so you can set break points directly in your code.

You can also create a debug config that will attach without automatically starting excel using the gear button on the debug tab, but I'm not going to get into creating a custom config here.

[K-Kumar-01]

@millerds
I am unable to get the dropdown options that are shown on your screen. Is there any specific procedure for these dropdowns to be shown?

[millerds]

OK . . . looks like you're project was created with a version of the template that didn't include the debug configuration that are now part of it. You can add them by clicking the link that says create a launch.json file (looks like that is what you clicked) and picking anything from the list there (we'll be replacing it anyway). When the file opens, replace the item in the configurations array with this:

{
  "name": "Excel Desktop (Edge Chromium)",
  "type": "edge",
  "request": "attach",
  "useWebView": "advanced",
  "port": 9229,
  "timeout": 600000,
  "webRoot": "${workspaceRoot}",
  "preLaunchTask": "Debug: Excel Desktop",
  "postDebugTask": "Stop Debug"
}

The dropdown from my image is populated by the items in the array in this config file. If you create a new project using yo office you'll find the json file there with all the options seen in my screenshot.

[K-Kumar-01]

OK . . . looks like you're project was created with a version of the template that didn't include the debug configuration that are now part of it. You can add them by clicking the link that says create a launch.json file (looks like that is what you clicked) and picking anything from the list there (we'll be replacing it anyway). When the file opens, replace the item in the configurations array with this:

{
  "name": "Excel Desktop (Edge Chromium)",
  "type": "edge",
  "request": "attach",
  "useWebView": "advanced",
  "port": 9229,
  "timeout": 600000,
  "webRoot": "${workspaceRoot}",
  "preLaunchTask": "Debug: Excel Desktop",
  "postDebugTask": "Stop Debug"
}

The dropdown from my image is populated by the items in the array in this config file. If you create a new project using yo office you'll find the json file there with all the options seen in my screenshot.

@millerds
Thanks a lot. It seems to work though I have some doubts.
I have to run the following commands npm run dev-server and npm run start to start the dev server and open the word add in respectively.
If I do not do it, a window pop up appears.

I am not quite able to understand. Is this the intended behavior?

Again thanks a lot 🙏. I think I might be able to continue the work now.

[millerds]

Looks like there are other pieces that need to be added to your project (the config includes some pre and post task that it's trying to do). I would create a fresh vanilla project using "yo office" and then look at the stuff in the .vscode folder and maybe the package.json file (possibly some others I'm not sure of). See the differences between those filed and yours and then add what you need to improve your experience (the error suggests the .vscode/tasks.json file has some stuff you need).

[handofthecode]

I am also not able to inspect the taskpane without the taskpane crashing and restarting. It works fine with macOS/Safari, but crashes on Windows 10/Edge Chromium. I've tried generating fresh projects with the yo generator and they have the same issue. The debugger works within VS Code, but it's an issue to not be able to inspect the DOM.

[millerds]

While we are working on a fix for the devtools/webview2 crash you can use this workaround to use the devtools instead of VS Code:

1. After running "npm start" open an Edge browser tab
2. Type "edge://inspect" for the url and wait a few seconds after the page opens
3. You should see a remote target section get populated with the add-in URL and a few links under it
4. Click the 'inspect' link.

You should see the devtools load in a new window with a simulation of the live taskpane running office. The simulation is connected to the live pane and click it will trigger the same action in the live taskpane.

[G00golplex]

The Workaround works fine without a crash!

[handofthecode]

@millerds, I believe I am seeing the same issue when trying to debug IE11 in visual studio. Is there a workaround for this environment as well?

[handofthecode]

Never mind. I was able to debug using F12: https://docs.microsoft.com/en-us/office/dev/add-ins/testing/debug-add-ins-using-f12-developer-tools-on-windows-10

[Techno11]

I am experiencing the same issue as G00golplex originally brought up, which Aniruddha-Shriwant captured perfectly in their video earlier. I'm experiencing this in outlook, and the workaround above shows the exact same behavior. When I launch edge chromium and navigate to edge://inspect/#devices I can click "inspect", but roughly 5 seconds later the devtools "disconnects" and the outlook addin crashes. I have gone back to the legacy debugging in VS code, but VS code is not my primary IDE, so its slightly annoying to have to have it open separately. I'd also like to be able to use the dev tools to debug network requests, something I'm not aware of being able to do in the vscode debugger.

[millerds]

This issue should be fixed with the July updates to Edge