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.
I lead the Chrome Developer Relations team at Google.
We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.
Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.
I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.
I'm trialing a newsletter, you can subscribe below (thank you!)
