Microsoft Edge may have taken Internet Explorer’s place in Windows 10 as the new default Web browser, but its F12 tools live on.
Edge, which officially launches alongside Windows 10 next week and is currently available in preview builds of the operating system, contains a new version of the F12 development tools that makes it easier to explore and manipulate Web code. F12 is so named because it springs into action when a user hits the F12 key.
F12 is a collection of seven tools that enable developers to view HTML code, troubleshoot problems and monitor a Web application’s effect on a browser. They include an emulator that simulates various screen sizes and device types, a DOM (Document Object Model) Explorer, a debugger and a console for determining the status of code, along with performance, network and memory monitoring.
One big behind-the-scenes change ahead of Edge’s impending release is how Microsoft is handling F12’s technical documentation going forward.
Microsoft Edge Program Manager Ruben Rios said the company’s “F12 developer tools documentation is now part of the Microsoft Edge Dev site and fully available on GitHub,” in a July 21 announcement. “From this point on, the docs will not only be influenced by your feedback, but you’re invited to contribute and help shape our documentation going forward.”
The new GitHub repository can be found here. “Over the coming months we will be working on adding new sections and content to enhance the documentation experience,” pledged Rios.
The software maker also revamped F12’s debugger, making it easier for Web coders to spot and fix problems.
Rios’ team streamlined the debugger’s CSS editing workflow, he said. “As a way to improve the usability and ease of styling your web pages, CSS files are exposed via the Debugger’s filer picker, allowing you to search and select any of the CSS files referenced on the HTML markup.”
Now, the act of selecting a CSS file allows developers to edit it directly in the built-in text editor. Changes can be saved by clicking the save icon or using the familiar Ctrl+S shortcut, he noted.
“The cookies view allows you see and modify existing cookies as well as create new ones,” he noted. “You can also clear individual cookies, session cookies or all cookies using the toolbar or the table’s context menu.” Similarly, developers can peer into the contents of local and session storage using the tool’s file picker.