Press F12 to speed up your Web Dave
As you may know, Microsoft Edge is the new default browser for Windows 10. Microsoft Edge is built on top of EdgeHTML, a new engine being built from scratch. AJHTML is designed with interoperability in mind and comes with some interesting features like
- PDF’s local support.
- HTTP / 2 implementation.
- New language features from the latest ECMAScript 6 (ES6).
- Always get the latest updates through the Store app and not through the operating system.
- Free from legacy code support like ActiveX Control, BHO etc.
- Legacy document mode deprecated.
- New Document Object Model (DOM) feature with support for gamepad API, W3C WAI-ARIA 1.0 landmark introduction, etc.
F12 Developer Tool on Microsoft Edge
The F12 developer tools in Microsoft Edge come with 7 interesting tools including
- DOM Explorer Tool.
- Console tool.
- Debugger tool.
- Network tool.
- Performance tools.
- Memory tool.
- Emulation tool.
You can use the shortcut key Ctrl Key + to launch or navigate the corresponding tool in the F12 Developer tool. [Number between 1 to 7].
DOM Explorer Tool
The DOM Explorer tool is the first tab in the F12 Developer tool to display the structure of webpages rendered in a web browser. This tool allows developers to edit the HTML and style elements of the page on the fly and solve problems with the page display. You can quickly find any CSS element.
This tool offers autocomplete intelligence for HTML and CSS features. You can also rearrange DOM nodes by dragging them to the screen. The DOM Explorer tool makes it easy for developers to debug.
Want to know what your code is doing and how it’s performing? The debugger tool is one of the F12 developer tools that helps you understand your code.
You can go through the code line by line and see the status of the value or variable. Breakpoints can also be set on a variety of items, such as XHR responses and events.
You can analyze the function call with the call stack as well as read the short code using the source map.
The Debugger tool provides an advanced CSS editing workflow within the tool. This allows developers to search and edit the CSS files used on the HTML page directly in Debugger’s text editor. New changes can be easily applied using the save button instead of reloading the page.
You can view detailed information about cookies, make changes to an existing one, and create new cookies using the toolbar in the Debugger tool.
You can use the Network Tools to get details of requests and responses associated with web pages rendered in the browser. You can see the bandwidth cost of your webpage and see the request titles and companies.
You can use the Performance tool to profile your app to identify the cause of the slowdown (if any). It combines the UI responsiveness and profiler tools available with Internet Explorer. You can gain insights on webpage frame rates and easily test code optimizations.
Memory tools allow developers to detect memory leaks and track the memory usage of your web page. It provides a timeline for viewing changes in memory usage over time. In addition, the Memory Tool provides snapshots for viewing and comparing memory usage at specific endpoints.
Emulation tools allow developers to examine their web pages and find out how the page is being rendered in different screen sizes and resolutions. GPS simulation is another feature that allows developers to test location-aware features for their website.
Want to try new features that aren’t fully ready? F12 Developer Tools has a bonus tab called “Test Tab” which allows developers to try new and powerful features that are not ready for production use.
By default, these features are disabled and you can enable them under the Tests tab.
Learn more about Microsoft Edge, web platforms and tools on the Microsoft Edge WebDave website and for any queries write to the modern web @ microsoft.com
Click here to see if your website meets the interoperable web standards and is ready for a variety of modern browsers, including Microsoft Edge.