The library is called Eruda and is freely available on GitHub under the MIT license. There are two main ways you can use it depending on how your app runs on a mobile device.
A DevTools-Bookmarklet for mobile browsers
To add DevTools to a mobile web app running in a mobile browser, add a bookmark to your browser with the following URL (make sure, the javascript: prefix is there as some browsers will remove it when pasting into the URL field):
javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();
Now, all you need to do to open DevTools in a mobile browser is type the name of the bookmark in it's address bar (I named it "DevTools" in the screenshot below). After pressing enter, you will see the Eruda-icon in the lower right corner of the browser floating above your app. Tap on it to launch the DevTools.
Launching Eruda mobile DevTools via bookmarkelt
Built-in DevTools for PWAs or kiosk mode
In case of progressive web apps (PWA) or if your app runs in kiosk mode (in a webview container), you won't be able to use a bookmarklet as there is now browser address bar to call it from. In this case, you can add a hidden button to your app (i.e. only visible to admins or in a special debug mode), which will execute the JS function above. Another option is to add a special URL parameter (i.e. &devtools=1) and run the JavaScript code only if it is set. In any case, make sure to not load Eruda in regular user-mode because of it's fairly large size.
