Question

I’d like to be able to make the JavaScript I’ve got in a web page behave differently by doing something or setting something externally. So there’ll be logic checking if(something) execute functionality one, else execute functionality two. I can think of three ways of doing this, but I don’t like any of them enough to choose it. At least not unless I can see if there’s another blindingly obvious way of doing it that’s somehow escaping me at the moment.

1. Add a harmless query string to the URL (e.g. ?choose_functionality_one=true) and my logic can simply look in the page URL. The reason I don’t like this is the case where my code is running inside a cross-domain iframe and I can’t even access the page’s URL (only the iframe’s URL). Yes I could pass the query string to the iframe, but only if I have control over the parent page, and I don’t.

2. Create a cookie in the domain of the page, and my logic can simply look for it in document.cookie. This could be done with a bookmarklet easily enough, and wouldn’t suffer from the cross-domain problem, because I simply open a window/tab to the domain where my code is running and run the bookmarklet in that context. This is my front-runner choice at the moment.

3. Add something to the browser’s useragent string and look for that in my logic. Pretty easy on Firefox via about:config, but is less easy with the other browsers, and downright difficult on the Mac. Also, on some browsers, once you’ve set a custom value, you lose the ability to have the UA get auto-updated when you get a browser update. Your UA’s version info is stuck in time to where it was when you first custom’ed it.

Can anyone think of another way that via email/IM/phone I can say to someone “do this” and they’ll see the page behave differently for troubleshooting purposes. For the general population who haven’t done that though, it’s running completely normally.

Answer 1

The simplest option seems to be to make a debug page on your site that will let the user turn the “debug” cookie on/off and then queue your regular site code off the existence of the cookie. I’d suggest making the debug cookie expire in a fairly short amount of time so people don’t inadvertently leave it on.

This option has the advantages you are interested in (no user agent modification, works on all platforms, works with iframes) and I can see no disadvantages except that it wouldn’t work if someone had cookies off, though a lot of the web won’t work without cookies these days so that seems like something you could live with.

In addition, it’s also the simplest for your users to use. You can just direct them to the right page on your site and all they have to do is click the desired button to turn it on or off. You can make the page very self explanatory which is certainly much easier than any of the other options.

OK, if you only control code and no HTML, then you could do either implement a keyboard shortcut key that would enable the debug mode by setting the cookie. The instructions could be something like this: put the keyboard focus in X and then press Ctrl-D.

Or, you could implement some special type of click (like a Ctrl-click on some object or in some page corner). In this case the instructions could be something like: Hold down the Ctrl-key and click on object X on the page.

Your JS code could implement either of those shortcuts. You could even put up a prompt (all with dynamically created HTML objects) when the special key/click was engaged to confirm turning the debug mode on or off.