So I was trying to figure out a design bug that could only be recreated in the Chrome browser on an iPhone and it was kind of a hassle. Safari on iOS and the Chrome DevTools emulator looked fine so they were no help. Xcode’s simulator and remote debugging only work with Safari so they were out too. I know there are other resources you can either pay for or take the time to install that might get the job done but I really only needed to test a couple lines of CSS.

I remembered from years back that Firebug Lite could run on any browser or mobile device but it’s actually a little heavy and hard to use on a small screen. But — looking it up — I had the epiphany that if you know JavaScript there’s no reason you can’t just make your own bookmarklet for debugging. This might be totally obvious but it took a while to occur to me so there you go.

If you want to do a really quick styling update, all you need is something like this (note: this is not the issue I was trying to fix):

javascript:(function () {
    var el = document.querySelector('body');
    el.style.color = '#fff';
    el.style.backgroundColor = '#000';
})();

Or, if you want to insert an external file:

javascript:(function () {
    var src = 'path/to/styles.css';
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = src;
    document.head.appendChild(link);
})();

Then you just open Chrome and create a dummy bookmark, select edit, and replace the URL field with your JavaScript. You can also rename the bookmark to something more accurate if you want.

For more information, TutsPlus has a useful tutorial on creating bookmarklets.