Mobile Dev Console Toggle (Eruda) by Mohammed

Lightweight floating button to toggle Eruda console on any website (optimized for mobile browsers).
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Mobile Dev Console Toggle (Eruda) by Mohammed
// @namespace    https://github.com/MohammedBeshr0
// @version      1.0.0
// @description  Lightweight floating button to toggle Eruda console on any website (optimized for mobile browsers).
// @author       Mohammed
// @match        *://*/*
// @grant        none
// @run-at       document-end
// @license      MIT
// @homepageURL  https://greasyfork.org/
// @supportURL   https://greasyfork.org/
// ==/UserScript==

/*
 * This userscript dynamically loads Eruda (https://github.com/liriliri/eruda)
 * Eruda is an open-source console for mobile browsers.
 * Original library author: liriliri
 * License: MIT
 */

(function () {
    'use strict';

    let erudaLoaded = false;
    let erudaVisible = false;

    function loadEruda() {
        if (erudaLoaded) return;

        const script = document.createElement('script');
        script.src = "https://cdn.jsdelivr.net/npm/eruda";
        script.async = true;

        script.onload = function () {
            if (typeof eruda !== "undefined") {
                eruda.init({
                    defaults: {
                        displaySize: 50,
                        transparency: 1,
                        theme: 'Arc Dark'
                    }
                });
                erudaLoaded = true;
                erudaVisible = true;
            }
        };

        document.head.appendChild(script);
    }

    function toggleEruda() {
        if (!erudaLoaded) {
            loadEruda();
        } else {
            if (erudaVisible) {
                eruda.hide();
                erudaVisible = false;
            } else {
                eruda.show();
                erudaVisible = true;
            }
        }
    }

    function createButton() {
        const btn = document.createElement('div');
        btn.textContent = "DEV";

        Object.assign(btn.style, {
            position: "fixed",
            bottom: "20px",
            right: "20px",
            width: "55px",
            height: "55px",
            background: "#111",
            color: "#00ff88",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            borderRadius: "50%",
            fontSize: "14px",
            fontWeight: "bold",
            zIndex: "2147483647",
            cursor: "pointer",
            boxShadow: "0 4px 12px rgba(0,0,0,0.4)",
            userSelect: "none"
        });

        btn.addEventListener("click", toggleEruda);
        document.documentElement.appendChild(btn);
    }

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", createButton);
    } else {
        createButton();
    }

})();