CraftQuest Articles

Tutorials, tips, and thoughts on Craft CMS, modern web development, and more.

Image

Using Firefox Containers for Web Development

Posted on Mar 25, 2019 by Ryan Irelan

Reading time: 2 minutes, 30 seconds

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.

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.

Firefox containers

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.

Related Posts
© 2018 Mijingo, LLC