☰

Ferramenta Hacker (F12 view source code)

Este é um "developer tools" para edição e visualização dos elementos HTML e uso de JavaScript. Acompanha interface responsiva para celulares.

נכון ליום 30-09-2023. ראה הגרסה האחרונה.

// ==UserScript==
// @name       Ferramenta Hacker (F12 view source code)
// @name:pt       Ferramenta Hacker (F12 view source code)
// @name:es       Herramienta Hacker (F12 view source code)
// @name:en       Hacker Tools (F12 view source code)
// @name:fr       Outil Hacker (F12 view source code)
// @name:ru       Инструмент разработчика (F12 view source code)
// @name:ja       開発者ツール (F12 view source code)
// @name:ko       개발자 도구 (F12 view source code)
// @name:zh-TW       開發者工具 (F12 view source code)
// @name:zh-CN       开发者工具 (F12 view source code)

// @description       Este é um "developer tools" para edição e visualização dos elementos HTML e uso de JavaScript. Acompanha interface responsiva para celulares.
// @description:pt       Este é um "developer tools" para edição e visualização dos elementos HTML e uso de JavaScript. Acompanha interface responsiva para celulares.
// @description:es       Esta es una "herramienta de desarrollador" para editar y ver elementos HTML y usar JavaScript. Incluye una interfaz receptiva para dispositivos móviles.
// @description:en       This is a "developer tool" for editing and viewing HTML elements and using JavaScript. It comes with a responsive interface for mobile devices.
// @description:fr       Il s'agit d'un "outil de développeur" pour éditer et afficher des éléments HTML et utiliser JavaScript. Il est livré avec une interface responsive pour les appareils mobiles.
// @description:ru       Это "инструмент разработчика" для редактирования и просмотра элементов HTML и использования JavaScript. Он имеет адаптивный интерфейс для мобильных устройств.
// @description:ja       これはHTML要素の編集と表示、JavaScriptの使用のための「開発者ツール」です。モバイルデバイス向けにレスポンシブなインターフェースが提供されています。
// @description:ko       이것은 HTML 요소를 편집하고 보고 JavaScript를 사용하기 위한 "개발자 도구"입니다. 모바일 기기용 반응형 인터페이스가 제공됩니다.
// @description:zh-TW       這是一個用於編輯和查看HTML元素並使用JavaScript的「開發人員工具」。它提供了適用於移動設備的響應式界面。
// @description:zh-CN       这是一个用于编辑和查看HTML元素并使用JavaScript的「开发者工具」。它提供了适用于移动设备的响应式界面。

// @namespace       http://linkme.bio/jhonpergon/?userscript=console_mobile_view
// @version       0.3
// @author       Jhon Pérgon

// @icon         https://play-lh.googleusercontent.com/Apmfx7PWiz-YC-xEdAvIH7uPjLzj6L5fvVqUcDbFFxtPN7ppFMEfS4ty6oAg7xbwWQ
// @grant        GM_addStyle
// @match        *://*/*
// @grant        none
// @license      MIT

// @compatible      chrome
// @compatible      firefox
// @compatible      opera
// @compatible      edge
// @compatible      safari
// @compatible      berrybrowser
// ==/UserScript==


GM_addStyle('@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");');

var body = `
<div style="width:100%;height:29px;top:0px;background:black; text-align: left; color:#fff;border-bottom:solid 1.5px #3d3e4a;border-top:solid 1.5px #3d3e4a;">
<button style="float:left; margin: 3px 2px; padding: 0px 5px; height:23px; background:#080809; border: solid 1px gray; border-radius: 5px; color:#fff;" id="edit_on_or_off">Mode \u270E</button>
<button style="float:left; margin: 3px 2px; padding: 0px 5px; height:23px; background:#080809; border: solid 1px gray; border-radius: 5px; color:#fff;" id="findelements">Analyze</button>
<button id="save" style="width:60px;height:auto; margin: 3px 2px; height:23px; background:#080809; border: solid 1px gray; border-radius: 5px; color:#fff;" onclick="javascript:document.documentElement.innerHTML = document.getElementById('documentelements').textContent;">Save</button>
<button id="load" style="width:60px;height:auto; margin: 3px 2px; height:23px; background:#080809; border: solid 1px gray; border-radius: 5px; color:#fff;" onclick="javascript:document.getElementById('documentelements').textContent = document.documentElement.outerHTML;">Load</button>
<button style="cursor:pointer;float:right; padding: 2px 10px; height:24px; background:#080809; border: solid 1px #121f4a; border-radius: 5px; color:#fff; color:#fff; margin: 2px 3px;" id="exit" onclick="javascript:document.getElementById('devconsole').remove();document.getElementById('devScript').remove();">Close</button>
</div>
<pre id="documentelements" style="width:98%;height:268px; font-size: .80rem; margin:auto; border: solid 1px #18181d; line-height:1.4;text-align:left;background:#0b0c0d;color:#fff;overflow:auto;padding:5px;">

  Changes implemented!

Click load to add new edits.
</pre>`;


var myJavascript = `
<textarea style="width: calc(80%); height: 35px; outline: 0; resize: none; border: none; float: left; margin-left: .5%; margin-top: 2px; padding: 3px 5px; font-size: .90rem; background-color: #0f1314; color: #d3bcff" type="text" id="myCode" placeholder="»"></textarea>
<button style="width: calc(19% + -12px); margin-right: .5%; height: 38px; background-color: #080809; color: #dcdcdc; border: solid 1px #151b1d; margin-top: 2px; border-radius: 3px; float: right;" id="getjs">Add JS</button>
`;


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 = "fixed";
devconsole.style.width = "100%";
devconsole.style.height = "300px";
devconsole.style.bottom = "45px";
devconsole.style.background = "#333";
devconsole.style.zIndex = "999999";
devconsole.innerHTML = body;

var devScript = document.createElement('div');
devScript.id = "devScript";
devScript.style.position = "fixed";
devScript.style.width = "100%";
devScript.style.height = "45px";
devScript.style.bottom = "0px";
devScript.style.position = "fixed";
devScript.style.background = "#333";
devScript.style.zIndex = "999999";
//devScript.style.border = "solid 1px blue";
devScript.innerHTML = myJavascript;

var opendev = document.createElement('button');
opendev.style.position = "fixed";
opendev.style.width = "70px";
opendev.style.height = "25px";
opendev.style.right = "0";
opendev.style.bottom = "0";
opendev.style.marginRight = "8px";
opendev.style.marginBottom = "4px";
opendev.style.padding = "2px 4px";
opendev.style.fontSize = "14px";
opendev.style.zIndex = "99999";
opendev.style.borderRadius = "0px 5px 5px 0px";
opendev.id = "opendev";
opendev.style.background = "#080809";
opendev.style.color = "#fff";
opendev.style.border = "solid 1px gray";
opendev.innerHTML = "F12 <i class='bi bi-chevron-double-right'></i>";

var closeButton = document.createElement('button');
closeButton.style.position = "fixed";
closeButton.style.right = "78px";
closeButton.style.width = "40px";
closeButton.style.height = "25px";
closeButton.style.marginBottom = "4px";
closeButton.style.borderRadius = "5px 0px 0px 5px";
closeButton.style.bottom = "0";
closeButton.style.zIndex = "99999";
closeButton.style.padding = "2px 4px";
closeButton.style.fontSize = "14px";
closeButton.id = "closed";
closeButton.style.background = "#080809";
closeButton.style.color = "#fff";
closeButton.style.border = "solid 1px gray";
closeButton.innerHTML = "X";

let editando = false;
let buttonId = "edit_on_or_off";

  opendev.addEventListener("click", function() {
    document.body.appendChild(devconsole);
    document.body.appendChild(devScript);

    var documentelements = document.getElementById('documentelements');

   documentelements.textContent = document.documentElement.outerHTML.replace(/</g, "<").replace(/></g, ">\n<").replace(/>/g, ">").replace("style>", "style>\n").replace(/{/g, "{\n").replace(/}/g, "\n}\n").replace(");", ");\n");

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

    document.getElementById("edit_on_or_off").addEventListener("click", function() {
        if (editando == false) {
            document.body.contentEditable = "true";
            document.body.designMode = "on";
            document.getElementById("edit_on_or_off").innerHTML = "Disable \u270E";
            editando = true;
            document.getElementById('devconsole').remove();
            document.getElementById('devScript').remove();
            alert("Interface editing mode (enabled).");
        } else {
            document.getElementById('devconsole').remove();
            document.getElementById('devScript').remove();
            alert("Interface editing mode (disabled).");
            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;
            }
        });
      alert("Analyze mode activated. Hover over elements to see details.");
    });




    document.getElementById("getjs").addEventListener("click", function() {
        var inputElement = document.getElementById('myCode');
        var valorInput = inputElement.value;
        console.log('meuValor = '+valorInput);
        try {
            // executar o código
            eval(valorInput);
        } catch (e) {
            console.error('Erro ao executar código:', e);
        }
    });

});



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

document.body.appendChild(closeButton);
document.body.appendChild(opendev);