☰

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

// ==UserScript==
// @name         custom devconsole
// @namespace    http://tampermonkey.net/
// @version      0.3
// @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...)
// @author       twarped
// @match        http*://*/*
// @grant        none
// ==/UserScript==
var body = `<div style="width:99.5%;height:10%;top:0px;background:white;border-style:solid;">
<button style="float:left;" id="edit_on_or_off">`+"\u270E"+`</button>
<button style="float:left;" id="findelements">`+"\uD83D\uDD0D"+`</button>
<a style="float:left;" id="go_console">console</a>
<a style="cursor:pointer;float:right;" id="exit" href="javascript:document.getElementById('devconsole').remove();">X</a>
</div>
<div style="width:5%;height:100%;float:right;right:0px;" id="commands">
<button id="save" style="width:100%;height:10%;top:0px;float:right;" onclick="javascript:document.documentElement.innerHTML = document.getElementById('documentelements').textContent;">save</button>
<button id="load" style="width:100%;height:10%;float:right;bottom:0px;" onclick="javascript:document.getElementById('documentelements').textContent = document.documentElement.outerHTML;">load</button>
</div>
<div id="elements" style="width:100%; height:90%;bottom:0px;">
<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%;"/>
</div>`;
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:sticky;width:100%;height:220px;bottom:0px;top:0;background:grey;z-index:2000;";
devconsole.innerHTML = body;
var opendev = document.createElement('button');
opendev.style = "position:fixed;right:0;top:0;z-index:2000;";
opendev.id = "opendev";
opendev.innerHTML = "OPEN DEV";
opendev.addEventListener("click",function(){
    document.body.appendChild(devconsole);
    var documentelements = document.getElementById('documentelements');
    documentelements.textContent = document.documentElement.outerHTML.replace(/&lt;/g,"<").replace(/&gt;/g,">");
    documentelements.addEventListener("dblclick",function(){
        if(documentelements.contentEditable != "true"){
            documentelements.contentEditable = "true";
        } else{
            documentelements.contentEditable = "false";
        };
    });
    document.getElementById("edit_on_or_off").addEventListener("click", function () {
        if (document.body.contentEditable != "true" || document.body.designMode != "on") {
            console.log("Editing elements: true");
            document.body.contentEditable = "true";
            document.body.designMode = "on";
        } else {
            console.log("Editing elements: false");
            document.body.contentEditable = "false";
            document.body.designMode = "off";
        }
    });
    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;
    }
    }); 
    });
});
document.body.appendChild(opendev);