A simple, droppable debugging console.

console.js

// true = wait for debugger to open | false = open on load
const waitForDebuggerOpen = false;


var aceScript = document.createElement('script');
aceScript.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.head.appendChild(aceScript);

var jqueryScript = document.createElement('script');
jqueryScript.src = "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js";
document.head.appendChild(jqueryScript);

var w3link = document.createElement('link');
w3link.rel = 'stylesheet';
w3link.href = 'https://www.w3schools.com/w3css/4/w3.css';
document.head.appendChild(w3link);

var dbggrbody = document.createElement("div");
var closeBtn = document.createElement("button");
var consoleInput = document.createElement("div");
var consoleOutput = document.createElement("div");
var infoSpan = document.createElement("div");

dbggrbody.style.display = "none";
dbggrbody.style.zIndex = "10";

infoSpan.innerHTML = "<code>EVAL = CTL + ENTER</code>";
infoSpan.style.color = "whitesmoke";
infoSpan.style.backgroundColor = "#222221";

closeBtn.style.float = "right";
closeBtn.innerText = "Close";
closeBtn.style.cursor = "pointer";

dbggrbody.id = "dbggrbody";
dbggrbody.style.left = "0";
dbggrbody.style.border = "10px solid #1e1e1e"

consoleOutput.id = "console-output";
consoleOutput.style.backgroundColor = "black";
consoleOutput.style.color = "whitesmoke";
consoleOutput.style.width = "100%";
consoleOutput.style.height = "20%";
consoleOutput.innerText = " >>> ";
consoleOutput.classList.add("w3-serif");

consoleInput.id = "console-input";
consoleInput.style.width = "100%;";
consoleInput.style.paddingTop = "50%";

document.body.appendChild(dbggrbody);
dbggrbody.appendChild(infoSpan);
infoSpan.appendChild(closeBtn);
dbggrbody.appendChild(consoleOutput);
dbggrbody.appendChild(consoleInput);


var dbggrIsRunning = false;






// WAIT HERE ->

if (!waitForDebuggerOpen){
  // DEBUG
  dbggrbody.style.display = "block";
  dbggrIsRunning = true;
}
else
{
  setInterval(() => { 
    if (!dbggrIsRunning){
      var murt = 100; // MINIMUM USER RESPONSE TIME
      var before = new Date().getTime();
      debugger;
      var after = new Date().getTime();
      if (after - before > murt) { // user had to resume the script manually via opened dev tools 
        dbggrbody.style.display = "block";
        dbggrIsRunning = true;
      }
    }
  }, 100);  
}


setTimeout(() => {

  var editor = ace.edit("console-input");
  editor.setTheme("ace/theme/monokai");
  editor.session.setMode("ace/mode/javascript");
  editor.resize();
  editor.renderer.updateFull();

  $('#console-input').keydown((e) => {
  // BACKSPACE KEYCODE IS 8
    if (e.ctrlKey && e.keyCode == 13 && dbggrIsRunning) {
        try
        {
          var inputBuffer = editor.getValue();
          if (inputBuffer.length > 1)
          {

            // EVAL ENTIRE STATEMENT
            if (inputBuffer == undefined || inputBuffer === undefined)
            {consoleOutput.innerText = " >>> ";}
            
            else {
              try {consoleOutput.innerText = " >>> " + eval(inputBuffer);}
              catch(E)
              {consoleOutput.innerText = " >>> " + E;}  
            }

          } else consoleOutput.innerText = " >>> ";
        } catch(F) {consoleOutput.innerText = " >>> " + F;}
    }
  });

  $('#console-input').keydown((e) => {
    if (e.ctrlKey && e.keyCode == 8 && dbggrIsRunning) {
      editor.setValue("");
      alert("CLEARED!");
    }
  });

  closeBtn.onclick = () => {
    dbggrbody.style.display = "none";
    dbggrIsRunning = false;
  }

}, 1000);