Home
Contribute Contact Us Browse all meetings
Home Contribute Contact Us Browse all meetings
Microsoft 365 Community / Office Add-ins / 19 Jun 2020
Microsoft 365 Community / Office Add-ins / 19 Jun 2020
Previous Meeting Next Meeting
⏯
Add meeting Rate page Subscribe
youtube image
►
From YouTube: Visual Studio Code Debugger Extension

Description

The Microsoft Office Add-in Debugger Extension for Visual Studio Code allows you to debug your Office Add-in against the Edge runtime. Check out this video to see how.

Download the VS Code extension https://aka.ms/AA8qusm

This demo was taken from the June Office Add-ins community call
View the full call https://youtu.be/RGSAYrQB89M

Stay connected
Twitter https://twitter.com/microsoft365dev
YouTube https://aka.ms/M365DevYouTube
Blogs https://aka.ms/M365DevBlog

A

My name is Courtney Owen I'm, an engineer on the office platform, extensibility team and specifically I work on dev X features, developer experience features so over the last quarter. We've shipped a couple really cool features, one a misty new debug extension for vs code that allows you to debug tasks, pane add-ins in Visual Studio code, and you can develop and debug all in the same tool, something that wasn't possible until this extension was shipped to the PS code marketplace a couple weeks ago. So it has 217 downloads right now, which is pretty good, I.

A

Think for a couple of weeks, I'll give you a little history on this. If you were to be developed in a ad in testing add-in in the past, you would have too, if you were authoring it in vs code. You had no way to debug it in vs code as well. You would have to either debug it online in chrome, dev tools or use this tool called edge, dev tools and doing so create a very disjointed experience. You had to hop back and forth between authoring and debugging.

A

With this new extension, you can author and debug all in one tool, so I'm just gonna quickly, demo how this works. I already have it installed here, but you can find it in the store and your if you just type an ad in it'll, be the first one that pops up. So what I have here is a little project, a same project, I created called Covent tracker and basically it queries, active koba data and will show you a chart using office j s, we'll kick it off here and what this is going to do it.

A

This will automatically side, load, side, load, meaning launch the host application register the add-in, and then it will automatically attach the debugger. So I'll click this and I'm gonna go over to my code here and I already have a couple breakpoints set and we should see Excel launch in a second. This is where you're, seeing the sluggishness of my machine so we'll play some elevated music. While this machine.

A

Okay, so we've got my test: faint, a didn't loaded there. Now I'm gonna go back to vs code and this will attach in a second there were attached. So you see the progress bar stopped now I'm going to go back to the add in here, and so, if I can just sort of give you an idea in the past, I could have been coding this and then, if I wanted to bug it, I would either have to open this edge, dev tools and then pick this I'm not gonna open.

A

It now pick this covert tracker and then I could debug it that task pane add-in, but it required going back and forth between two tools. So here I can debug encode and what I'll show you is I can actually make changes and they're picked up immediately.

A

So I'm gonna get the data for the US.

A

So we hit our break point there. So now, if I hover over this you're gonna see undefined and if I f10 through it- and we look here data now we have the US data, so I'll carry on down through and I hit another breakpoint here and later on. I'm gonna change this to white the background to white. So you can see that I can author and still keep my debug session attached. So then we'll go through this again, okay by country and I'm, going to change this to actually should have changed it.

A

The first time around so.

A

Let's do that again, cuz see it just reloaded there.

A

Okay and now the other thing I'm gonna do is at runtime I'm, just gonna change the title of this chart in the watch window and I'm just going to call it demo and you'll see that that watch setting gets picked up.

A

And we'll go back to the chart and we see that the background is now white and the title is demo, and so the cool thing is that I can author the code make changes at run time.

A

If you have your dev server running it'll automatically pick up those changes and build automatically without losing your debug session, and you can do all the sort of standard debugging stuff that you used to so that's available in the store now couple of little caveats is you have to run vs code as administrator and that's because we need permissions to be able to inject our debugging code into the edge process and then the other thing is that this will currently only work if you're using edge webview in the very near future, we're going to switch to using edge chromium webview, and so the debugger once that happens, will not be able to attach to the task pane process.

A

We are planning on supporting that I. Don't have a timeframe on when that's gonna happen, but we are planning to support edge chromium. We also have a tool which we were gonna demo today that will allow you to switch the webview from edge to edge chromium to even ie. So if you know you were running your webview in edge chromium, you still want to use this extension. You could use that tool just to switch back to edge if you're running edge chromium. So that's about all I have and.

B

Thank You Courtney that will be emailing that webview switcher and the next months community hall. There are a few questions for you if you have a second Courtney sure so requested from Jack. Is there ETA for the Mac office apps and will this support debugging projects built with bundles like web pack for react review.

A

Yes, so what this supports up currently right now, web pack and TSC typescript compiler, so what what I'm demoing right now is web pack- and you know web pack- we kind of inherited this code from the edge team and one of the things that the edge team did not support with web pack.

A

So I did a lot of work to get web pack support in view I'm, honestly, not sure if, if that is supported, I could check after this and see a second question about Mac I, don't envision Mac being supported in the very near future. This the code base is very Windows centric, and that would require quite a bit of work that I don't see us having allocated at this point in time.

A

All.

B

Right Thank, You Courtney. We also had a couple questions around other IDs or in particular just Visual Studio. Will there be any some plans to support those so.

A

Visual studio right now you can debug tests faint add-ins that run in IE right now in Visual Studio. Currently, if you were running in IE webview in your test, pain, add-in, there's actually a little button that you can click that says like open and Visual Studio, that's not supported in edge, nor will it be supported an edge chromium I believe so in a visual studio has support for ie I believe doesn't for edge. Maybe it will for edge chromium.