Senthil Kumar dives deep into F12 dev tools and much more in this article.
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
As a Web Developer, the F12 Developer tool was one of the cool features in Internet Explorer 11 which helped the developers to debug and test your web pages. Microsoft Edge brings in the similar tool with the improved developer experience. The new tool includes the improved source navigation; go to definition, combined profiler with the JavaScript call stack and timeline and profiler for CPU sampling.
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.
Console Tool
The Console tool in the F12 Developer Tool lets developers to view the browser error messages and status code. The developers can use the Console Debugging API to send debug information. The tool also includes the intellisense support in the command line so that the developers can type and discover the various JavaScript APIs easily.
Debugger Tool
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.
Network 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.
Performance Tool
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
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.
Emulation Tool
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.
Experiments
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.
Currently, the experiments tab provides the "Edit JavaScript" toggle button which allows the users to edit the JavaScript file in the debugger source viewer.
Once you enable this feature and restarted your browser, navigate to the Debugger's source view and start modifying your JavaScript code.
Learn more about Microsoft Edge, Web platform and tools at the Microsoft Edge web dev website and for any queries write to modernweb@microsoft.com
Follow Us
