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.
Testing mobile features when you don’t have a Mac to connect to is such a pain, so this is a lifesaver. I love that the log box is collapsible and movable so it doesn’t block the UI we’re trying to test. I’m definitely going to grab that bookmarklet link from your GitHub page for my test devices.
Not having a Mac to debug on actual mobile devices is such a headache, so drawing the logs to a collapsible box at the bottom of the screen is a really clever workaround. Having it set up as a bookmarklet makes it so much easier to test on different phones on the fly. I’m definitely going to try using your GitHub Pages script on my next mobile layout project!
Not having a Mac makes debugging mobile-specific features on iOS devices such a pain, so intercepting the logs and rendering them to a movable box at the bottom of the screen is a clever workaround. It’s great that you set this up as a bookmarklet on GitHub Pages so we don’t have to manually inject the script every time. I’ll definitely be bookmarking this for the next time I need to quickly check some console.warn or error outputs on my phone.
Not having a Mac makes debugging mobile browsers such a headache, so intercepting the logs and rendering them in a collapsible box right on the screen is a really clever workaround. The bookmarklet makes it so much easier to test across multiple devices without constantly tethering them. I’ll definitely be using your GitHub Pages link next time I need to quickly check info or error logs on my phone.