☰

开发者工具 (F12 view source code)

这是一个用于编辑和查看HTML元素并使用JavaScript的「开发者工具」。它提供了适用于移动设备的响应式界面。

目前为 2023-09-30 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name       Ferramenta Hacker (F12 view source code)
  3. // @name:pt       Ferramenta Hacker (F12 view source code)
  4. // @name:es       Herramienta Hacker (F12 view source code)
  5. // @name:en       Hacker Tools (F12 view source code)
  6. // @name:fr       Outil Hacker (F12 view source code)
  7. // @name:ru       Инструмент разработчика (F12 view source code)
  8. // @name:ja       開発者ツール (F12 view source code)
  9. // @name:ko       개발자 도구 (F12 view source code)
  10. // @name:zh-TW       開發者工具 (F12 view source code)
  11. // @name:zh-CN       开发者工具 (F12 view source code)
  12.  
  13. // @description       Este é um "developer tools" para edição e visualização dos elementos HTML e uso de JavaScript. Acompanha interface responsiva para celulares.
  14. // @description:pt       Este é um "developer tools" para edição e visualização dos elementos HTML e uso de JavaScript. Acompanha interface responsiva para celulares.
  15. // @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.
  16. // @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.
  17. // @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.
  18. // @description:ru       Это "инструмент разработчика" для редактирования и просмотра элементов HTML и использования JavaScript. Он имеет адаптивный интерфейс для мобильных устройств.
  19. // @description:ja       これはHTML要素の編集と表示、JavaScriptの使用のための「開発者ツール」です。モバイルデバイス向けにレスポンシブなインターフェースが提供されています。
  20. // @description:ko       이것은 HTML 요소를 편집하고 보고 JavaScript를 사용하기 위한 "개발자 도구"입니다. 모바일 기기용 반응형 인터페이스가 제공됩니다.
  21. // @description:zh-TW       這是一個用於編輯和查看HTML元素並使用JavaScript的「開發人員工具」。它提供了適用於移動設備的響應式界面。
  22. // @description:zh-CN       这是一个用于编辑和查看HTML元素并使用JavaScript的「开发者工具」。它提供了适用于移动设备的响应式界面。
  23.  
  24. // @namespace       http://linkme.bio/jhonpergon/?userscript=console_mobile_view
  25. // @version       0.2
  26. // @author       Jhon Pérgon
  27.  
  28. // @icon         https://play-lh.googleusercontent.com/Apmfx7PWiz-YC-xEdAvIH7uPjLzj6L5fvVqUcDbFFxtPN7ppFMEfS4ty6oAg7xbwWQ
  29. // @grant        GM_addStyle
  30. // @match        *://*/*
  31. // @grant        none
  32. // @license      MIT
  33.  
  34. // @compatible      chrome
  35. // @compatible      firefox
  36. // @compatible      opera
  37. // @compatible      edge
  38. // @compatible      safari
  39. // @compatible      berrybrowser
  40. // ==/UserScript==
  41.  
  42.  
  43. GM_addStyle('@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");');
  44.  
  45. var body = `
  46. <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;">
  47. <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>
  48. <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>
  49. <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>
  50. <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>
  51. <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>
  52. </div>
  53. <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;">
  54.  
  55.   Changes implemented!
  56.  
  57. Click load to add new edits.
  58. </pre>`;
  59.  
  60.  
  61. var myJavascript = `
  62. <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>
  63. <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>
  64. `;
  65.  
  66.  
  67. function show(elem) {
  68.     elem.style.display = "block";
  69.     elem.style.x = all.x;
  70.     elem.style.y = all.y + 20;
  71.     elem.textContent = "";
  72. }
  73.  
  74. function hide(elem) {
  75.     elem.style.display = "";
  76.     elem.textContent = all.id + all.style + all.tagName;
  77. }
  78.  
  79. var all = document.querySelector("*");
  80. var devconsole = document.createElement('div');
  81. devconsole.id = "devconsole";
  82. devconsole.style.position = "fixed";
  83. devconsole.style.width = "100%";
  84. devconsole.style.height = "300px";
  85. devconsole.style.bottom = "45px";
  86. devconsole.style.background = "#333";
  87. devconsole.style.zIndex = "999999";
  88. devconsole.innerHTML = body;
  89.  
  90. var devScript = document.createElement('div');
  91. devScript.id = "devScript";
  92. devScript.style.position = "fixed";
  93. devScript.style.width = "100%";
  94. devScript.style.height = "45px";
  95. devScript.style.bottom = "0px";
  96. devScript.style.position = "fixed";
  97. devScript.style.background = "#333";
  98. devScript.style.zIndex = "999999";
  99. //devScript.style.border = "solid 1px blue";
  100. devScript.innerHTML = myJavascript;
  101.  
  102. var opendev = document.createElement('button');
  103. opendev.style.position = "fixed";
  104. opendev.style.width = "70px";
  105. opendev.style.height = "25px";
  106. opendev.style.right = "0";
  107. opendev.style.bottom = "0";
  108. opendev.style.marginRight = "8px";
  109. opendev.style.marginBottom = "4px";
  110. opendev.style.padding = "2px 4px";
  111. opendev.style.fontSize = "14px";
  112. opendev.style.zIndex = "99999";
  113. opendev.style.borderRadius = "0px 5px 5px 0px";
  114. opendev.id = "opendev";
  115. opendev.style.background = "#080809";
  116. opendev.style.color = "#fff";
  117. opendev.style.border = "solid 1px gray";
  118. opendev.innerHTML = "F12 <i class='bi bi-chevron-double-right'></i>";
  119.  
  120. var closeButton = document.createElement('button');
  121. closeButton.style.position = "fixed";
  122. closeButton.style.right = "78px";
  123. closeButton.style.width = "40px";
  124. closeButton.style.height = "25px";
  125. closeButton.style.marginBottom = "4px";
  126. closeButton.style.borderRadius = "5px 0px 0px 5px";
  127. closeButton.style.bottom = "0";
  128. closeButton.style.zIndex = "99999";
  129. closeButton.style.padding = "2px 4px";
  130. closeButton.style.fontSize = "14px";
  131. closeButton.id = "closed";
  132. closeButton.style.background = "#080809";
  133. closeButton.style.color = "#fff";
  134. closeButton.style.border = "solid 1px gray";
  135. closeButton.innerHTML = "X";
  136.  
  137. let editando = false;
  138. let buttonId = "edit_on_or_off";
  139.  
  140.   opendev.addEventListener("click", function() {
  141.     document.body.appendChild(devconsole);
  142.     document.body.appendChild(devScript);
  143.  
  144.     var documentelements = document.getElementById('documentelements');
  145.  
  146.    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");
  147.  
  148.     documentelements.contentEditable = "true";
  149.     documentelements.addEventListener("click", function() {
  150.         if (documentelements.contentEditable !== "true") {
  151.             documentelements.contentEditable = "true";
  152.         }
  153.     });
  154.  
  155.     document.getElementById("edit_on_or_off").addEventListener("click", function() {
  156.         if (editando == false) {
  157.             document.body.contentEditable = "true";
  158.             document.body.designMode = "on";
  159.             document.getElementById("edit_on_or_off").innerHTML = "Disable \u270E";
  160.             editando = true;
  161.             document.getElementById('devconsole').remove();
  162.             document.getElementById('devScript').remove();
  163.             alert("Interface editing mode (enabled).");
  164.         } else {
  165.             document.getElementById('devconsole').remove();
  166.             document.getElementById('devScript').remove();
  167.             alert("Interface editing mode (disabled).");
  168.             window.location.reload();
  169.         }
  170.     });
  171.  
  172.  
  173.     document.getElementById("findelements").addEventListener("click", function() {
  174.         document.addEventListener("mousemove", function awesome(e) {
  175.             if (e.target.tagName != "") {
  176.                 e.target.title = e.target.tagName.toLowerCase();
  177.             }
  178.             if (e.target.id != "") {
  179.                 e.target.title += "#" + e.target.id;
  180.             }
  181.             if (e.target.className != "") {
  182.                 e.target.title += "." + e.target.className;
  183.             }
  184.         });
  185.       alert("Analyze mode activated. Hover over elements to see details.");
  186.     });
  187.  
  188.  
  189.  
  190.  
  191.     document.getElementById("getjs").addEventListener("click", function() {
  192.         var inputElement = document.getElementById('myCode');
  193.         var valorInput = inputElement.value;
  194.         console.log('meuValor = '+valorInput);
  195.         try {
  196.             // executar o código
  197.             eval(valorInput);
  198.         } catch (e) {
  199.             console.error('Erro ao executar código:', e);
  200.         }
  201.     });
  202.  
  203. });
  204.  
  205.  
  206.  
  207. closeButton.addEventListener("click", function() {
  208.     opendev.style.display = "none";
  209.     closeButton.style.display = "none";
  210. });
  211.  
  212. document.body.appendChild(closeButton);
  213. document.body.appendChild(opendev);