MS Build SK120 Microsoft Edge DevTools for web developers

Key Takeaways

hi i'm rachel simone weil program manager for Microsoft edge dev tools in this session I'll be sharing how the edge browsers recent switch to the chromium platform has benefitted not only developers who use edge but web development across the entire chromium browser ecosystem and community I'm going to give a quick tour of the new dev tools followed by a deeper dive on some new features as well as a preview of upcoming features so in case you hadn't heard about a year and a half ago Microsoft announced its intent to switch edge to the chromium platform and of course we've delivered on that promise since then not only do we have our insider channels like canary and dev or you can try the latest daily or weekly builds of edge but we now have a stable release of edge which is our sort of production release when we made the switch to chromium we adopted the chromium dev tools as well and this choice had a lot of great benefits the chromium dev tools are very robust many developers are already familiar with these dev tools if they've used browsers like Chrome in the past but we also saw this as an opportunity for us on the edge team to build on and contribute to this awesome platform out in the open with the community and focus on making it even better for everyone understanding you know what isn't working for users and really with the goal of moving the web forward for everyone so Microsoft contributors have committed over 600 changes backup to chromium and that's in the dev tools alone these changes represent things that benefit all chromium based browsers not just edge so it's a really exciting shift and an exciting time for dev tools all up so let's jump in and play with the edge dev tools so I've just installed the dev or weekly build of edge and I'm going to go ahead and pop open the dev tools since this is a new install I'm going to go set things up just the way I like them I'm here in settings and I'm just taking a look at the experiment section here this is a place to look for new tools for the release obviously do what you're comfortable with sometimes these features are unstable but it's a great way to get up and running with the latest features I also like to have the dev tools in dark mode so with this setting I have a really nice color theme that matches the default dark theme of vs code which is really nice so if you're a legacy edge dev tools user there are a few key differences between the old and new edge dev tools but for the most part we have pretty good feature parity and of course a number of new features that well as well so let's dive into a quick tour so I want to start here at the top left of the edge dev tools we have the ever popular element selection tool but next to that at the top right we are sorry excuse me top left we also have the device toolbar which is where you'll now find device emulation options for testing your web app against multiple device orientations and screen resolutions and as we move along right here you can see a number of tabs performance memory all of this good stuff but there are actually even more tools that you can pop open by going to this menu at the top right then selecting more tools and perusing the options here for example here's Network conditions where I can set a custom user agent string which is super handy for debugging so there's a lot to dig into here so if you're new to dev tools head over to AKMs to help you get up and running or to give you a deeper dive into many of the the new features of edge dev tools we also have a what's new tab directly in the dev tools to help you keep up to date on the latest changes fixes and new features so you might be wondering okay now that edge is based on chromium dev tools or edge dev tools is based on chromium the dev tools what exactly has edge been doing to contribute back to the platform so that's what I want to talk about next as I mentioned earlier the edge dev tools team has made over 600 commits back up to chromium those include bug fixes that you I am movements and features from the chromium backlog where we thought you know hey this would make a big difference to developers let's go and fix this so this past year we've really zeroed in on improving developer experience because for many web developers dev tools is a big part of your dev environment and it should help you be productive it shouldn't get in your way dare I say it should be a delight to use so I want to talk a little bit about how our team approached improving developer experience so first of all I think to date now around 200 of Microsoft's contributions back to the chromium dev tools in the past year have been around accessibility improvements and those are guided by the w3c s web content accessibility guidelines accessibility is a huge focus at Microsoft broadly and it's something that the edge dev tools team cares a lot about because we want everyone to have access to developer technology and anywhere we can eliminate accessibility barriers we're definitely going to do the work to make that happen so one thing I do want to demonstrate is what it looks like to navigate the dev tools without a mouse so as you can see here I'm actually moving between different tools I'm accessing details all just by using the keyboard and this is great for many of our users who don't or can't use a mouse but this is actually just one way that we addressed accessibility and productivity in the dev tools we've also improved compatibility with screen readers which read text aloud and other assistive technologies we've also added multiple ways to interpret data in the dev tools for example not just by color or by motion but with multiple modalities and abilities in mind we've also made dev tools look great for those using Windows high contrast mode which is another accessibility feature in fact this change is so recent that it's actually only in edge connects build you can see you can see what this looks like an older build where high contrast is not quite right you can see the UI isn't in hike tres mode and some things look a little bit broken so like I said our change is so recent that it's just an edge canary now so it will be rolling out to future releases soon so let me just pull up edge canary and when I open up the dev tools you can now see that the UI really looks more like you'd expect with the menus and the UI and really nice high contrast so this is just another example of a feature that's great for improving accessibility I'm personally really proud of the work that we did and making dev tools mark assessable because it really embodies our spirit of improving the web developer experience for everyone and we're going to continue to listen to developers and make these tools even more accessible and inclusive so speaking of accessibility and inclusivity I want to share another feature that the edge dev tools team recently put forward and that's localization or the ability to use the dev tools themselves in the same language as the edge browser so I'm going to open up the edge browser settings and actually set my browser language to Japanese so when I restart the browser you can see that the language is now set to Japanese very cool but the future I'm going to show actually is that when I open the dev tools now you'll see that they are also in Japanese which is really cool and all of the you know menus and things like that are actually translated now of course if you prefer to have your browser in one language and keep the dev tools in English you can certainly do that as well and I'll show you to do that you would just go to the settings and if you can read these options uncheck this box to disable browser matching and now we're back in English so before I move on this is probably a good time for me to go back to my edge browser settings and change the language back to English as well so localize the ability or the sort of underlying engineering work that enables localization is something that we again contributed back to chromium though it's really up to each browser to decide what languages a translations they want to provide so for edge we English French Korean Japanese Italian Chinese simplified and traditional Spanish Portuguese German and Russian as options for the dev tools so these are just a few examples of features in the edge dev tools that our team has built out in the open to empower you developers to go build what you want to build so I love it so now that you've seen some of the most recent features of edge dev tools I want to give you a preview of what's coming next in edge dev tools so what you're about to see is a collection of prototypes and works in progress but you know it's Microsoft build I'm just too excited not to share things so for those of you who are early adopters you like to tinker and try things while they're in preview again I do really recommend grabbing the nightly canary build of edge for your personal machine to keep an eye on new features to keep an eye on the experiments section in the dev tools settings as well that's really gonna be the place to watch if you want to early adopt and try new features as they become available and it's not just about trying features earlier but also you're able to provide early feedback which our team will use to iterate on and improve the future before it's released broadly this is kind of reflective of a new way of working for the edge dev tools team this idea of iterating on features out in the open starting with experiments and our insider builds before rolling out lightly and we really see that process as starting with its you know listening to developers understanding the pain points then we go build a solution put it out to our early adopters adjust the tools based on real user feedback and kind of like rinse and repeat until the future is great and this is all you know to keep at a pace that matches the sort of rapid evolution of the web because like I know it's changing all of the time so a really great example of this rapid prototyping approach came with 3d view a new feature in edge dev tools which allows you to visualize the DOM and CSS z-index this is really cool as a kind of visual debugging tool I can zoom in I can isolate elements I can look at the layers one by one this is an example of a feature that started as an experiment we got feedback we went and improve the controls and added new configuration options and it's something that we're continuing to improve we're we're thinking about how we can create more comprehensive and integrated visualization tooling so thank you to the many of you who are using this feature to debug your Web Apps now please keep the feedback coming and we're excited to have you try this tool as we continue to improve upon it so since we've been talking a lot about improved developer experience and making the dev tool is a great place to spend time it seems only fitting to share some things we're working on to allow you to further personalize the dev tools and help you be more productive so one feature that we'll be releasing soon is the ability to customize keyboard shortcuts in the dev tools this is one of the most voted feature requests on chromium dev tools backlog and the edge team was excited to take it on custom shortcuts are great because you can set up the dev tools the way you want them or have the shortcuts match other developer tools you use like vs code so you aren't context switching as much and here you can see that drop-down menu at the top right they'll let you switch between the dev tools default shortcuts and the shortcuts you're familiar with into vs code and a future release will actually allow you to set up custom keyboard shortcuts as well so our our team is also exploring other ways to customize how dev tools looks how they're laid out and this is all about letting you focus on the tools and workflows that you care about the most so speaking of highly requested features this is another one CSS grid tooling is coming to chromium dev tools so excited for this we'll be rolling this out in a number of small iterative releases that include things like improved on page overlays we will also be including the ability to easily identify grid grid items in the elements pane and also giving you these kind of like configurable views to zero in on parts of your grid layout that you need to debug like columns or you know if you just need to understand grid gaps better and we'll also be looking at extending these tools to cover just grid but also flexbox layouts as well one thing I love about working on this feature is that engineers designers and PM's from both Google and Microsoft have been working side by side on grid tooling right from the beginning and it's really amazing to take part in this cross company sort of open source collaboration that is going to bring grid tooling to all chromium browsers so I want to switch gears and talk a little bit about testing one of the more tedious but highly necessary parts of being a web developer is answering the question does my site look the same everywhere meaning you know on a variety of devices browsers configurations operating systems and assistive technologies one upcoming dev tools feature will make it much easier to test how your site will look to users of Windows high contrast mode so here from the rendering tab I'll be able to preview what my site will look like for users of high contrast mode without me having to actually be on Windows and change my OS to high contrast mode like I did earlier we've also heard from you that accessibility and cross browser compatible tools web hint is an open-source tool that aggregates best practices for the web from trusted resources like mdn and provides actionable feedback to help you actually fix the issues web can let you know if certain features aren't available in a given given browser version or if you're missing key accessibility requirements or other kinds of helpful feedback and it provides information on how to actually fix the issues web hint feedback is surfaced in a new tab shown here at the bottom right called issues which collects relevant information and notices in one kind of centralized place without cluttering up the console so the issues panel is rolling up now and web hint integration will be available soon as an experiment in edge canary finally we've also heard you ask for better network tools we heard you and you said you wanted more visibility into the behavior of service workers you want to fetch event details like execution time and error information and you want to be able to explore api's and edit we play Network requests so the network debugging experience is another place where we're looking to make some improvements through the same sort of rapid iteration approach that really feels right at home on the chromium dev tools platform so I hope you are as excited as we are about what's new and what's next for edge dev tools if you're interested to see other tools beyond the browser that help you develop debug and deliver awesome Web Apps check out my other video on end-to-end web development tooling which shows how edge works great with other tools for remote debugging automated testing software vs code and more and if you haven't already please do go try the latest edge and the new edge dev tools you can download it at microsoft.com slash edge stay tuned to our canary or dev builds to get the very latest these channels also have a feedback button directly in the dev tools so you can send us ideas thoughts feedback we really do read through all of it and it's super valuable you can also find us on twitter at edge dev tools reach out let us know how you're liking the new edge and the new edge dev tools or what we can do better all of us on the edge dev tools team really appreciate your feedback thanks for watching and happy coding you