☰

Greasy Fork is available in English.

Инструмент разработчика (F12 view source code)

Это "инструмент разработчика" для редактирования и просмотра элементов HTML и использования JavaScript. Он имеет адаптивный интерфейс для мобильных устройств.

// ==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)

// @name:id       Alat Pemrogram (F12 lihat kode sumber)
// @name:ug       Programming Qurulum (F12 korunush kodi ko'rish)
// @name:ar       أدوات القرصنة (عرض مصدر F12)
// @name:he       כלי האקר (הצג קוד מקור F12)
// @name:hi       हैकर टूल्स (F12 स्रोत कोड देखें)
// @name:th       เครื่องมือแฮ็กเกอร์ (ดูโค้ดแหล่ง F12)
// @name:bg       Хакерски инструменти (преглед на кода F12)
// @name:ro       Instrumente de hacker (vizualizare sursă F12)
// @name:fi       Hakkerityökalut (F12 näytä lähdekoodi)
// @name:it       Strumenti per hacker (visualizza codice sorgente F12)
// @name:el       Εργαλεία χάκερ (προβολή κώδικα F12)
// @name:eo       Hakilo-iloj (vidi fonton F12)
// @name:hu       Hackerszerszámok (F12 forráskód megtekintése)
// @name:nb       Hackerverktøy (F12 vis kildekode)
// @name:sk       Hackerovské nástroje (zobraziť zdrojový kód F12)
// @name:sv       Hackerverktyg (F12 visa källkod)
// @name:sr       Хакерски алати (прикажи изворни код F12)
// @name:pl       Narzędzia hakerskie (wyświetl kod źródłowy F12)
// @name:nl       Hacker Tools (F12 broncode bekijken)
// @name:de       Hacker-Tools (F12 Quellcode anzeigen)
// @name:da       Hacker Værktøjer (F12 vis kildekode)
// @name:cs       Hakerské nástroje (zobrazit zdrojový kód F12)
// @name:uk       Хакерські інструменти (перегляд вихідного коду F12)
// @name:tr       Hacker Araçları (F12 kaynak kodunu görüntüle)
// @name:vi       Công cụ Hacker (Xem mã nguồn F12)
// @name:fr-CA    Outils de piratage (F12 voir le code source)

// @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的「开发者工具」。它提供了适用于移动设备的响应式界面。
// @description:id       Ini adalah "alat pengembang" untuk mengedit dan melihat elemen HTML serta menggunakan JavaScript. Dilengkapi dengan antarmuka responsif untuk perangkat seluler.
// @description:ug       Bu "developer qurulum" HTML elementlarni tahrir qilish va JavaScript ishlatish uchun. Mobil qurilmalar uchun moslashtirilgan interfeys bilan ta'minlanadi.
// @description:ar       هذا هو "أداة المطور" لتحرير وعرض عناصر HTML واستخدام JavaScript. يأتي مع واجهة مستجيبة للأجهزة المحمولة.
// @description:he       זהו "כלי מפתח" לעריכה ותצוגת אלמנטי HTML ושימוש ב-JavaScript. הוא מגיע עם ממשק רספונסיבי למכשירים ניידים.
// @description:hi       यह एक "डेवलपर टूल" है जिसका उपयोग HTML तत्वों को संपादित करने और देखने, और JavaScript का उपयोग करने के लिए किया जा सकता है। इसमें मोबाइल डिवाइस के लिए एक प्रतिक्रियाशील इंटरफेस शामिल है।
// @description:th       นี่คือ "เครื่องมือนักพัฒนา" สำหรับการแก้ไขและดูองค์ประกอบ HTML และใช้ JavaScript มาพร้อมกับอินเตอร์เฟซที่ตอบสนองสำหรับอุปกรณ์เคลื่อนที่
// @description:bg       Това е "инструмент за разработчици" за редактиране и преглед на HTML елементи и използване на JavaScript. Идва с отзивчив интерфейс за мобилни устройства.
// @description:ro       Acesta este un "instrument de dezvoltator" pentru editarea și vizualizarea elementelor HTML și utilizarea JavaScript. Vine cu o interfață receptivă pentru dispozitivele mobile.
// @description:fi       Tämä on "kehittäjätyökalu" HTML-elementtien muokkaamiseen ja katseluun sekä JavaScriptin käyttöön. Siinä on responsiivinen käyttöliittymä mobiililaitteille.
// @description:it       Si tratta di uno "strumento per sviluppatori" per la modifica e la visualizzazione degli elementi HTML e l'uso di JavaScript. Viene fornito con un'interfaccia responsiva per i dispositivi mobili.
// @description:el       Αυτό είναι ένα "εργαλείο προγραμματιστή" για την επεξεργασία και την προβολή στοιχείων HTML και τη χρήση του JavaScript. Έχει ανταποκριτική διεπαφή για κινητές συσκευές.
// @description:eo       Tio estas "programista ilo" por redakti kaj vidi HTML elementojn kaj uzi JavaScript. Ĝi venas kun responda interfaco por poŝtelefonoj.
// @description:hu       Ez egy "fejlesztői eszköz" az HTML elemek szerkesztéséhez és megjelenítéséhez, valamint a JavaScript használatához. Mobil eszközökhöz való rugalmas felülettel rendelkezik.
// @description:nb       Dette er et "utviklertil" for redigering og visning av HTML-elementer og bruk av JavaScript. Den leveres med en responsiv grensesnitt for mobile enheter.
// @description:sk       Ide o "vývojový nástroj" na úpravu a zobrazenie prvkov HTML a použitie JavaScriptu. Súčasťou je responsívny rozhranie pre mobilné zariadenia.
// @description:sv       Detta är ett "utvecklarverktyg" för redigering och visning av HTML-element samt användning av JavaScript. Det har en responsiv gränssnitt för mobila enheter.
// @description:sr       Ово је "алатка за развој" за уређивање и приказивање HTML елемената и коришћење JavaScript-а. Има одзиван интерфејс за мобилне уређаје.
// @description:pl       To "narzędzie dla programistów" służy do edycji i przeglądania elementów HTML oraz korzystania z JavaScript. Posiada responsywny interfejs dla urządzeń mobilnych.
// @description:nl       Dit is een "ontwikkelaarstool" voor het bewerken en bekijken van HTML-elementen en het gebruik van JavaScript. Het wordt geleverd met een responsieve interface voor mobiele apparaten.
// @description:de       Dies ist ein "Entwicklertools" zum Bearbeiten und Anzeigen von HTML-Elementen und zur Verwendung von JavaScript. Es wird mit einer responsiven Benutzeroberfläche für mobile Geräte geliefert.
// @description:da       Dette er et "udviklerværktøj" til redigering og visning af HTML-elementer og brug af JavaScript. Det leveres med en responsiv grænseflade til mobile enheder.
// @description:cs       Jedná se o "vývojářský nástroj" pro úpravu a zobrazení HTML prvků a použití JavaScriptu. Obsahuje responzivní rozhraní pro mobilní zařízení.
// @description:uk       Це "інструмент розробника" для редагування і перегляду елементів HTML та використання JavaScript. Він має адаптивний інтерфейс для мобільних пристроїв.
// @description:tr       Bu, HTML öğelerini düzenlemek ve görüntülemek, ayrıca JavaScript kullanmak için bir "geliştirici aracı"dır. Mobil cihazlar için duyarlı bir arayüz içerir.
// @description:vi       Đây là một "công cụ phát triển" cho việc chỉnh sửa và xem các phần tử HTML và sử dụng JavaScript. Nó đi kèm với giao diện phản hồi cho thiết bị di động.
// @description:fr-CA    Il s'agit d'un "outil de pirate informatique" pour éditer et visualiser les éléments HTML et utiliser JavaScript. Il est livré avec une interface réactive pour les appareils mobiles.

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

// @icon         https://play-lh.googleusercontent.com/Apmfx7PWiz-YC-xEdAvIH7uPjLzj6L5fvVqUcDbFFxtPN7ppFMEfS4ty6oAg7xbwWQ

// @grant        GM_addStyle
// @match        *://*/*
// @grant        none

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


GM_addStyle('@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/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').value;">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>
<textarea spellcheck="false" id="documentelements" style="outline: 0; resize: none; 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.
</textarea>`;


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">Run 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 = "<i class='bi bi-x-lg'></i>";

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);