MS Build SK121 End-to-end web development with VS Code and Microsoft Edge

Key Takeaways

hi i'm rachel simone weil program manager for the Microsoft edge dev tools the edge browser recently adopted the chromium platform and with it the chromium dev tools on the edge dev tools team we know developer tools include and go beyond the edge browser so that's why we develop a number of companion tools then help you stay productive throughout the development debugging and delivery of your code in this session I'll be doing some demos of these tools including vs code extensions remote debugging and testing and automation tools so you can have confidence in your process from beginning to end and I really think of these tools as mix and match you know use what's useful to you based on your workflow and your needs I made it just on github to collect links to all the downloads tools and documentation mentioned in this video so I will mention it a few times throughout the talk but for those who need it right now the link is a kms slash dev tools 2020 so if you're new to chromium dev tools or want to hear more about what's new and next in the in browser dev tools in edge check out my other Microsoft build session which focuses entirely on using the new in browser edge dev tools so ok enough talking let's kick off some demos so we are going to demo with a basic web app this one happens to be a to-do app built and react though that part isn't too important the whole idea here is to kind of model the phases of the developer lifecycle right so I'm gonna go ahead and start up my web app and we can see what it looks like so far okay very exciting let's go ahead and add some - duze obligatory part of any demo so ok cool we are kind of at the beginning of our developer journey here this is the develop phase right we're writing code and so I want to go ahead and demo some vyas code extensions that work agree in combination with edge and that helped you kind of at the early phases of the web development lifecycle and the first vs code extension that I went to demo is the web hint extension so web hint is an open source project under the open J's foundation and its contributors include folks from edge from Firefox from the open source community at large with the goal of collecting best practices for the web and integrating them into developer tools so this extension well it's not maintained by Microsoft several of the project's contributors myself included come from the edge dev tools team because we understand how challenging it can be to keep on top of accessibility cross browser compatible UA recommendations and so on so the web hint vs code extension collects best practices using tools like X core data sets from mdn and so using this vs code extension you're going to get that feedback directly in your IDE well before you're at the point of deploying your app so you know the idea here is you want to build an app where accessibility or cross browser compatible development process so you can see here I have this red squiggly and when I mouse over it I'm actually getting information letting me know that I'm missing some content and if I if I open up this problems pane here just like a linter you're gonna see it's giving me real-time warnings about things in my code base that I need to fix and so yeah I'm seeing here that my link should have a rel attribute value that includes the no refer keyword and there was another one about no opener so I actually got feedback on how to fix these problems and you can see as I fix them they're actually going away in the problems pane now so this is using the baseline recommended set of hints that come with the extension but you can actually configure what hints trigger much like a linter with a custom hint RC file so you can learn more about the custom configurations and hints all of that good stuff that web hint io and hey if you have ideas you want to contribute this is an open-source project you can find it on github at web hint io so as you kind of start moving between coding and debugging I think this next vs code extension will be really helpful so you know at this point in the development process you would typically open up the browser look at your app open the dev tools go back to vs code and that is a totally valid workflow but with the new Microsoft edge tools for vs code extension you can connect to a running instance of edge and see and interact with the browser and the dev tools elements pane right inside vs code so let me demo this to show exactly what I mean so I have just started up my web app again and I'm gonna go ahead and open up the extension and connect to my web app so now here's our web app great and when I switch back to vs code we can actually see oh let me get some more real estate here but we could actually see the app and the elements pane from dev tools all without leaving vs code oh and this is really awesome we can interact with the app we can inspect everything you sort of expect from the elements pane and dev tools because I have source maps set up in this demo I'm able to do some really cool back-and-forth here so let me make this a little bit bigger so it's easier to see so here when I click on the sass file I'm actually taken to the correct line envious code and I can go in and let's say like change the color of this header and when I do that and hit save then I should actually see that update in the web app but then when I switch back to vs code I'm actually seeing it update as as it in that view as well so this is really cool you get the best of both worlds you know you can interact with your web app as if you were in the browser without leaving vs code this is neat features and here is well kind of like setting breakpoints and then being able to interact with them so this extension is currently called elements for Microsoft edge we're actually in the process of consolidating and renaming some of our edge vs code extensions so that you can get all the great features in a single vs code extension so be on the lookout for it under its new name which is Microsoft edge chromium tools for vs code we'll also be adding new functionality like network debugging tooling as well so a lot of this you know we've talked about is really cool for debugging on your own machine but there might be times in this lifecycle when you want to do some remote debugging on a specific device and that's something else you can totally do with edge so for the purposes of this demo let's go big I want to try my app out on a surface duo which runs a version of the Android operating system I don't actually have a surface duo but I do have a surface do emulator so all I need to do is once I have the emulator set up go to the edge inspect page on my desktop and there's nothing here yet but once I open up edge in the emulator I'll be able to see it so here's a quick video demonstrating that on one of the Dewar's screens we're going to access the apps drawer and open up the Microsoft edge Android app which you can get from the Google Play Store and now because our web app is still running on localhost I can actually open it in the surface duo emulator and will be able to interact with it you know we'll see exactly what we saw on the desktop we can go ahead here at this point and like add another to do if we're so inclined so yeah let's do this you'll see that the duo emulator is now listed as a device in an edge inspect and we can go debug all the tabs running in the Microsoft edge app and this same idea would work for pwace as well so now we've got our web app we've got the dev tools docked to the right with screen casting enable so we're casting our web app from the surface duo emulator to our desktop version of Microsoft edge which is really cool now I can use dev tools to debug my web app I'm running an Android on the surface duo emulator so of course I showed this with a service duo emulator because I don't actually have a service duo it's not out but you could absolutely remote debug with the device itself you could do remote debugging on Windows 10 or Windows 10x devices via the remote tools for Microsoft edge up so for more on that check out our remote debugging ducts again that link is a KMS slash dev tools 20/20 so remote debugging of course can be really useful in special cases or for in-depth device specific debugging but what about more kind of broad cross-browser testing that we typically do as we move closer to the delivery phase of the web development lifecycle we've heard this is a major pain point during development so I want to share some tools for automated testing with Microsoft edge a selenium webdriver is one tool that you can use for this so in my repo I've got this selenium 3 test and it uses the selenium tools for edge plugging so we're setting use chromium property to true we've set up the the path for the edge binary and then we can go ahead and run our script this is an NPM script that installs selenium 3 and the plug-in and then once that's all set up we can actually watch selenium run our test here it is it's launched Microsoft edge it's going to test that a new to do is successfully added yeah we've got another test in here so you'll see hopefully both of these tests will pass and yes awesome so there's also now a selenium for available in alpha that has built-in support for the new edge browser so if you're able to upgrade or you're interested in checking that out the process is actually really similar so you'll see I have an NPM script here in my code base that installs selenium 4 via NPM one benefit is that selenium tools for edge again is built-in so you don't have that extra pip install step so once I run this it's gonna run the new selenium and then it's gonna actually run our tests and this will look really similar to selenium 3 and hopefully again we'll see that our tests pass so thrilling all right excellent so next up I'll be showing playwright which is a cross browser automation library that enables you to run tests not only in chromium based browsers like Microsoft edge and Google Chrome but also Safari and Firefox so in this example I'll be using just as the test runner and playwright to automate edge again similarly we're going to you know set up the path to edge here I've got the path right there normally we would put this in headless mode but for the purposes of this demo I've set headless to false so I will go ahead actually first I need to restart the web app and then let's go ahead and run the test now and we should see a playwright launch edge here in a moment excellent navigated it ran really fast but you'll see that both of these tests and the test suite actually pass which is awesome so for the automating of other browsers it would be just as easy as adding a few lines to set those up for those other browsers so if you're interested to go check out play write the github repos on github would love to hear how this is working for you so yeah I think these are really cool they're really it's really great to have automated ways to run these tests you know drop them into your CI Siddhi processes so you aren't doing a kind of scatter shot works on my machine type testing so we've talked a little bit about you know the developing the debugging we're kind of moving for the end of the developer lifecycle with delivery I know if Apps only took ten minutes to build right but let's talk a little bit more about CI CD and the delivery phase so I want to show another great tool for CI CD which is web hint wait didn't we already talk about web him we did so I mentioned WebP and earlier when I was showing the BS code extension but the web hint team has actually not only published the vyas code extension but also a browser extension and a CLI and I want to talk about the CLI for a minute because the same great insights that you're getting from BS code about you know things like accessibility and CSS features you can also get those from the web hint CLI which will give you sort of a readout of your results so you can npm install hint to your machine and run it locally you can even run npx hint which is what I'm demoing here just to kind of prove that it works so all I've done is typed npx hint and the URL which for our app is localhost 4200 now that it's started you're seeing the automation running and it will close the browser so now I have this readout and it found some very cool things that I forgot to fix in vs code and you can see here that it's also created a report for me in HTML format which is really cool and of course like the point here is if you can do it in a CLI you can automate it with Azure pipeline's circle CI Travis any system you might be using right alongside your lentor so you know imagine having the ability to fail a build because your navigation menus weren't accessible or because you have some code that isn't compatible with say ie 11 so that to me is really cool so I hope you've enjoyed this tour of what the edge dev tools team is working on beyond the whether that's around automation and testing support remote debugging vs code extensions all these things that help you move between the different tasks and needs in your web development lifecycle so the call to action here again go check out a kms dev tools 20 20 where I collected links to all the resources and tools I talked about in this session as always the edge dev tools team really wants to hear from you we want to know if these tools are working for you and if not how we can help make them better if you're using edge canary or dev use the feedback icon in digital's to send us direct feedback we're also on Twitter at edge dev tools thank you so much for watching and happy coding you