Press F12 in most web browsers and you’ll see a set of debugging tools that give you a deep insight into how your code is operating. It’s a powerful set of tools, and one that’s one of the more important developer-focused features in Microsoft’s Edge browser.
But the web is changing, and modern application development techniques are changing with it. You’re now building apps that rely on web technologies but that aren’t part of the web. Tools like React Native Windows, Electron, the WebView controls in Universal Windows Platform (UWP) apps, and progressive web apps (PWA)s are now part and parcel of your daily development workflow, so you need tools like the F12 mix of debuggers, profilers, and explorers to test your new code.
Debugging the web without the browser
Many of the pieces you need to build those new development tools are already here. Technologies like the WebDriver protocol allow remote control of browsers and other web-rendering services, while WebSockets gives you high-speed direct connections between web-based clients and servers. Together, they’re the basis for a remote-controlled debugging environment, with a local server running in a web browser that can deliver data from in-browser and in-app instrumentation and from direct access to the DOM and to the JavaScript engine.
If you can remote-control your browsers for testing, why not separate those familiar F12 debugging tools from the browser and use them from your development PCs? That’s what Microsoft’s Edge team has done, with the Windows Store release of its Edge Dev Tools.
