How to debug web apps outside the browser

If a web app doesn’t use the browser, how can you test it? Microsoft’s Edge Dev Tools brings the familiar F12 tools to the desktop

Current Job Listings

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.

Edge Dev Tools is a standalone UWP app, that can connect to local and remote browser sessions, ready to start debugging across multiple devices and multiple screens. It’s ready for new user interactions and new device formats, so if you’re using, say, HoloLens with SharePoint’s new augmented-reality portal, you can use a USB connection to your headset to test any WebVR or Babylon.js content in your site.

To continue reading this article register now