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.
Being able to debug external devices is an important feature, because web-based UIs are moving to connected devices through tools like Windows IoT Core and Cortana. With the Edge Dev Tools, you can build, deploy, and test all aspects of your code from your development PC. You’ll need to enable Windows 10’s developer features from the Settings app, but once they’re installed you can turn on a device’s development portal.
This is a useful feature, even if you’re not planning on using it for remote debugging, because it gives you a web portal view of what’s happening on the target device, from running apps to live performance data. Connecting to a remote device requires only its IP address and the portal’s HTTPS port (usually 50443). Edge Dev Tools uses the same address and port connect to browser instances running on the target device. You also need to make sure that both machines are on a network that Windows recognizes as either in an Active Directory domain or that’s marked as private.
Debugging web apps remotely
Currently, you only get access to a debugger view, not the entire set of dev tools that a local copy of the Dev Tools app or F12 offer. It’s also missing some of the features you’d need to debug remote PWAs, like exploring service worker cache usage or for debugging EdgeHTML instances beyond the desktop browser. However, it does support working with local PWAs, so you can at least debug them on when running on your development PC.
Access to remote browsers is via the Edge Dev Tools Protocol, which aligns with what Google is doing with its own Chrome DevTools Protocol. The two protocols don’t interoperate yet, but it’s easy to imagine a future instance of both Edge’s and Chrome’s tools that would support testing pages on different browsers from the same debugging app, whether a standalone or built into an IDE. If you don’t want to run additional debugging tools, Edge already offers its own debugging server as an alternative to the Windows remote development portal, which works by exposing its debugging protocol over WebSockets.
If you’re using the Windows development portal, there’s no need to launch Edge’s own server, because it’s automatically hosted by the portal. This reduces the resources needed by the browser, giving you a better idea of real-world performance and interactions.
Edge Dev Tools and PWAs
Using the tools locally, you can debug not only browser applications but also currently running Edge extensions, as well as PWAs. Refresh the app selector to see what you can attach to, and then double-click the desired app to open a Dev Tools instance. The Edge Dev Tools host app acts as a switcher, so you can quickly open the tools that are attached to a specific application or web page.
Once connected, you get access to all the features of the Edge debugging tools. You can explore the elements used to display an app, ensuring that your HTML, CSS, and JavaScript are interacting as you expect. You can also check console warnings, a feature that’s especially useful when working with PWAs where you can’t see the error information that’s available to a traditional browser application.
When debugging PWAs, you can not only able to drill down into code but also understand how your code is using PWA-specific features like local storage and service workers, as well as how it caches content. Because a PWA is a standalone app, and users will expect app-like behaviors, you need to spend time in the network, memory, and performance tabs, using profiling tools to understand how your app interacts with Windows. Using the Edge Dev Tools profiler, you can track down bottlenecks in your code, giving you the information you need to rearchitect your app.
Stripping the Edge Dev Tools out from the browser makes a lot of sense. You use web technologies in so many places now, and the browser is no longer the right place to debug and test them all. PWAs, WebViews, and JavaScript environments like Electron are everywhere, and they need as much support as .Net or as C++.
It’s now up to web standards bodies to bring what Microsoft, Google, and Mozilla offer to provide a common set of debugging APIs that let us use Edge Dev Tools and its descendants across all these web-based platforms.