Quick Console bookmarklet for Desktop and Mobile

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.

Picture of me smiling.

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

Likes

Lauri Oherd Yousuf Shaikh Annie Sullivan Derek Passen Callie Jonathan Arthur Stolyar Paulus Schoutsen Saroj zoras Sagir Khan Aman Sharma Maximo Cozetti Bogdan Niculescu Ville dabder Jitendra Kasaudhan nandu Saurabh Rajpal #WeAreWebinions Keith McKiernan Imam Hidayat Benji Alexey Rodionov Mike Murkovic Sindre Wimberger Arnaud Ferrand Numbers Buzz Derek Stringer Bell’s Econ Notes Andreas J. 尹荌傑 guille~1.txt sunstro firyal fakhrilhadi ♇4n3 💬 Ashur Cabrera 😷 Wellington Torrejais da Silva (em 🏡 ) Raphaël Améaume Maximiliano Firtman Stephen Connolly 🤷🏼‍♂️ Эрик Хлынов Omar Sinan Carlos Roso Mark Llobrera Brice G Nikolay Cholakov 🙏 4 ❤ Oliver Ash Huriki trexchard Gaby Costales Sean O’Shea Experimental Web Patrick Obermeier Masataka Yakura Nicolas Hoizey KevinSia Dan marc ころな David Rousset Peter Burns Judah Gabriel 🇮🇱 יהודה גבריאל Chris Haynes Lars Knudsen in 🇩🇰 uskay Chrome DevTools George Salib® Cully Larson Julian Harris ошибки прошлого Adam Duncan Yohan Totting Patrick Traughber 𝓞 𝓗 𝓒𝓪𝓶𝓼𝓱𝓪𝓯𝓽 A. M. Sabuncu jashan Simon Bluhm Soumyajit Pathak Dan Shappir 😷 Rihanna Kedir 💙 David Wittenbrink Yishai Burt and {count} others Sander de Jong Andre 🦄 Bryan Clark Adam Silverstein Connor Clark Samir Saeedi Philipp Nowinski 🎸 Jabran Rafique I'm Jimmy 🌕 쥐미문 C/ #MissU4everCarrie Mohit Rathi aaron hans Chris "Lost Decade" Ainsley Paul Frazee ✌️ this.name = ‘Paul Grenier’; Kyle Bradshaw Eric Lawrence 🎻 Awais Rowan Merewood Roman Nurik Umer عمر 凝望的眼睛 Julien G. Nikolaj Stausbøl Cristóferson Bueno Dion Almaer Jaume Sanchez Elias Sam Thorogood rektide de la fay Alastair Coote Alexey

Reposts

Soumyajit Pathak Florian Weber Maurizio Lupo Andre 🦄 C/ #MissU4everCarrie Chris "Lost Decade" Ainsley Thomas Claburn Cristóferson Bueno Julien G. Shane Hudson

Comments and Replies

Martin SchierleMartin Schierle
Love it Paul :-) ! Sneaky feature request - if we get a good way for users to open the debug protocol port on mobile (e.g. through chrome://flags) people could build a mobile optimized devtools pwa, which could connect to main browser on debug port through websockets
Lars Knudsen in 🇩🇰Lars Knudsen in 🇩🇰
That is super cool :)
Oliver AshOliver Ash
Any ideas if this would work in UC Browser? It's literally impossible to see the logs otherwise
Paul KinlanPaul Kinlan
That's pretty incredible
Jaume Sanchez EliasJaume Sanchez Elias
holy forking shirtballs
Remi GrumeauRemi Grumeau
Boikmarklet on iOS is a thing. But it requires some extra steps from dev + users.
Chris HaynesChris Haynes
Very useful. There's also this bookmarklet that gives you a more complete devtools experience if needed: github.com/liriliri/eruda
David RoussetDavid Rousset
Excellent idea! However I can't see how I can execute that on my iPhone.
Soumyajit PathakSoumyajit Pathak
I had no idea about bookmarklet let alone such a cool way to get it working on mobile to solve a common pain point like this. One of the best things on Twitter right now. Thanks. :)
Harald Kirschner 🔥🦊🛠Harald Kirschner 🔥🦊🛠
Firebug Lite to the rescue!
Ville LahdenvuoVille Lahdenvuo
You need to bookmark some real page and then you can edit the url and paste in the Javascript.
AwaisAwais
I don't see how lol, will use the pc to do it in the morning. Useful indeed.
AwaisAwais
So handy. But can I add it via mobile. Not sure. I do know how to run it through the address bar. 🤔
Paul KinlanPaul Kinlan
Good question. You would have to copy the URL and then add it manually