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.
Cookies are less of a mystery with the new F12. “The Debugger now also provides detailed information about cookies that have been created by an HTTP header or via JavaScript,” said Rios.
“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.
F12 in Microsoft Edge adds an eighth new tool called Experiments, a springboard of sorts for advanced functionality. “Our first experiment in the latest build allows you to edit any JavaScript file in the debugger source viewer,” Rios informed. Once enabled, users can edit, compare and save changes to their JavaScript code directly in the tool.