ブックマークレットからconsole.logを簡易的に表示

ブックマークレットからjs呼び出して、画面上にconsole.logを表示できるやつ

スマホのちょっとしたデバッグに快適らしい

PC等につないで開発者モードとかやらないですむ

適当な要素を作って表示した上で、console.logを上書きすることで実現している

code:js

(function() {

const id = "consoleElement12312312khfasdakh";

if (document.getElementById(id) === undefined) return;

const consoleElement = document.createElement("details");

consoleElement.id = id;

const scopedStyle = document.createElement("style");

const container = document.createElement("div");

scopedStyle.innerText = `

position: fixed;

max-height: 5em;

bottom: 0px;

left: 0px;

border: 1px solid red;

z-index: 100;

backdrop-filter: blur(5px);

padding-left: 1em;

font-family: monospace;

margin: 1em;

background-color: rgba(250, 235, 215, 0.4);

}

right: 0px !important;

height: 5em;

}

padding-right: 1em;

}

height: 3em;

max-height: 3em;

overflow: auto;

}

font-size: 12px;

}

content: "Log: ";

}

color: orange;

border-top: solid 1px orange;

border-bottom: solid 1px orange;

}

content: "Warn: ";

}

color: red;

border-top: solid 1px red;

border-bottom: solid 1px red;

}

content: "Error: ";

}`;

const summary = document.createElement("summary");

summary.innerText = "Console: L: 0, W: 0, E: 0";

consoleElement.appendChild(scopedStyle);

consoleElement.appendChild(summary);

consoleElement.appendChild(container);

const log = console.log.bind(console);

const error = console.error.bind(console);

const warn = console.warn.bind(console);

const count = {};

const output = function(type, fn, ...args) {

const logElement = document.createElement("p");

logElement.className = type;

container.appendChild(logElement);

logElement.scrollIntoView({behavior: "smooth", block: "start" });

fn(...args);

};

console.log = function(...args) {

output("log", log, ...args);

};

console.warn = function(...args) {

output("warn", warn, ...args);

};

console.error = function(...args) {

output("error", error, ...args);

};

document.body.appendChild(consoleElement);

})();