As you might know by now, Microsoft Edge is the new default browser built for Windows 10. Microsoft Edge is built on top of EdgeHTML, a new engine that is being built from scratch. The EdgeHTML is designed keeping the interoperability in mind and brings in some interesting features like
- Native support of PDF.
- HTTP/2 Implementation.
- New language features from the latest ECMAScript 6 (ES6).
- Always get the latest updates via store app and not via operating system.
- Free from legacy code support like ActiveX controls, BHOs etc.
- Legacy document modes deprecated.
- New Document Object Model (DOM) features including the support for Gamepad API, W3C WAI-ARIA 1.0 landmark roles etc.
F12 Developer Tools in Microsoft Edge
F12 Developer Tools in Microsoft Edge comes with 7 interesting tools which includes
- DOM Explorer tool.
- Console tool.
- Debugger tool.
- Network tool.
- Performance Tool.
- Memory tool.
- Emulation tool.
You can launch or navigate to the respective tool within the F12 Developer tool using the shortcut key Ctrl Key + [Number between 1 to 7].
DOM Explorer tool
The DOM Explorer tool is the first tab within the F12 Developer tool that displays the structure of the webpage rendered in the web browser. This tool lets the developers to edit the HTML and the style elements in the page on the fly and resolve the issues with respect to the display of the page. You can quickly find out which CSS element.
This tool provides the intellisense auto completion suggestions for the HTML and CSS properties. You can also rearrange the DOM nodes by dragging and rearranging them in the screen. The DOM explorer tool makes the developers task of debugging easier.
Want to know what your code is doing and how it’s performing? Debugger Tool is one such tool within the F12 Developer tools that helps you to understand your code.
You can step through the code line by line and watch the values or the state of the variables. The breakpoints can be set on various items like the XHR response and events as well.
You could analyze the function call with the Call Stack as well as read the minified code using source maps.
The Debugger tool provides an improved CSS editing workflow within the tool. It allows the developers to search and edit the CSS files used in the HTML page directly in the Debugger's text editor. The new changes can easily be applied using the save button instead of reloading the page.
You can view the detailed information about the cookies, modify the existing one and create new cookie using the toolbar within the debugger tool.
You can use the Network tool to get the details of the request and response that is involved with the web page that is rendered in the browser. You can view the bandwidth consumption of your webpage and view the request headers and bodies.
You can use the Performance tool to profile your app to identify the reason for slowness (if any). This combines the UI Responsiveness and profiler tools that were available with the Internet explorer. You can get the insights on the webpage's frame rate and test the code optimizations easily.
Memory tool lets developers to identify the memory leaks and tracks the usage of memory of your web page. It provides a timeline to view the changes in the memory usage over time. Additionally, the memory tool provides snapshots to view and compare the memory usage at specific end points.
The Emulation tool lets developers to test their webpages and know how the page is getting rendered on different screen sizes and resolutions. GPS simulation is yet another feature that lets developers test the location aware features for their website.
Want to try out new features that are not fully ready? The F12 developer tools includes a bonus tab called "experiments tab" that lets developers to try out new and powerful features that are not ready for production usage.
By default, these features are disabled and you can enable them under the experiments tab.