这是一个用于编辑和查看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)
// @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);