Getting started with Firefox
Thinking about using Firefox as your main browser? Get started here.
September 25, 2020
I’ve been using Firefox for several years as one of my preferred browser, but only recently started using it as my main browser for development. Part of my decision is that it’s open-source and is more committed to privacy than some other browsers, and the Firefox developer edition has some great features that I use all the time. If you’ve decided to try out Firefox for the first time, or are returning to it from another browser this article might help you get started.
In this article
There are a five different release versions of the Firefox browser, it’s a good idea to understand the differences before you choose which one to use. These five versions are actually called update channels. Each channel will receive different updates based on the release timeline.
If you already have Firefox installed and you’re not sure what update channel you are on you can do the following:
- In the address bar type
- Then in the search box that appears type
app.update.channel. On the right hand side you’ll see the channel name.
|Firefox Extended Support Release (ESR)||esr||Special releases. Stable||This is a special update channel which is used by large organizations that need extended support. New features are not included regularly in this version. Features are supported for over a year with security and stability updates.|
|Firefox||release||Final releases. Stable||This is the official release. After another 4 weeks of stabilizing the features included in Beta, a new version of Firefox is shipped.|
|Firefox Beta||beta||Betas / release candidates. Mostly Stable||Every 4 weeks, features that are stable enough, are included in a new version of Beta. This is the most stable pre-release build.|
|Firefox Developer Edition||aurora||Pre-beta. Unstable with bugs||Each release includes the features that have been stabilized from the nightly builds. Includes experimental developer tools and preferences tailored for web devs. New features that are included in this channel are stablilized for 12 weeks prior to appearing in the released version|
|Firefox Nightly||nightly||Nightly builds. Crashes, unstable with bugs||Every night Firefox Nightly is built from the latest code. This build contains all the latest features that are still actively being developed.|
Firefox is currently on a four week release schedule, which means every four weeks there will be a new version of release. Here’s an illustration to better understand what this looks like.
I personally use Firefox Developer Edition. It’s usually pretty stable, it contains all the latest features before they become approved, and mostly because I use the experimental dev tools all the time such as the visual editing tools and the CSS grid tool. Many people also run multiple versions of Firefox at the same time.
One takeaway from this should be that unless you’re using the release channel then it’s very possible that there will be bugs and even crashes. If you’re interested in learning more about releases, check out this wiki page on the Firefox release process.
Once I’ve decided on a version, downloaded and installed it, I like to spend a bit of time configuring Firefox to get it looking and feeling the way I want. Configuring Firefox with your preferences can save you time by making frequently used tools and web apps easily accessible. Here are a few things I do to configure Firefox for my workflow.
Pinned Tabs are a great way to organize your frequently used websites. Pinned Tabs cannot be accidentally closed, and will open automatically open when you launch Firefox. I use Pinned Tabs for things I use frequently like GitHub and Trello. Create Pinned Tabs Right-click on the tab you want to pin and select
Pin Tabfrom the menu.
Containers are can be thought of as regular tabs but the websites that you visit are separated into containers. Each container can only access its own slice of the browser’s storage, so cookies available in one container will not be available in another. I like to keep all my work related websites in one container and personal domains in another container. Containers in combination with Pinned Tabs, allow me to launch Firefox with all my preferred domains in an organized way. I use the containers feature mainly for organization not privacy, if you’re interested in learning more about browser privacy check out Privacytools.io. * To manage containers in Firefox you’ll need to first install Multi-account Containers.
Toolbar & overflow menu allow you to customize the what tools and features are easily accessible. You can customize these areas by doing the following: Click the
menubutton in the top right hand corner of the browser Then choose
Customize* Drag your preferred tools to either the toolbar or the overflow menu.
Themes. The default theme and optional Light and Dark themes are decent but I like to customize things a bit. Changing the theme will change the appearance of the browser, often just changing the color scheme and background picture of the toolbar. I’m currently rocking the Fox Hexagon theme by Kengo.S. If you’re feeling creative you can design your own theme.
If you’re working with a browser regularly it can be a real benefit to learn the basics of using one. I think that it’s especially important if you’re in a technical role that requires you to use a browser with a client present. I’ve been in a ton of recording sessions, creative meetings, live events and product presentations where I’ve been called upon to perform some browser based task. Effective and knowledgeable use of a browser in front of clients can help enhance their confidence in you. Here are some of the general shortcuts I use regularly.
- Focus the Address Bar
F5. I’m sure you’re familiar with Reload already when you run into a problem with a page. You can also override the cache if you’re wanting fresh copy of the resources used in the current page by pressing
F5. Depending on what I’m developing, I usually have a server that’s automatically reloads upon saves, like Live Server or the webpack-dev-server.
- Go Up Down a Screen Down a page:
Space Bar. Up a page:
Shift Space Baror
Page Up. Depending on what I’m doing I find using the keyboard for browser navigation easier, such as when I’m learning something new and have a bunch of tabs open with documentation or blog posts about it.
- Go one Tab to the left or right
Page Upto go one Tab to the left or
Page Donwto go right. If you’re like me you probably have a ton of different Tabs open in your browser. I also like to use
9to go the last Tab which is usually where I keep the local development server open.
- Undo Close Tab This is a handy one to remember, nothing worse than accidentally closing a tab that contained the menu of your clients favourite restaurant.
- Page Source
UThe Page Source shortcut will allow you to view source code for the current web page. I usually have the source.editor option in Firefox set so that it will open the source code in Visual Studio Code. You can set your preferred editor with these steps: Enter
about:configin the browsers location bar. Enter
view_sourcein the search filter. Select the
view_source.editor.externaloption, make sure its set to
trueThen select the
view_source.editor.pathand enter the path to your preferred editor. In my case I’m using Visual Studio Code so my path might look like
C:\Program Files\Microsoft VS Code\Code.exe, but you could use NotePad++, Sublime etc…
- Open Web Console
Kon Windows, and
Kon macOS. I find it very handy to keep the web console open in a seperate window while I develop. I’ll regularly check for errors and edit styles via the console .
- Caret Browsing
F6When this setting is enabled, Firefox will display a movable cursor in web pages. I find this really helpful when I’m learning something new and I’m referring to the documentation.
- Toggle Responsive Design Mode
Mon Windows, or
Mon macOS. I use this shortcut all the time, I’m always looking at different sites to see how they’ve gone about responsive designs. Depending on the project, I usually start with the mobile design so I work in this mode regularly while developing.
These are some of my favourite extensions for Firefox, not all are dev specific but I find I use them regularly when I’m developing. These extensions aren’t necessarily specific to Firefox Developer Edition, some of them are available on Chrome.
- React Developer Tools This plugin allows you to inspect the React tree of a React app. I find this really helpful for better understanding my apps as well as seeing how other large, commercial React apps are laid out.
- Vue.js devtools Using Vue.js? There’s an extension to help debug Vue apps.
- Dark Reader I do a ton of reading on my computer and I like to give my eyes a break, this extension applies a dark mode to all sites. It has different Theme Generation Mode which analyze and apply styles differently, check these out because some do require extra resources including GPU resources.
- Multi-account Containers This extension is the current implementation of the Firefox container feature.
- Wappalyzer If you’re looking for a quick way to find out what technologies a web app is using this extension can help. It can determine a large number of technologies. This extension will however access your data for all websites so it’s not something I use all the time.
I’m not going to dive deep into the developer tools because they a seperate post, but they are an important part of getting started with Firefox. The following is a brief introduction to the core Firefox developer tools and some of the features that are available in the Firefox Developer Edition, as well as some of my thoughts about them.
- Page Inspector - This tool is used to examine as well as modify the HTML and CSS of a web page. One thing I like (since I always seem to struggle with CSS) is the Inactive CSS feature which grays out valid, but inactive CSS. When you hover over the inactive CSS you get a nice hint on how to fix it that has a link to more info. For further reading on the Page Inspector have a look at the UI tour.
To open the page inspector press
Con Windows, or
Con macOS. Or you can right-click on an element and select Inspect Element.
Kon Windows, or
- Network Monitor - This tool displays all the network requests that Firefox makes. I use this all the time when I’m developing. I like using the Performance analysis tool for a quick look at the resource sizes.* To open the Network Monitor press
Eon Windows, or
- Responsive Design Mode - This mode helps simulate screen size, pixel density, network throttling and touch features that are commonly found on mobile devices. This mode allows us to see what our designs will look like on various devices. * To open Responsive Design Mode press
Mon Windows, or
- Accessibility Inspector - This tool gives will display information related to assistive technologies via the accissibility tree. You can open the Accessibility Inspector by right-clicking in the main browser window, and then choosing the Inspect Accessibility Properties in the context menu. Or select the Accessibility tab in the Developer Tools toolbox.
- Application Panel - This tool is used for inspecting and debugging Progressive Web Apps.
In this article you saw some of the differences between the desktop versions of Firefox, how to get started with customizing Firefox, extensions, shortcuts, as well as a quick introduction to the developer tools. Hopefully this served as a helpful overview to get you started using Firefox as your main development browser.
If you’re interested in learning more there are a ton of great resources available for Firefox. Here are a few below: