Back in October, Project Spartan was merely a demo and a few hushed rumors. More information about Project Spartan became available in the January unveiling of Windows 10. It wasn’t until March of this year that Project Spartan became a reality for users. With the release of a Windows 10 Insider build on PCs and phones, users finally got their hands on Microsoft’s vision of the future of web browsing. In the last two weeks, Microsoft has been flooding developers with information about the Edge browser with back to back conferences. As the developer conferences come to a close, we’re starting to see the vision Microsoft has for developers and their browser finally take shape.
In a blog post following the end of Microsoft’s Ignite Conference, the Microsoft Edge posted some highlights of feedback-driven improvements to dev tools for the browser. According to the blog, devs can access the Microsoft Edge F12 developer tools by going to the settings menu and selecting “F12 Developers tools.”
Network Tool
After hearing feedback regarding the ease of use of the network tools for the new browser, Ruben Rios, Program Manager for Internet Explorer and his team worked to address them. First, the team began with a redesign of the network tools in order to provide a cleaner experience for devs. Second, the team added a Start&Stop toolbar button to give devs a bit more flexibility when dealing with HTTP-based traffic. The redesigned toolbar also allows devs to zero-in on specific types of traffic by surfacing the “Content type filter” button. This button now supports multiple filters that allow devs to skip past dozens of unrelated network calls. Once filters are set in place, devs will have an at-a-glance view of captured traffic while also being provided information about network errors, number of requests, response data transfer sizes, and download times. The Edge team also included quick access to an export button in order to share tracked information in a JSON HAR file.
Other toolbar additions include:
- Always refresh from server – This allows you to ensure you are testing against the latest version of a resource from the server instead of a potentially locally cached file that might be outdated.
- Clear cache – This ensures the browser’s cache is clear before loading the page and ensures a clean network session.
- Clear cookies –This provides you a shortcut for clearing the browser cookies, without having to open the browser’s settings.
- Clear entries on navigate – This allows you to focus only on the resources that were loaded during the last page refresh or navigation. Alternatively, if you need to compare with a previous session, just turn this feature off and the previously captured log will not be removed after a page refresh.
- Clear session – At any point, you can use the clear session button, to clear any network traffic information recorded during the session.
- The Edge team has also included a Summary View in the network tools. The Summary View will include:
- Name – The name and URL path of the resource being requested.
- Protocol – The protocol used when requested this resource. For example HTTP or HTTPS (HTTP/2 is coming).
- Method – The HTTP method used on the request (e.g. GET, POST, PUT, etc.).
- Result – The response status code and text message as returned by the server. To highlight potential issues we colorize 4xx and 5xx status codes.
- Content type – The MIME type of the response as returned by the server.
- Received – The total size of the response payload as delivered by the server.
- Time – How long it took to download the resource since the request was initially sent.
- Timings – A graph that shows where network activity occurred over time. This graph or waterfall view showed you when a resource was requested and when it finished.
Devs interested in more dense information may like the addition of a Details View instead. In this view details of a request can be accessed by double-clicking the request and a side panel expands. The side panel will include relevant information detail information about the request and responses. The sections of the detail panel are conveniently divided into:
- Headers – Provides visibility into the request and response headers as well as summarizes important aspects such as the URL, method, and status code.
- Body – Displays the request and response payload bodies as well as provides options to “pretty print” JSON, XML, HTML, CSS, JavaScript and TypeScript content that makes them easier to read.
- Parameters – Breaks down the query string parameters into an easy-to-read format.
- Cookie – Displays the data of the request and response cookies.
- Timings – Displays the timing stages involved in acquiring the respective resource. Since redirects affect the time involved in downloading a resource, this tab also indicates if a resource was redirected from or was redirected to a different resource.
The Edge team also notes these new network tools are also available for devs in the IE11 environment as well as Edge. For Visual Studio developers, they can look forward to a similar experience in their toolbars in Visual Studios 2015. The team is constantly monitoring feedback and are currently hard at work on addressing other concerns. If there are still features or conveniences not reflected in this update, continue to make your voice heard.
