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.
Let’s 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 that 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, the number of requests, response data transfer sizes, download times, etc.
Read: How to disable F12 shortcut for Microsoft Edge Developer Tools.
You can also export and keep a track of all the information in a JSON HAR file.
Notable F12 Developer Tools enhancements for Microsoft Edge
The lists of enhanced items that are included in the New Microsoft Edge are as follows:
- Always refresh from the server: This functionality ensures that you are testing against the latest version of a resource from the server instead of an 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 the clear session button to clear any network traffic information recorded during the session
- Clear entries on navigating– 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 the 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 that occurred over time
If you are interested in the more detailed view of the information, you can go for Detail View instead of Summary View. Information like Header, Body, Parameters, etc., is displayed in different sections of the Detail View. You need 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 the IE11 environment and Edge.
Now see how you can change User-Agent, Mode, Display, and Geolocation in Edge Developer Tools.
Are Edge dev tools the same as Chrome?
Yes, they are the same. Both the browsers use the same Chromium browser engine, and hence they offer the same set of features in the developer tools. However, you can use the Microsoft Edge DevTools extension for Visual Studio Code, which lets you use the browser elements and network tools within the VS code.
How do I use EDGE dev tools?
Open the Microsoft Edge web browser to access the developer tools. Click F12 on your keyboard. Click the More tools icon and then click More tools > Developer Tools if you press Ctrl+Shift+I or click the Setting and more ellipsis icon as an option.
