Inspecting HTML/CSS/JS Repls with Native DevTools

Replit has launched native DevTools that make it easier to inspect and debug web pages. Existing browser DevTools had drawbacks such as complexity when inspecting nested webview iframes, poor mobile support, and restricted access in some educational environments.

Now, in any Repl that includes a webview, you can instantly check the Console and DOM by clicking the wrench icon.

This feature was built on top of Eruda, an excellent open-source solution for mobile environments. In particular, it uses chobitsu, a JavaScript implementation of the Chrome DevTools protocol, to secure high flexibility such as inspecting network traffic.

For security, DevTools is hosted through a special file called __devtools_wrapper.html to comply with the same origin policy. Additionally, to ensure DevTools loads before the page's scripts run, the approach of fetching the HTML first, then injecting DevTools and writing it into the iframe was adopted to resolve timing issues.