When blank isn’t blank

A quick gotcha I just got blindsided by, figured I’d share for posterity sake.

about:JS-in-the-console

You may know that I teach JS for a living. One of the most common practices I employ, and most other teachers and presenters in JS I’ve seen also use, is to demonstrate core JS topics by running code directly in the developer tools web-console.

For such purposes, generally speaking, you’d want to run JS code in a fresh, empty JS environment, rather than inside some real page which may have changed/overridden parts of the default global environment.

For example, yesterday I found what I thought was a bug in FF implementation of promises, but as it turns out, what I thought was a fresh clean “about:blank” was actually the “about:newtab” new tab page in FF, which as it turns out bastardizes some of the normal fresh JS environment, like overriding it with a custom non-spec-compliant Promise shim, etc. I’ve heard rumors, and from time to time sniffed out myself, other weirdnesses in the JS environment of that page.

Point being, if you plan to try out some JS code in the web console, and you don’t want any side effects, you better make sure you’re in a clean environment. Most developers, it seems, assume that “about:blank” is that environment, just like I do.

Note: Obviously, it’s not a real page where you can just code against any random web API and expect normal behavior. You only use this when you’re coding pure JS itself, like testing out what ~~"11.3" does.

about:blank

For literally 15+ years of my webdev career, I have had the habit of making my browser homepage be “about:blank”.

Years ago, when browsers introduced these special “new tab” pages into browsers, I was frustrated by the non-”about:blank”‘ness of them, and so I (like many of you) struggled and eventually found ways to get my new tabs to be “about:blank” by default (or so I thought, until yesterday).

In FF, my new tabs were showing all that google search box and tiles crap that I didn’t want, and so forever ago I’m sure, I hid that content by clicking the little gray 9-boxes-grid icon in the upper-right of that page, to hide all that content. The page sure looks like “about:blank” now.

In fact, so much so that my eyes trained themselves quickly to be completely blind to that little icon anymore. I literally haven’t noticed it in all this time since I made that page “blank”. I forgot it was there, and my eyes just ignored its even existence.

Moreover, both the actual “about:blank” page and the weird-almost-completely-blank-but-problematic “about:newtab” page show an empty value in the address bar, further reinforcing in my err’d eyes and brain that they were the same.

about-blank vs about-newtab

In fact, FF goes to lots of trouble to try to trick you into thinking this, I’m convinced. Because, bizarrely, even if you type “about:blank” into the address bar, and hit <enter>, it hides what you just typed, just as if the new-tab page you’re currently on (and don’t know it!) is exactly the same as the “about:blank” you’re trying to go to.

So for all this time, I’ve been using the new-tab page in FF thinking it was basically the same as “about:blank”. Then that promises bug linked above hit me. And I now realize how dangerous that’s been for me.

I don’t know if I’m the only one, but I imagine there’s some other developers out there who’ve been led astray as I was. For you, this post exists.

about:fixing

In both FF and Chrome, you can make your home-page be “about:blank” in their general settings, pretty easily.

In FF: “General -> When Firefox starts -> Show a blank page” and “General -> Homepage -> about:blank”.

In Chrome, it’s slightly different: “General -> On Startup -> Open a specific set of pages -> about:blank” and “General -> Show Home button -> about:blank”.

But the home-page is not used by default for new tabs. So how do you fix this?

This is where it gets hairy.

In FF, there’s no UI setting for it. You have to go into about:config, and find the “browser.newtab.url” setting, and change it to “about:blank” (it’ll probably by default be that “about:newtab” URL).

I’ve now made that setting change, so all my tabs in FF start out as the legitimate “about:blank” page.

But Chrome is not quite so nice. There’s no UI setting for the new-tab behavior. In fact, there’s apparently nothing in chrome:flags either.

There’s a preferences file for Chrome on your filesystem. On my mac, for Chrome Canary (nightly), it’s here: /Users/{my-username}/Library/Application\ Support/Google/Chrome\ Canary/Default/Preferences. Your location may vary.

In that file, you can find/set “extensions -> chrome_url_overrides -> newtab”, and set it to something like [ "about:blank" ]. BUT THIS DOESN’T WORK LIKE YOU’D THINK IT SHOULD. Chrome will erase such a setting, and just use the default Chrome new-tab page (which is not customizable to the same blankness state that FF’s is).

Yay. Thanks Chrome! Protecting me from myself. Totally what I want!

So, you have to get a Chrome extension to do this for you. I use “Blank New Tab” (I know there are several others, too). Install it, and it will automatically substitute in a suitable blank environment page for each new tab opened.

Interestingly, if you go look back at your preferences file now, it will show something like this setting for “newtab”: [ "chrome-extension://pfdloiaebhgmjpaclbbodcmlmppkakjh/newtab.html" ].

Now, if you go look at (again, the path on my system, YMMV) /Users/{my username}/Library/Application\ Support/Google/Chrome\ Canary/Default/Extensions/pfdloiaebhgmjpaclbbodcmlmppkakjh/0.0.1_0/newtab.html, you’ll see it’s literally an empty .html file.

Perfect! That seems to be exactly what we want!

I haven’t really run into any problems in Chrome with this new tab page being different in JS behavior to the “about:blank” page. It tweaks my OCD that sometimes I’m using “about:blank” and sometimes this blank new-tab extension file. But… alas… that’s Chrome for ya.

about:summary

There ya go. Hopefully that helps you get a really blank page for coding JS into the web-console.

Footguns beware: we’re destroying you whenever and wherever we can, even when browser vendors seem intent on forcing you upon us.

Posted in: Misc by getify No Comments ,