Press F12 to speed up your Web Dave

April 5, 2022 0 Comments

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

As a web developer, the F12 Developer Tool was a great feature of Internet Explorer 11 that helped developers debug and test your web pages. Microsoft Edge brings similar tools with advanced developer experience. New tools include on Advanced Source; Go to Definition, JavaScript call stack and profiler attached to the profiler for timeline and CPU sampling.
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.

Console tool

The F12 Developer Tool console tool allows developers to view browser error messages and status codes. Developers can use the console debugging API to send debug information. The tool also includes command line intelligence support so that developers can easily type and discover various JavaScript APIs.

Debugger tool

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.

Network 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.

Performance tools

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 tool

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 tool

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.

Experimentation

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.

Currently, the Experiments tab provides the “Edit JavaScript” toggle button that allows users to edit JavaScript files in the debugger source viewer.

Once you enable this feature and restart your browser, navigate to the debugger source view and start changing your JavaScript code.

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.

Leave a Reply

Your email address will not be published.