dom console

javascript:(function () {
    const id = "inDomConsole";
    if (document.getElementById(id) === undefined) return;
    const consoleElement = document.createElement("details");
    consoleElement.id = id;

    const scopedStyle = document.createElement("style");
    const container = document.createElement("div");
    scopedStyle.textContent = `
#${id} {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px;
    font-family: monospace;
    margin: 16px;
    background-color: #ffffff80;
    box-shadow: 0 0 8px #00000020;
    border-radius: 4px;
    width: calc( 100% - 32px);
    user-select: none;
    opacity: 0.75;
    transition: 0.25s opacity ease;
    overflow: scroll;
}
#${id}:hover, #${id}:active {
    opacity: 1;
}
#${id}[open] {
    height: calc(100% - 32px );
    opacity: 1;
}

#${id}:not(open) summary {
}

#${id} div {

}

#${id} p {
  font-size: 12px;
}

#${id} p.log:before {
  content: "Log: ";
}

#${id} p.warn {
  color: orange;
  border-top: solid 1px orange;
  border-bottom: solid 1px orange;
}

#${id} p.warn:before {
  content: "Warn: ";
}

#${id} p.error {
  color: red;
  border-top: solid 1px red;
  border-bottom: solid 1px red;
}

#${id} p.error:before {
  content: "Error: ";
}`;

    const summary = document.createElement("summary");
    summary.innerText = "Console: L: 0, W: 0, E: 0";
    consoleElement.appendChild(scopedStyle);
    consoleElement.appendChild(summary);
    consoleElement.appendChild(container);

    const log = console.log.bind(console);
    const error = console.error.bind(console);
    const warn = console.warn.bind(console);

    const count = {};

    const output = function (type, fn, ...args) {
        const logElement = document.createElement("p");
        if (type in count == false) count[type] = 0;
        count[type]++;

        summary.innerText = `Console: L: ${count["log"] || 0}, W: ${count["warn"] || 0}, E: ${count["error"] || 0}`;

        logElement.className = type;
        logElement.innerText = `${args}`;
        container.appendChild(logElement);

        logElement.scrollIntoView({ behavior: "smooth", block: "start" });

        fn(...args);
    };

    console.log = function (...args) {
        output("log", log, ...args);
    };

    console.warn = function (...args) {
        output("warn", warn, ...args);
    };

    console.error = function (...args) {
        output("error", error, ...args);
    };

    document.body.appendChild(consoleElement);
})();