Visual Studio Code Debugger Extension

Key Takeaways

[Music] 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 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 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 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 [Applause] [Music] 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 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 so I'm gonna get the data for the US 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 the first time around so let's do that again cuz see it just reloaded there 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 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 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 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 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 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 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 all 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 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 [Music]