Using Firefox Containers for Web Development

Recent­ly I’ve been work­ing on new fea­tures for CraftQuest. This work is most­ly cen­tered around Learn­ing Path­ways and some dash­board improve­ments. The new fea­tures depend on a logged-in account (and some­times dif­fer­ent things for dif­fer­ent account types).

One of the chal­lenges of work­ing on a web­site or web appli­ca­tion where there are dif­fer­ent account types is access­ing mul­ti­ple accounts at once while test­ing and cod­ing. In the past I’ve jug­gled mul­ti­ple browsers or pri­vate brows­er win­dows. Both are very effec­tive but become dif­fi­cult to man­age (espe­cial­ly pri­vate brows­er win­dows because your history/​sessions/​cookies are not saved) when test­ing mul­ti­ple accounts.

One workaround to the brows­er jug­gling is Fire­fox Con­tain­ers. Con­tain­ers was orig­i­nal­ly cre­at­ed to wall off your brows­ing to pro­tect your pri­va­cy. Think about how being logged-in to Face­book allows their track­er to track every­thing you do online. You can keep your Face­book brows­ing in a sep­a­rate Fire­fox con­tain­er than your per­son­al brows­ing, bank­ing, or work.

But I have dif­fer­ent plans for Con­tain­ers than privacy. 

What are Con­tain­ers in Fire­fox? #

Con­tain­ers are iso­lat­ed brows­ing ses­sions that can span one or more tabs. Each tab you open can be assigned to a cer­tain Con­tain­er and have access to the brows­ing his­to­ry, stored data, etc. of the oth­er tabs in that Container.

To make this pos­si­ble each Con­tain­er in Fire­fox has its own iso­lat­ed part of the web brows­er storage.

This means I can set up a con­tain­er for being logged in as an admin user on the CraftQuest con­trol pan­el, anoth­er con­tain­er for being logged in as a month­ly sub­scriber stu­dent, and yet anoth­er for being logged in as a free account student.

Instead of jug­gling mul­ti­ple pri­vate brows­er win­dows or even mul­ti­ple browsers, I can do it all right inside of a sin­gle win­dow. And, to make things even nicer, Fire­fox lets you label and col­or code the con­tain­ers so it easy to see, at a glance, which con­tain­er you’re using. I’ve long want­ed some­thing like this for devel­op­ment work and I’m glad Fire­fox has it.

But the con­tain­ers func­tion­al­i­ty isn’t (yet?) built into the Fire­fox brows­er. You still need to install an add-on to get that Containers.

Installing Fire­fox and Con­tain­ers #

Before we install the Fire­fox Con­tain­ers add-on we need first make sure we have Fire­fox installed. Pri­or to using this fea­ture I didn’t have Fire­fox installed on every machine, so this was my first step.

Fire­fox was the brows­er du jour years ago but fell out of favor when Google Chrome came along. It’s now quite good again and you can get Fire­fox for your oper­at­ing sys­tem from the offi­cial web­site.

Once you have it down­loaded and installed for your sys­tem, it’s now time to get the Con­tain­ers exten­sion. The eas­i­est way to get the exten­sion is to vis­it this add-on page and install it. You’ll be prompt­ed to con­firm the down­load and then it will install. 

Once installed the exten­sion will be avail­able in your brows­er tool­bar via the Con­tain­ers icon (it looks like a few square box­es and a + sign).

Using Fire­fox Con­tain­ers #

The add-on will include some default con­tain­ers for you based on the devel­op­er sug­gest­ed usage. Remem­ber, this fea­ture wasn’t orig­i­nal­ly cre­at­ed to help us with web devel­op­ment. Its intent was to help peo­ple more safe­ly browse the web by not allow­ing the inter­min­gling of cook­ies and brows­er his­to­ry. Thanks, Facebook.

But we can ignore — or delete — the default con­tain­ers and build our own. I’m going to build three con­tain­ers for the my local devel­op­ment of CraftQuest.

The three con­tain­ers I need are:

• CraftQuest Admin — the con­tain­er where I’ll be logged in as a site admin user in order to man­age changes to the site set­tings, con­trol pan­els etc.
• CraftQuest Sub­scriber Stu­dent — a sub­scrib­ing stu­dent account
• CraftQuest Free Stu­dent — a free stu­dent account

To cre­ate a new con­tain­er, you use the Con­tain­ers icon and then the + but­ton. Give each con­tain­er a name, col­or, and icon. I like to use the dot icon because it’s sim­ple and isn’t a distraction.

{.img-flu­id}

And that’s all there is to it. Now when I start work­ing on a CraftQuest devel­op­ment task I open each con­tain­er and go to the site. Most times my ses­sions are intact and I can quick­ly use those three dif­fer­ent accounts for con­fig­u­ra­tion or testing.

{.img-flu­id}

A Few Tips #

Here’s some more infor­ma­tion I learned while using Containers:

• The con­tain­ers can be tied to a spe­cif­ic domain. This is great if you only want a con­tain­er to be used for your bank­ing web­site or for a social media site like Face­book. But not as good for sites where you have sub­do­mains because (like stage.craftquest.io) because the con­tain­er looks that root domain, not any subdomains.
• You can use the con­tain­ers for dif­fer­ent domains. I use my admin con­tain­er to han­dle admin ses­sions for all three envi­ron­ments (local, stag­ing, pro­duc­tion). Same goes for my oth­er con­tain­ers. This reuse helps me keep my con­tain­ers at a minimum. 
• Open­ing a new tab with the same con­tain­er as the active tab is as easy as ⌘-click­ing the + but­ton on macOS or ctrl-click­ing on Windows.

If you want a visu­al guide to this arti­cle, check out my video les­son on using Fire­fox con­tain­ers.