Microsoft recently announced new improved network tools in F12 developer tools for the new Microsoft Edge browser in Windows 10 after a huge demand from developers. As a developer, you have all the reasons to feel excited as you can now work on an improved set of tools.
Lets look at some of the major improvements that Microsoft has bought in.
Microsoft Edge F12 developer tools
Even if you are a beginner, you will find it extremely easy to access Microsoft Edge F12 developer as there are very few steps that you need to follow. All you need to do is to click and open the
More actions menu and select “
F12 Developer tools”. This will automatically launch the tools undocked.
Enhancement to the network tools in Edge
The first step taken by Microsoft on improvements is on redesigning the network tools so that the developers can get a cleaner experience. Next, Microsoft’s team also added a
Start and Stop toolbar button to provide more flexibility to developers while dealing with HTTP-based network traffic.
There is also a new button called “
Content type filter” which has been added to allow developers to put the filter and get only the type of traffic which is desired. So by this you can skip many unrelated network calls and at the same time get relevant information regarding the type and number of network errors, number of requests, response data transfer sizes, and download times etc.
You can also export and keep a track of all the information in a JSON HAR file.
Notable F12 Developer Tools enhancements for Microsoft EdgeThe lists of enhanced items that are included in the New Microsoft Edge are as follows:
•
Always refresh from server: This functionality ensures that you are testing against the latest version of a resource from the server instead of outdated one.
•
Clear cache and cookies: This makes sure that your browser’s cache is clear before loading the next page and you can clear the cookies with the shortcut without even going to browser settings
•
Clear session: You can use clear session button to clear any network traffic information recorded during the session
•
Clear entries on navigate: With this feature you can only focus on resources that were loaded during the last page refresh or navigation. You can even compare this with the last session just by turning this feature off
Inclusion of Summary View in the network tools
•
Name: This includes the Name and URL of the requested resource
•
Protocol: Include protocol that is being used to request the resource
•
Method: Shows HTTP method used in the request
•
Result: This shows the response status code and text message as returned by the server
•
Content type: Display 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: Display the time taken by resource to get the download
•
Timings: Shows the graphical representation of the network activity occurred over time
In case if you are interested in more detail view of the information then you can go for Detail View instead of Summary View. Information like Header, Body, and Parameters, etc. are displayed into different sections of the Detail View. All you need to do is to double click on the request and read the information from the side panel.
One key thing to note down here, says
Microsoft, is that these new enhanced features of network tools are also available in IE11 environment as well as Edge.
twc
