Microsoft Channel 9’s One Dev Minute feature shows off F12 developer tools for Microsoft’s Edge browser. F12 developer tools can be invoked by hitting the F12 key on the keyboard within Edge.
F12 developer tools sports eight main features:
- The DOM explorer – which lets developers examine the state of a web page’s DOM, HTML structures, and CSS Styles. It also enables developers to make real-time changes to the DOM structure to quickly preview changes.
- The Console tool – a linear list of text output that lets developers see errors, events, and customized debug output. It also allows developers to examine the contents of JavaScript objects and XML nodes. Finally, it allows developers to execute JavaScript through the command line directly into the given page’s environment.
- The Debugger tool enables developers to watch the code execute in real time, placing watchpoints and breakpoints in various parts of the source code to keep track of what the code is doing with respect to those markers during execution. It also gives developers access to the call stacks in the resulting execution, as well as improving the readability of minified code.
- The Network tool lets developers examine each network operation happening on the page, including timing data and request and response headers.
- The Performance tool provides a visual timeline of all the web page’s execution, allowing developers to pinpoint how various parts of their code are performing.
- The Memory tool keeps track of memory allocation and usage among various DOM elements and script executions
- The Emulation tool lets developers test how a web page will work with different devices, allowing developers to customize browser profiles, user agents, screen sizes, resolutions, and GPS coordinates all from within the same browser.
- Finally, the Experiments tool allows developers to test bleeding Edge features that are experimental and aren’t yet finished.
It’s worth noting that these new tools are developed using Microsoft’s own JavaScript superset TypeScript, which add compile-time checking and static protections to the otherwise dynamically evaluated JavaScript. The developer tools are always running, so not reloading is required.
One Dev Minute goes to great lengths to emphasize that the developer tools in their current state are the result of constant user feedback from UserVoice. It also explains that F12 developer tools documentation are now available on both the Microsoft Edge Dev site as well as its own dedicated GitHub site. Finally, it stresses that from this point forward, the future of F12 tool documentation will be shaped by ongoing user feedback.
Further reading: Channel 9, Microsoft Edge
