I am working on a web project for a client with mobile-specific features and I needed to be able to do a lot of console.log() and I quickly found out that you can’t really do that on an actual mobile browser without connecting the device to a computer. This is fair and I get it but it’s annoying when you have to test a bunch of different devices or you don’t have a Mac. Especially when all you want to do is look at what get’s written to console.log().
So I put together a quick JavaScript that intercepts calls to console.log() and writes them to the dom in a neat little box that sits at the bottom of the screen. You can move it around and collapse it if you want, too. The script is hosted on my GitHub pages so that it can be used by anybody from anywhere and I even made a bookmarklet link for you and script element that you can copy-paste. https://matthewcv.github.io/mobiledebug.html
It only implements log(), info(), warn() and error() for now. The next thing I want to do is implement dir() and I think it would also be useful if it gave you a place to run arbitrary JavaScript code just like the developer console in desktop browser.
This is exactly the kind of hack I’ve been needing—I’ve been doing the whole “alert() everything” dance on mobile because I don’t have a Mac for Safari remote debugging. Intercepting console.log and shoving it into a draggable DOM box is clever, especially since you even included the bookmarklet for quick injection. Gonna try it out on my Android tablet later.
This is exactly the kind of quick fix I’ve needed more times than I can count—tethering devices to a computer just to see a console.log is such a bottleneck, especially when you’re juggling multiple phones. I love that you made it a bookmarklet and hosted it on GitHub Pages so anyone can grab it without setting up a whole dev environment. The draggable, collapsible box approach sounds way more practical than the usual remote debugging setup.