☰

View Source HTML Mobile

View Source simples para visualização e edição do DOM no celular.

当前为 2023-08-04 提交的版本，查看 最新版本。

// ==UserScript==
// @name         View Source HTML Mobile
// @namespace    http://linkme.bio/jhonpergon/?userscript=console_mobile_view
// @version      0.1
// @description  View Source simples para visualização e edição do DOM no celular.
// @author       Jhon Pérgon
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

var body = `
<div style="width:99%;height:29px;top:0px;background:white;border-style:solid;">
<button style="float:left; margin: 2px 2px;" id="edit_on_or_off">+"\u270E"+</button>
<button style="float:left; margin: 2px 5px;" id="findelements">+"\uD83D\uDD0D"+</button>
<button id="save" style="width:60px;height:auto; margin: 2px 0px;" onclick="javascript:document.documentElement.innerHTML = document.getElementById('documentelements').textContent;">Save</button>
<button id="load" style="width:60px;height:auto; margin: 2px 0px;" onclick="javascript:document.getElementById('documentelements').textContent = document.documentElement.outerHTML;">Load</button>
<a style="cursor:pointer;float:right; padding: 2px 10px; color: red;" id="exit" href="javascript:document.getElementById('devconsole').remove();">fechar</a>
</div>
<pre id="documentelements" style="width:99%;height:320px;margin:auto;border: solid 1px royalblue; font-size:15px;line-height:1.4;text-align:left;background:black;color:#fff;overflow:auto;padding:5px;">
    ...
</pre>`;

function show(elem) {
    elem.style.display = "block";
    elem.style.x = all.x;
    elem.style.y = all.y + 20;
    elem.textContent = "";
}

function hide(elem) {
    elem.style.display = "";
    elem.textContent = all.id + all.style + all.tagName;
}

var all = document.querySelector("*");
var devconsole = document.createElement('div');
devconsole.id = "devconsole";
devconsole.style.position = "absolute";
devconsole.style.width = "100%";
devconsole.style.height = "322px";
devconsole.style.bottom = "0px";
devconsole.style.background = "grey";
devconsole.style.zIndex = "3000";
devconsole.innerHTML = body;

var opendev = document.createElement('button');
opendev.style.position = "fixed";
opendev.style.right = "0";
opendev.style.bottom = "0";
opendev.style.zIndex = "3000";
opendev.id = "opendev";
opendev.innerHTML = "View Source";

var closeButton = document.createElement('span');
closeButton.style.position = "absolute";
closeButton.style.top = "-2px";
closeButton.style.left = "-30px";
closeButton.style.cursor = "pointer";
closeButton.innerHTML = "X";
closeButton.style.background = "black";
closeButton.style.color = "#fff";
closeButton.style.padding = "3px 9px";

opendev.appendChild(closeButton);

opendev.addEventListener("click", function() {
    document.body.appendChild(devconsole);
    var documentelements = document.getElementById('documentelements');
    documentelements.textContent = document.documentElement.outerHTML.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/></g, ">\n<"); // Adiciona quebra de linha após cada tag

    documentelements.addEventListener("dblclick", function() {
        if (documentelements.contentEditable != "true") {
            documentelements.contentEditable = "true";
        } else {
            documentelements.contentEditable = "false";
        }
    });

    document.getElementById("edit_on_or_off").addEventListener("click", function() {
        if (document.body.contentEditable !== "true" && document.body.designMode !== "on") {
            console.log("Editing elements: true");
            document.body.contentEditable = "true";
            document.body.designMode = "on";
            alert("Modo edição HTML ativo. Clique em qualquer texto para editá-lo.");
            document.getElementById('devconsole').remove();
        } else {
            alert("Modo edição desabilitado.");
            console.log("Editing elements: false");
            document.body.contentEditable = "false";
            document.body.designMode = "off";
            window.location.reload();
        }
    });

    document.getElementById("findelements").addEventListener("click", function() {
        document.addEventListener("mousemove", function awesome(e) {
            if (e.target.tagName != "") {
                e.target.title = e.target.tagName.toLowerCase();
            }
            if (e.target.id != "") {
                e.target.title += "#" + e.target.id;
            }
            if (e.target.className != "") {
                e.target.title += "." + e.target.className;
            }
        });
    });
});

closeButton.addEventListener("click", function() {
    opendev.style.display = "none";
});

document.body.appendChild(opendev);