[0:00]Hello, everyone. My name is Matt Mclane, and I'm a program manager on the Microsoft Edge team. Today, I'm excited to share some new features that are rolling out to the DevTools that are going to help you be more productive when building web experiences. So let's take a look. First, I want to show you some changes that we've made to the network panel. For a long time, the network panel has been a great way to understand the network activity that your web page is making. When you're first building a new web experience, you typically have an idea of the resources that you need and the path that they're going to take. However, as your web experience evolves, it becomes more dynamic, and it becomes more difficult to understand exactly what network activity is occurring. To help with this, we've updated the network panel with a new overview pane that will allow you to quickly understand the sources of the network activity. So let's take a look at it. So I'm currently on a web page, and to get started, I'm going to open up the DevTools, and I'm going to navigate to the network panel. Next, I'm going to make sure that the overview pane is enabled, and then I'm going to refresh the page. Now, as the page refreshes, you'll see that a new overview pane has appeared. The overview pane is separated into two different charts. On the top, we have the number of network requests based on their type, and on the bottom, we have the domain of the network request. You can quickly identify sources that are making network requests. So let's take a look at the top chart. So here we can see a breakdown of the number of requests by their type. As I hover over a section, you'll notice that the requests in the network table below are now filtered to match the type that I'm hovering over. Additionally, I can click on the sections to pin a specific filter. Now, let's take a look at the domains chart. The domains chart will show you a breakdown of the number of requests by the domain that they're being requested from. Similar to the types chart, when I hover over a specific domain, you'll see that the network table below is now filtered to show only requests coming from that domain. You can also click on the sections in the domain chart to pin a specific filter. This makes it really easy to filter to a specific domain or even a specific request type. Additionally, if you'd like to combine multiple filters, you can select different parts of the charts, and it will combine those filters together. Lastly, I want to show you some new filters that we've added to the network panel. We've added a new has response body filter, which will allow you to see all the requests that have a response body. We've also added a new larger than filter, which will allow you to specify the size of the request that you'd like to filter by. All of these features combine to make a new and improved network panel that will help you be more productive. Next, I want to show you some new features in the elements panel that are going to help you when debugging layout issues. We've introduced a new accessibility tree, a new flexbox overlay, and a new grid overlay. First, let's take a look at the new accessibility tree. The accessibility tree is a new way to understand the accessibility of your page. This tree will allow you to easily understand the accessibility hierarchy and how your custom ARIA attributes are affecting the accessibility of your page. So let's take a look at it. So I'm currently on a web page, and to get started, I'm going to open up the DevTools and navigate to the elements panel. Next, I'm going to select the accessibility tab, and now a new accessibility tree has appeared. Now, the accessibility tree is a full representation of the accessibility hierarchy on your page. You can expand different nodes to see what children elements are represented in the accessibility tree. When I select a specific node in the accessibility tree, you'll see that the corresponding element is also selected in the Dom tree. Additionally, when I select a specific Dom element, you'll see that it's also selected in the accessibility tree. You'll also notice that there's a new accessibility pane in the styles tab. This pane will show you the accessibility properties and the computed accessibility properties for the currently selected element. This makes it really easy to understand what the accessibility of your specific Dom element is. Next, let's take a look at the new flexbox overlay. The flexbox overlay is a new feature that is going to help you debug flexbox layout issues. Similar to the grid overlay, this will allow you to visualize how flexbox is laying out your content. So let's take a look at it. So I'm currently on a web page, and to get started, I'm going to open up the DevTools and navigate to the elements panel. Next, I'm going to select the Dom element that has the flexbox style applied to it. Now, you'll notice that in the styles tab, there's a new icon next to the display flex property. As I click on this icon, a new flexbox overlay has appeared. Now, this overlay will show you exactly how flexbox is laying out your content. This is great when trying to debug complex flexbox layouts. Lastly, I want to show you some improvements that we've made to the grid overlay. For a long time, the grid overlay has been a great way to debug CSS grid layouts. However, with complex grid layouts, it can be difficult to see which grid lines correspond to specific grid areas. To help with this, we've updated the grid overlay with a new feature that will allow you to visualize the grid areas. So let's take a look at it. So I'm currently on a web page, and to get started, I'm going to open up the DevTools and navigate to the elements panel. Next, I'm going to select the Dom element that has the grid style applied to it. Now, you'll notice that there's a new icon next to the display grid property. When I click on this icon, a new grid overlay has appeared. In the Dom tree, you'll also notice that there's a new icon next to the Dom element that has the grid style applied to it. As I hover over each individual element, you'll notice that the grid overlay is now highlighting the corresponding grid areas for each of the elements. This makes it really easy to identify which elements are in which specific grid areas. All of these features combine to make a new and improved elements panel that will help you be more productive. Lastly, I want to show you some new features in the sources panel that are going to help you debug issues. We've introduced a new JavaScript profiler and an improved auto-complete. First, let's take a look at the new JavaScript profiler. The JavaScript profiler is a new way to understand the performance of your JavaScript code. You can start a new recording, interact with the page, and then stop the recording, and you'll get a full flame chart of all the JavaScript functions that were called. So let's take a look at it. So I'm currently on a web page, and to get started, I'm going to open up the DevTools and navigate to the sources panel. Next, I'm going to open up the JavaScript profiler, and then I'm going to start a new recording. Now that I've started the recording, I'm going to interact with the page. Once I'm done interacting with the page, I'm going to click stop. Now, a new flame chart has appeared, and as I zoom in, I can see a full breakdown of all the JavaScript functions that were called. This is great for debugging performance issues. Lastly, I want to show you the improved auto-complete. We've improved the auto-complete in the sources panel to now include more contextual hints. So let's take a look at it. So I'm currently on a web page, and to get started, I'm going to open up the DevTools and navigate to the sources panel. Next, I'm going to open up one of my JavaScript files, and I'm going to select a place where I want to add some code. Now, as I start typing, you'll see that a new auto-complete menu has appeared, and as I go through different options, you'll notice that the hints will update to match the specific context. This is great when trying to debug complex issues, or when trying to write some new code. All of these features combine to make a new and improved sources panel that will help you be more productive. These are just some of the new features that are rolling out to the DevTools. I hope you enjoyed learning about some of them, and I hope they help you be more productive when building web experiences. Thank you.