Using Bookmarklets for Basic Chrome for iOS Debugging
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.
