Sometimes when I am on my mobile, I just want quick access to the JS console so that I can see what is going on inside the web page: Does the page have any logs, warnings or errors etc; without having to plug my phone into a laptop and hooking up to Chrome DevTools.
I really wish you could use DevTools more easily on a mobile device. That being said, I have a partial solution that solves my problem.
Now that I know how to access bookmarklets, I realised it might be possible to create a simple tool that will show me the console log of what is happening on the page.
If you want to experiment with this, just drag this Developer Console link to your bookmarks bar.
The above link when clicked will open up a small detail element anchored to the bottom of the page, when opened will show all of the console logs, warnings and errors since the bookmark was activated (it can't retrospectively access what was added to the log beforehand).
It's a simple tool, but it gives me just enough insight (especially if you like to debug with console.log)
Below is a quick video showing how the bookmarklet works:
The code for the bookmarklet is below:
(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 = `
#${id} {
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);
}
#{id}[open] {
right: 0px !important;
height: 5em;
}
#{id}:not(open) summary {
padding-right: 1em;
}
#${id} div {
height: 3em;
max-height: 3em;
overflow: auto;
}
#${id} p {
font-size: 12px;
}
#${id} p.log:before {
content: "Log: ";
}
#${id} p.warn {
color: orange;
border-top: solid 1px orange;
border-bottom: solid 1px orange;
}
#${id} p.warn:before {
content: "Warn: ";
}
#${id} p.error {
color: red;
border-top: solid 1px red;
border-bottom: solid 1px red;
}
#${id} p.error:before {
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");
if (type in count == false) count[type] = 0;
count[type]++;
summary.innerText = `Console: L: ${count["log"] || 0}, W: ${count["warn"] ||
0}, E: ${count["error"] || 0}`;
logElement.className = type;
logElement.innerText = `${args}`;
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);
})();
When clicked we create a details element, a set of styles, a summary element (that contains a running tally of the console logs) and a container that will hold all the logs and add it to the page.
We then intercept every call to console.log, console.warn and console.error, add the details to the details container and then invoke the original log (so that it will actually appear in DevTools).
And, that's about it. It's a simple utility that's not supposed to replace proper devtools, but it can quickly help you find an issue in the page without any extra tooling required.