☰

custom devconsole

dev console that overrides school policies, doesn't have cool stuff like snowlord7's devconsole, but allows you to edit the DOM (if you know what i mean...)

当前为 2019-10-11 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         custom devconsole
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  dev console that overrides school policies, doesn't have cool stuff like snowlord7's devconsole, but allows you to edit the DOM (if you know what i mean...)
  6. // @author       twarped
  7. // @match        http*://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10. var body = `<div style="width:99.5%;height:10%;top:0px;background:white;border-style:solid;">
  11. <button style="float:left;" id="edit_on_or_off">`+"\u270E"+`</button>
  12. <button style="float:left;" id="findelements">`+"\uD83D\uDD0D"+`</button>
  13. <a style="float:left;" id="go_console">console</a>
  14. <a style="cursor:pointer;float:right;" id="exit" href="javascript:document.getElementById('devconsole').remove();">X</a>
  15. </div>
  16. <div style="width:5%;height:100%;float:right;right:0px;" id="commands">
  17. <button id="save" style="width:100%;height:10%;top:0px;float:right;" onclick="javascript:document.documentElement.innerHTML = document.getElementById('documentelements').textContent;">save</button>
  18. <button id="load" style="width:100%;height:10%;float:right;bottom:0px;" onclick="javascript:document.getElementById('documentelements').textContent = document.documentElement.outerHTML;">load</button>
  19. </div>
  20. <div id="elements" style="width:100%; height:90%;bottom:0px;">
  21. <div id="documentelements" style="width:93%;height:90%;float:left;white-space: pre;font-size:14px;line-height:1.6;background:white;overflow:scroll;left:2%;"/>
  22. </div>`;
  23. function show (elem) {
  24.     elem.style.display="block";
  25.     elem.style.x=all.x;
  26.     elem.style.y=all.y+20;
  27.     elem.textContent = "";
  28. };
  29. function hide (elem) {
  30.     elem.style.display="";
  31.     elem.textContent = all.id + all.style + all.tagName;
  32. };
  33. var all = document.querySelector("*");
  34. var devconsole = document.createElement('div');
  35. devconsole.id = "devconsole";
  36. devconsole.style = "position:sticky;width:100%;height:220px;bottom:0px;top:0;background:grey;z-index:2000;";
  37. devconsole.innerHTML = body;
  38. var opendev = document.createElement('button');
  39. opendev.style = "position:fixed;right:0;top:0;z-index:2000;";
  40. opendev.id = "opendev";
  41. opendev.innerHTML = "OPEN DEV";
  42. opendev.addEventListener("click",function(){
  43.     document.body.appendChild(devconsole);
  44.     var documentelements = document.getElementById('documentelements');
  45.     documentelements.textContent = document.documentElement.outerHTML.replace(/&lt;/g,"<").replace(/&gt;/g,">");
  46.     documentelements.addEventListener("dblclick",function(){
  47.         if(documentelements.contentEditable != "true"){
  48.             documentelements.contentEditable = "true";
  49.         } else{
  50.             documentelements.contentEditable = "false";
  51.         };
  52.     });
  53.     document.getElementById("edit_on_or_off").addEventListener("click", function () {
  54.         if (document.body.contentEditable != "true" || document.body.designMode != "on") {
  55.             console.log("Editing elements: true");
  56.             document.body.contentEditable = "true";
  57.             document.body.designMode = "on";
  58.         } else {
  59.             console.log("Editing elements: false");
  60.             document.body.contentEditable = "false";
  61.             document.body.designMode = "off";
  62.         }
  63.     });
  64.     document.getElementById("findelements").addEventListener("click",function(){
  65.         var findstuff = document.createElement('div');
  66.         findstuff.style.display = "";
  67.         findstuff.id = "info-tooltip";
  68.         document.body.appendChild(findstuff);
  69.         var find = document.getElementById('info-tooltip');
  70.     all.addEventListener("mouseover",show(find));
  71.     all.addEventListener("mouseout",hide(find));
  72.     });
  73. });
  74. document.body.appendChild(opendev);