A draggable, resizable console panel with a Run button for executing JS on any page; toggled with Ctrl+Q
// ==UserScript==
// @name Developer Console(Toggle with Ctrl+Q)
// @namespace http://tampermonkey.net/
// @version 3.3
// @description A draggable, resizable console panel with a Run button for executing JS on any page; toggled with Ctrl+Q
// @match *://*/*
// @grant none
// @license MIT
// ==/UserScript==
(function () {
'use strict';
// Create console panel
const panel = document.createElement("div");
panel.style.position = "fixed";
panel.style.bottom = "10px";
panel.style.right = "10px";
panel.style.width = "350px";
panel.style.height = "260px";
panel.style.background = "#111";
panel.style.color = "#0f0";
panel.style.fontFamily = "monospace";
panel.style.fontSize = "12px";
panel.style.border = "2px solid #0f0";
panel.style.zIndex = "999999";
panel.style.display = "none"; // Start hidden
panel.style.flexDirection = "column";
panel.style.resize = "both";
panel.style.overflow = "hidden";
// Header bar (draggable)
const header = document.createElement("div");
header.innerText = "🔍 Developer Console V3.2 (created by Jayden)";
header.style.background = "#222";
header.style.padding = "5px";
header.style.cursor = "move";
header.style.userSelect = "none";
// Output area
const output = document.createElement("div");
output.style.flex = "1";
output.style.overflowY = "auto";
output.style.padding = "5px";
// Input area
const input = document.createElement("textarea");
input.placeholder = "Enter JavaScript code... (Shift+Enter for new line)";
input.style.width = "100%";
input.style.height = "60px";
input.style.border = "none";
input.style.outline = "none";
input.style.padding = "5px";
input.style.background = "#222";
input.style.color = "#0f0";
input.style.fontFamily = "monospace";
input.style.fontSize = "12px";
input.style.resize = "none";
// Run button
const runBtn = document.createElement("button");
runBtn.innerText = "▶ Run Code";
runBtn.style.background = "#0f0";
runBtn.style.color = "#000";
runBtn.style.border = "none";
runBtn.style.padding = "5px";
runBtn.style.cursor = "pointer";
runBtn.style.fontWeight = "bold";
runBtn.style.fontSize = "12px";
// Execute code on button click
runBtn.addEventListener("click", () => {
executeCode(input.value);
});
// Execute on Enter key (but allow Shift+Enter for new line)
input.addEventListener("keydown", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
executeCode(input.value);
}
});
// Function to execute code
function executeCode(code) {
try {
let result = eval(code);
output.innerHTML += `<div>> ${code}</div>`;
output.innerHTML += `<div style="color:#0ff;">${result}</div>`;
} catch (err) {
output.innerHTML += `<div style="color:red;">Error: ${err}</div>`;
}
input.value = "";
output.scrollTop = output.scrollHeight;
}
// Dragging logic
let isDragging = false;
let offsetX, offsetY;
header.addEventListener("mousedown", (e) => {
isDragging = true;
offsetX = e.clientX - panel.offsetLeft;
offsetY = e.clientY - panel.offsetTop;
document.addEventListener("mousemove", drag);
document.addEventListener("mouseup", stopDrag);
});
function drag(e) {
if (isDragging) {
panel.style.left = (e.clientX - offsetX) + "px";
panel.style.top = (e.clientY - offsetY) + "px";
panel.style.bottom = "unset";
panel.style.right = "unset";
}
}
function stopDrag() {
isDragging = false;
document.removeEventListener("mousemove", drag);
document.removeEventListener("mouseup", stopDrag);
}
// Capture console.log
const originalLog = console.log;
console.log = function (...args) {
output.innerHTML += `<div style="color:#0f0;">LOG: ${args.join(" ")}</div>`;
output.scrollTop = output.scrollHeight;
originalLog.apply(console, args);
};
// Append elements
const controls = document.createElement("div");
controls.style.display = "flex";
controls.appendChild(runBtn);
panel.appendChild(header);
panel.appendChild(output);
panel.appendChild(input);
panel.appendChild(controls);
document.body.appendChild(panel);
// Listen for Ctrl+Q to toggle console panel
window.addEventListener("keydown", (e) => {
if (e.ctrlKey && !e.shiftKey && e.code === "KeyQ") {
e.preventDefault();
if (panel.style.display === "none") {
panel.style.display = "flex";
input.focus();
} else {
panel.style.display = "none";
}
}
});
})();