10 Useful Firefox Developer Tools You Should Know

Firefox being “developer’s browser” has many great tools to help make our work easier. You can find more on its tool collection on the Firefox Developer Tools webpage and can also try their Developer Edition Browser which has more features and tools that are being tested.

For this post, I’ve listed 10 handy tools you might like from its developer tools collection. I’ve also demonstrated what these tools can do with GIFs plus how to access them for quick reference.

1. View horizontal and vertical rulers

Firefox tool - ruler

Firefox has a ruler tool that displays both horizontal and vertical rulers with pixel units on the page. The tool is useful for arranging your elements across the page.

To access rulers through the menu:

  1. Go to: ☰ > Developer > Developer Toolbar (shortcut: Shift + F2).
  2. Once the toolbar appears at the bottom of the page, type rulers.
  3. Pess Enter.

To make this appear on the developer tools window:

  1. Go to “Toolbox Options”.
  2. Under the “Available Toolbox Buttons” section, check the “Toggle rulers for the page” checkbox.

2. Take screenshots using CSS selectors

Firefox tool - screenshot

Although the Firefox toolbar lets you take screenshots of the full page or visible portions, in my opinion the CSS selector method is more useful for capturing screenshots of individual elements as well as for elements that are visible on mouse-hover only (like menus).

To take screenshots through the menu:

  1. Go to ☰ > Developer > Developer Toolbar (shortcutShift + F2).
  2. Once the toolbar appears at the bottom of the page, type screenshot --selector any_unique_css_selector.
  3. Press enter.

To make this appear on the developer tools window:

  1. Click “Toolbox Options” and under “Available Toolbox Buttons” section.
  2. Check “Take a fullpage screenshot” checkbox.

3. Pick colors from web pages

Firefox tool - colorpicker

Firefox has a built-in color picker tool by the name of “Eyedropper”.

To access the “Eyedropper” tool through menu go to ☰ > Developer > Eyedropper.

To make this appear on the developer tools window: click “Toolbox Options” and under “Available Toolbox Buttons” section check “Grab a color from the page” checkbox.

4. View page layout in 3D

Firefox tool - 3d view

Viewing webpages in 3D helps with layout problems. You’ll be able to see the different layered elements much more clearly in 3D view. To view the webpage in 3D, click the “3D View” tool button.

To make this appear on the developer tools window, click “Toolbox Options” and under “Available Toolbox Buttons” section check the”3D View” checkbox.

5. View browser style

Firefox tool - browser style

Browser Styles consist of two types: the default style a browser assigns for every element, and the browser-specific styles (the ones with the browser prefix). By taking a look at the browser styles you’ll be able to diagnose any override issues in your stylesheet and also come to know of any existing browser specific styles .

To access “Browser styles” through menu:

  1. Go to ☰ > Developer > Inspector.
  2. Click the “Computed” tab in the right section.
  3. Check the “Browser styles” checkbox.

You can also open the “Inspector” tab through the shortcut Ctrl +Shift + C and then accessing “Browser styles”.

6. Disable JavaScript for current session

Firefox tool - disable JS

For best practice and screen reader compatibility it is always advised to code any website in such a way that its functionality is not hindered in a javascript-disabled environment. To test for such environments, you can disable the JavaScript for the session you’re working in.

To disable JavaScript for current session click “Toolbox Options” and under “Advanced settings” section check the “Disable JavaScript*” checkbox.

7. Hide CSS style from the page

Firefox tool - disable style

Just like JavaScript, due to accessibility concerns it is best to design websites in such a way that the pages should still be readable even without any styles. To see how the page looks without any style, you can disable them in the developer tools.

To remove any CSS style (inline, internal or external) applied on a webpage, just click on the eye symbol of the listed stylesheets in the “Style Editor” tab. Click it again to revert to the original view.

To access “Style Editor” through menu go to ☰ > Developer > Style Editor (shortcut: Shift + F7.

8. Preview the HTML content response to a request

Firefox tool - preview response

Firefox developer tools has an option to preview the HTML content type responses. This helps the developer to preview any 302 redirects and check whether any sensitive information has been rendered or not in the response.

To access “Preview” through menu:

  1. Go to ☰ > Developer > Network (shortcut: Ctrl +Shift + Q.
  2. Open the webpage of your choice or reload the current page, click on the desired request (with HTML response) from the list of requests.
  3. Click the “Preview” tab in the right section.

9. Preview webpage in different screen sizes

Firefox tool - responsive

To test a webpage for its responsiveness use the “Responsive Design View”, which can be accessed by ☰ > Developer > Responsive Design View or with the shortcut: Ctrl +Shift + M.

To make the “Responsive Design Mode” tool button appear, click “Toolbox Options” and under the “Available Toolbox Buttons” section, check “Responsive Design Mode” checkbox.

10. Run JavaScript on pages

Firefox tool - responsive

For quick JavaScript executions on any webpage simply use the “Scratchpad” tool of Firefox. To access “Scratchpad” through the menu go to; ☰ > Developer > Scratchpad or use the keyboard shortcut Shift + F4.

To make the “Scratchpad” tool button appear on the developer tools window for quick use: click “Toolbox Options” and under the “Available Toolbox Buttons” section check the “Scratchpad” checkbox.

The post 10 Useful Firefox Developer Tools You Should Know appeared first on Hongkiat.

How to Hack & Personalize Your Firefox Developer Tools Theme

Themes are a personal thing for us developers, it’s not just about beautification of editors or tools. It’s about making the screen that we’ll be staring at (without blinking much) more bearable to work at for hours on end and in a productive manner. Firefox has two themes for developer tools: dark and light. Both are great, but the options are still limited without a way to personalize them.

Now, Firefox uses a combination of XUL and CSS for its UI, which means most of its appearance can be tweaked using just CSS. Mozilla provides a way for users to configure its products’ appearance with a CSS file called “userChrome.css”. You can add custom style rules to that CSS file and it’ll be reflected on the Mozilla products.

In this post we will be making use of that same CSS file to personalize the developer tools in Firefox.

First, we need to find that CSS file, or make one and put it in the right place. One quick way to find the folder that will house “userChrome.css” is by going to about:support in the browser and clicking the “Show Folder” button next to the label “Profile Folder”. This will open Firefox’s current profile folder.

In the profile folder, you’ll see a folder named “chrome”. If it’s not there, create one and create a “userChrome.css” in it. Now that the setting up of the file is done, let’s move onto code.

:root.theme-dark {
  --theme-body-background: #050607 !important;
  --theme-sidebar-background: #101416 !important;

  --theme-tab-toolbar-background: #161A1E !important;
  --theme-toolbar-background: #282E35 !important;
  --theme-selection-background: #478DAD !important;

  --theme-body-color: #D6D6D6 !important;
  --theme-body-color-alt: #D6D6D6 !important;
  --theme-content-color1: #D6D6D6 !important;
  --theme-content-color2: #D6D6D6 !important;
  --theme-content-color3: #D6D6D6 !important;

  --theme-highlight-green: #8BF9A6 !important;
  --theme-highlight-blue: #00F9FF !important;
  --theme-highlight-bluegrey: white !important;
  --theme-highlight-lightorange: #FF5A2C !important;
  --theme-highlight-orange: yellow !important;
  --theme-highlight-red: #FF1247 !important;
  --theme-highlight-pink: #F02898 !important;
}

What you see above is the code that I added to my “userChrome.css” file to change the appearance of developers tools from this

devtool ui

to this:

devtool new ui

I only wanted to improve the contrast a bit more with darker background and brighter text in the dark theme (also I’m not good at color schemes), so I stayed with some basic colors typically used in dark themes. If you are better with colors, experiment on your own with the colors as you see fit to find a better match for the theme you are using.

The code is just a list of CSS color variables used to color the various UI parts of DevTools. We found the code in a file called “variables.css” in a compressed file named “omni.ja”:

In Windows, the file is located at:

F:/firefox/browser/omni.ja. Replace the F: with the drive where you’ve installed your Firefox in.

In OSX, the file is located at:

~/Applications/Firefox.app/Contents/Resources/browser/omni.ja.

These are compressed Java files. In Windows, you can rename the .ja extension to .zip and use the native Windows Explorer extract utility to unload the files within it. In OSX, go to Terminal and run unzip omni.ja. Bear in mind to make a copy of the file in another directory before doing so.

Once omni.ja has beeen extracted, you can find the file at /chrome/devtools/skin/variables.css; yes, the Firefox DevTools skin is under a folder named chrome. In the variables.css, you’ll see a bunch of color variables used for both the light and dark themes as follows

Pick the theme and variables you want to target and add them to your “userChrome.css”.

Here are some more screenshots of my developer tools’ window.

devtool debugger
devtool new ui
devtool store
devtool style

How to Hack & Personalize Your Firefox Developer Tools Theme

Themes are a personal thing for us developers, it’s not just about beautification of editors or tools. It’s about making the screen that we’ll be staring at (without blinking much) more bearable to work at for hours on end and in a productive manner. Firefox has two themes for developer tools: dark and light. Both are great, but the options are still limited without a way to personalize them.

Now, Firefox uses a combination of XUL and CSS for its UI, which means most of its appearance can be tweaked using just CSS. Mozilla provides a way for users to configure its products’ appearance with a CSS file called “userChrome.css”. You can add custom style rules to that CSS file and it’ll be reflected on the Mozilla products.

In this post we will be making use of that same CSS file to personalize the developer tools in Firefox.

First, we need to find that CSS file, or make one and put it in the right place. One quick way to find the folder that will house “userChrome.css” is by going to about:support in the browser and clicking the “Show Folder” button next to the label “Profile Folder”. This will open Firefox’s current profile folder.

In the profile folder, you’ll see a folder named “chrome”. If it’s not there, create one and create a “userChrome.css” in it. Now that the setting up of the file is done, let’s move onto code.

:root.theme-dark {
  --theme-body-background: #050607 !important;
  --theme-sidebar-background: #101416 !important;

  --theme-tab-toolbar-background: #161A1E !important;
  --theme-toolbar-background: #282E35 !important;
  --theme-selection-background: #478DAD !important;

  --theme-body-color: #D6D6D6 !important;
  --theme-body-color-alt: #D6D6D6 !important;
  --theme-content-color1: #D6D6D6 !important;
  --theme-content-color2: #D6D6D6 !important;
  --theme-content-color3: #D6D6D6 !important;

  --theme-highlight-green: #8BF9A6 !important;
  --theme-highlight-blue: #00F9FF !important;
  --theme-highlight-bluegrey: white !important;
  --theme-highlight-lightorange: #FF5A2C !important;
  --theme-highlight-orange: yellow !important;
  --theme-highlight-red: #FF1247 !important;
  --theme-highlight-pink: #F02898 !important;
}

What you see above is the code that I added to my “userChrome.css” file to change the appearance of developers tools from this

devtool ui

to this:

devtool new ui

I only wanted to improve the contrast a bit more with darker background and brighter text in the dark theme (also I’m not good at color schemes), so I stayed with some basic colors typically used in dark themes. If you are better with colors, experiment on your own with the colors as you see fit to find a better match for the theme you are using.

The code is just a list of CSS color variables used to color the various UI parts of DevTools. We found the code in a file called “variables.css” in a compressed file named “omni.ja”:

In Windows, the file is located at:

F:/firefox/browser/omni.ja. Replace the F: with the drive where you’ve installed your Firefox in.

In OSX, the file is located at:

~/Applications/Firefox.app/Contents/Resources/browser/omni.ja.

These are compressed Java files. In Windows, you can rename the .ja extension to .zip and use the native Windows Explorer extract utility to unload the files within it. In OSX, go to Terminal and run unzip omni.ja. Bear in mind to make a copy of the file in another directory before doing so.

Once omni.ja has beeen extracted, you can find the file at /chrome/devtools/skin/variables.css; yes, the Firefox DevTools skin is under a folder named chrome. In the variables.css, you’ll see a bunch of color variables used for both the light and dark themes as follows

Pick the theme and variables you want to target and add them to your “userChrome.css”.

Here are some more screenshots of my developer tools’ window.

devtool debugger
devtool new ui
devtool store
devtool style

10 Useful Firefox Developer Tools You Should Know

Firefox tool - ruler

Firefox being “developer’s browser” has many great tools to help make our work easier. You can find more on its tool collection on the Firefox Developer Tools webpage and can also try their Developer Edition Browser which has more features and tools that are being tested.

For this post, I’ve listed 10 handy tools you might like from its developer tools collection. I’ve also demonstrated what these tools can do with GIFs plus how to access them for quick reference.

1. View horizontal and vertical rulers

Firefox has a ruler tool that displays both horizontal and vertical rulers with pixel units on the page. The tool is useful for arranging your elements across the page.

Firefox tool - ruler

To access rulers through the menu, go to: ☰ > Developer > Developer Toolbar (shortcut: Shift + F2). Once the toolbar appears at the bottom of the page, type rulers and press Enter.

To make this appear on the developer tools window, Go to “Toolbox Options”. Under the “Available Toolbox Buttons” section, check the “Toggle rulers for the page” checkbox.

2. Take screenshots using CSS selectors

Although the Firefox toolbar lets you take screenshots of the full page or visible portions, in my opinion the CSS selector method is more useful for capturing screenshots of individual elements as well as for elements that are visible on mouse-hover only (like menus).

Firefox tool - screenshot

To take screenshots through the menu, go to ☰ > Developer > Developer Toolbar (shortcutShift + F2). Once the toolbar appears at the bottom of the page, type screenshot --selector any_unique_css_selector and press enter.

To make this appear on the developer tools window: click “Toolbox Options” and under “Available Toolbox Buttons” section, check “Take a fullpage screenshot” checkbox.

3. Pick colors from web pages

Firefox has a built-in color picker tool by the name of “Eyedropper”. To access the “Eyedropper” tool through menu go to ☰ > Developer > Eyedropper.

Firefox tool - colorpicker

To make this appear on the developer tools window: click “Toolbox Options” and under “Available Toolbox Buttons” section check “Grab a color from the page” checkbox.

4. View page layout in 3D

Viewing webpages in 3D helps with layout problems. You’ll be able to see the different layered elements much more clearly in 3D view. To view the webpage in 3D, click the “3D View” tool button.

Firefox tool - 3d view

To make this appear on the developer tools window, click “Toolbox Options” and under “Available Toolbox Buttons” section check the”3D View” checkbox.

5. View browser style

Browser Styles consist of two types: the default style a browser assigns for every element, and the browser-specific styles (the ones with the browser prefix). By taking a look at the browser styles you’ll be able to diagnose any override issues in your stylesheet and also come to know of any existing browser specific styles .

Firefox tool - browser style

To access “Browser styles” through menu, go to ☰ > Developer > Inspector. Then click the “Computed” tab in the right section and check the “Browser styles” checkbox.

You can also open the “Inspector” tab through the shortcut Ctrl +Shift + C and then accessing “Browser styles”.

6. Disable JavaScript for current session

For best practice and screen reader compatibility it is always advised to code any website in such a way that its functionality is not hindered in a javascript-disabled environment. To test for such environments, you can disable the JavaScript for the session you’re working in.

Firefox tool - disable JS

To disable JavaScript for current session click “Toolbox Options” and under “Advanced settings” section check the “Disable JavaScript*” checkbox.

7. Hide CSS style from the page

Just like JavaScript, due to accessibility concerns it is best to design websites in such a way that the pages should still be readable even without any styles. To see how the page looks without any style, you can disable them in the developer tools.

Firefox tool - disable style

To remove any CSS style (inline, internal or external) applied on a webpage, just click on the eye symbol of the listed stylesheets in the “Style Editor” tab. Click it again to revert to the original view.

To access “Style Editor” through menu go to ☰ > Developer > Style Editor (shortcut: Shift + F7.

8. Preview the HTML content response to a request

Firefox developer tools has an option to preview the HTML content type responses. This helps the developer to preview any 302 redirects and check whether any sensitive information has been rendered or not in the response.

To access “Preview” through menu go to ☰ > Developer > Network (shortcut: Ctrl +Shift + Q. Then open the webpage of your choice or reload the current page, click on the desired request (with HTML response) from the list of requests and click the “Preview” tab in the right section.

Firefox tool - preview response

9. Preview webpage in different screen sizes

To test a webpage for its responsiveness use the “Responsive Design View”, which can be accessed by ☰ > Developer > Responsive Design View or with the shortcut: Ctrl +Shift + M.

To make the “Responsive Design Mode” tool button appear, click “Toolbox Options” and under the “Available Toolbox Buttons” section, check “Responsive Design Mode” checkbox.

Firefox tool - responsive

10. Run JavaScript on pages

For quick JavaScript executions on any webpage simply use the “Scratchpad” tool of Firefox. To access “Scratchpad” through the menu go to; ☰ > Developer > Scratchpad or use the keyboard shortcut Shift + F4.

Firefox tool - responsive

To make the “Scratchpad” tool button appear on the developer tools window for quick use: click “Toolbox Options” and under the “Available Toolbox Buttons” section check the “Scratchpad” checkbox.

A Look Into: Firefox Developer Edition

After a short tease, Mozilla has officially released Firefox Developer Edition. It’s a new browser aimed specifically at web developers. Although it hasn’t been announced officially, it looks like it will be replacing Firefox Aurora at some point.

Judging from the name, the official announcements and the landing page it looks like Firefox Developer Edition is the first large browser built for development, not just supporting it. It contains a multitude of debuggers, panels and other utilities, plus it uses its own profile so it can be run alongside regular Firefox more easily. Let’s take a look at what it offers.

User Interface

The interface changes in the Developer Edition already hint at a developer-centric approach. The toolbar is noticeably narrower than both Chrome and regular Firefox while adding more buttons by default.

It’s fairly obvious that the new default theme is dark, which is possibly the result of some clever UI testing. It is extremely important to find everything at a glance while developing. A one second delay in finding something could amount to hours a month. I personally prefer the light colors for casual use, but the dark UI was great in my initial tests.

If you prefer the default theme you can switch the developer edition theme off very quickly using the “Use Firefox Developer Edition Theme” button by going to Menu -> Customize.

On the other hand, there are some interface choices which puzzle me. I’m fairly sure that bookmarking will be far less used in this version and most developers know the Ctrl / Cmd + D key combination to make it happen. The fact that there is a dedicated button for this; the bookmarks section, the downloads section, even the Developer Edition start page seems a bit unnecessary.

First Impressions

My first impression was that there’s nothing I haven’t seen before here. This is even reinforced by Mozilla on the landing page:

“It’s everything you’re used to, only better”

Developer tools handle about the same as they do on regular Firefox, WebIDE and Valence can already be used. Only slight cosmetic changes make the Developer Edition different than Firefox.

That being said, there is an underlying feeling of a good direction here. It seems very much like Mozilla has been waiting to create this version of Firefox for a while, they were just waiting for a critical mass of developer tools and know-how. It feels like they’ve created a framework in which to place future tools and methodologies and put them to the test.

In more developer-friendly lingo: it seems like the Developer Edition is a fork of the regular version which was made just now, with a few tweaks. From here on out, development will intensify and focus specifically on this product, separating it from regular Firefox and making it the go-to place for developers. Or at least that is the intention.

One of the biggest indications of how Mozilla plans to position the Developer Edition is the inclusion of Valence (more on this later). Mozilla’s stance on Valence is this:

“The Adapter is still in its early stages, and is available only as a preview. We do not yet recommend using it for day-to-day work.”

It seems that the Developer Edition will receive tools earlier than regular versions of Firefox. While it doesn’t seem likely that Mozilla will remove developer features from Firefox, perhaps some upcoming ones will only be added to the new Developer Edition. I for one support keeping bloat out of browsers and welcome this new direction.

WebIDE

One of the most prominently advertised features is WebIDE. Added in Firefox 34, it is a replacement for the App Manager – it enables you to run edit and debug Firefox OS applications using the Firefox OS simulator or an actual device. In other words, it is what Xcode is for iOS.

Valence

Valence is essentially a cross-browser debugging tool. It allows the developer tools to work with a wide array of browsers. At the moment the main targets for Valence are Chrome on Android and Safari on iOS. The technical details of this are a bit difficult to comprehend, so have a look at this video done by Mozilla:

Developer Tools

If you’re familiar with developer tools in regular Firefox, then it’s pretty much what you’d expect. Invoke it using Ctrl / CMD + I or right-click on an element and click “Inspect Element”.

Inspector

The Inspector gives you a collapsible tree view of the page DOM. When you hover over an element in the DOM, it is highlighted on the page which is super-helpful for figuring out dimensions and where things are in general.

Doing it the other way around is even more helpful. By clicking on the top right icon as per in the screenshot above, you can cruise through the page and elements will be highlighted under your cursor. In many cases, this is a more viable way of inspecting something when it is in the midst of overlapping elements.

The Inspector allows you to double-click to edit the contents or properties of an element. One trick which may be useful to know is that the DOM can be traversed using the arrow keys, you can even delete and undelete using the delete key and Ctrl / Cmd + Z command.

Clicking and dragging in the DOM will highlight a portion of the DOM, the bounds will be shown on the web page, another great tool for visualizing your HTML structure and CSS code.

The CSS rules for any given element shows up in the sidebar giving you a quick read and easy editing access.

Console

The console is a window that shows aggregate information from CSS, JS, Net, Security and Logging. It is mostly used for Javascript debugging and tracking down missing resources but can also be used to issue commands, even via jQuery.

Debugger

The console is great for quickly logging some script issues and making sure your code works on the first try. If you want to figure out some more complex problems, you’ll need to use the debugger.

By setting breakpoints in your code, you can pause the execution of the Javascript code before that point. You can view where the execution is in the code and you can modify variables before moving on.

This not only enables you to figure out bugs but also lets you test various use cases pretty quickly. It won’t replace unit testing but it will give you deeper insight and a great companion to them!

Style Editor

The style editor is a great place to write styles and see the results applied live. You can select any of the stylesheets loaded or you can import and create new ones on the fly. Any modified file can be saved easily.

While this is an amazingly handy feature for little tweaks, it isn’t so convenient for more complex environments that work with preprocessors. These environments can be set up, but the overhead of doing so is about the same as using a preprocessor which has live reload enabled.

Performance

The performance tool was introduced with Firefox 34 and is a replacement for the JavaScript sampling profiler. It allows you to create extremely detailed performance profiles down to the the toll that reflows and paints, Javascript and CSS parsing takes and more.

Profiles can be saved and imported easily, so you can compare profiles to make your applications streamlined to the extreme!

Timeline

The timeline tool is not available in the regular version of Firefox by default, it enables you to see what operations are performed by the browser engine. The tool will display reflows (layout), restyle, paint, console and DOM events.

Network

The Network tab is great for gaining insight into the requests that your website makes while it loads and while it is being used by users. It provides an overview of resources and status codes, along with the time it took to load and when the loading took place.

The bottom filter allows you to look at specific asset types, a particularly useful tool for figuring out AJAX calls using the XHR type.

Clicking on any asset displays its response and request headers, cookies, parameters, response and timings.

One of the most useful features is the ability to start a performance analysis on your website by right clicking and choosing the appropriate option. This will bring up two pie charts which compare a cached and an un-cached load.

Responsive Design Mode

The responsive design mode allows you to view how your site will look in different sized windows. This is not a true emulator so results may vary somewhat, but it is great for previewing the outcome of media queries.

Once in responsive mode you can switch between preset screen sizes, click and drag for custom sizes, change orientation and simulate touch events.

When developing, I usually change the browser window width and leave it be until I’m done but I find that the responsive design mode is great for final checks and for looking at states in-between breakpoints.

Conclusion

In a nutshell: while there aren’t a lot of brand-spanking new features for developers who keep up with Mozilla news, the direction is very promising. I look forward to a lot of tool-specific features like Coffeescript, Sass, Less and others.

Perhaps even compiler and other processing tools could be added to make Firefox Developer Edition a true developer package, and not just something we use to look at our end result with.

As a seasoned developer, I already have tools to compile my scripts, create final builds, automate general programming tasks, error-check my code and live-reload my browser. If a browser would offer some of these features, it may make some aspects of my work a lot faster. I’ll be following this project with great interest and I suggest you do too.

If you have any thoughts or already have some experience with the Firefox Developer Edition, let us know what you think in the comments.

How to Optimize Firefox for Better Performance

firefox optimization

Your web browser of choice is truly the gateway into accessing the global Internet. The web has been growing exponentially, and we have seen tremendous changes to browsing software as well. Mozilla has been keeping up well considering the recent release of Firefox 10 which has seen mostly positive review.

firefox optimization

But as we all know, your web browser tends to slow down over time with repeated use. Firefox is not immune to this, but there are some tweaks you can use to optimize the browsing experience. The key values we’re looking for include startup speed, reduced load times, and accessible web pages. Check out some of my tips in the guide below if you’re looking to enhance the Firefox experience!

Quick Shortcut Commands

A good place to start is with a few handy keyboard shortcuts. These can be difficult to memorize at first, but over repeated use you’ll begin to adopt the routine. And I feel there’s no better way to speed up your web browsing experience than mastering a few shortcut keys.

Only a couple examples may seem relevant to your needs. We don’t all require the same knowledge and so one command may be totally pointless to somebody else. If you check through Google you’ll likely find very helpful articles for the more common shortcuts.

1. Clear Private Data

Security is of the utmost importance to consider whenever you’re surfing the web. Even by today’s standards things are a lot less risky than 5 or 10 years ago. But you should understand how private browsing data is stored and what you can do to clear your info.

Firefox shortcut command for clearing history and private data

This short menu which pops up is a condensed version of the settings panel. You can choose how far back in time to clear out along with specific types of data such as cookies, cached pages, active login sessions, etc. I recommend that you clear everything within the list every time you close down the browser window. This is only my personal preference to keep my data secure – but of course you should adopt some form of routine cleanup which works best for you.

Shortcut – Ctrl + Shift + Delete

2. Add-Ons Toolbar

The Firefox add-ons menu is a small toolbar which appears at the bottom of your Firefox window. From here you can access add-on commands and menus which are normally reserved from within the regular plug-ins area.

This may be one of the lesser-known shortcuts but does come in handy frequently. If you like to keep your browser slim with reduced add-ons then this may pose as a bit uninteresting. And I have to agree that fewer 3rd-party extensions means much quicker browser performance. Just keep this in mind as you’re testing out new add-ons from time to time.

Shortcut – Ctrl + /

3. Open Downloads Window

There have been numerous instances using Firefox where I’ve been downloading files and accidentally clicked out of the downloads window. It’s a harmless gesture, though it can be a pain to find your menu again. This command brings up not just your active downloads but also recent history of previous files – very handy when you forget which folder you saved into!

Shortcut – Ctrl+J

Note: For Mac users, replace Ctrl with Command.

Increase Local Cache Storage

When Firefox saves a cached version of website content it reduces any future requests needed for re-downloading code. By default you can only max out to 1GB of saved cache from the web. But this is likely such a small amount compared to your overall disk space, it’s well worth the effort to update your cache sizes.

I recall Firefox 8.0 had local cache storage at 256MB by default. Honestly this is a fair amount of room, especially if you’re clearing out private data at the end of each session. Yet if you browse for hours at a time each repeat website visit will accumulate possibly 10-15 minutes of saved load screens.

Mac OSX Firefox preferences menu

In the top menu open Tools -> Options or Firefox -> Preferences... on Mac and click on the Advanced Tab. Somewhere in the middle of this menu you’ll see “Limit cache to” along with a number input. I’ve chosen 1024MB which happens to be the maximum allowed. Simply hit OK and restart the browser for this to take effect.

Popular yet Minimalist Add-Ons

It’s a good idea to keep wary of installing too many extensions into Firefox. The browser will begin to lag fairly quickly if you neglect to disable unused add-ons, but luckily it’s also an easy process to remove them. Below are a couple of the most popular user-voted add-ons which won’t interfere with your speed or page performance.

1. Download Status Bar

In particular this is a very helpful addon I’ve come to love since first installing. The download statusbar is not obtrusive or even displayed in any way until you download a file. Instead of having a new window appear you get a neat toolbar at the very bottom of your browser window.

Download Statusbar Firefox add-on screenshot

From this you can check the total file size and amount remaining, along with an estimate of time remaining for the download to complete. You can single-click on a file to pause and even remove items from the queue. My process of downloading files has become more streamlined than ever now that I’m not dealing with a new window for my items list. If you haven’t tried this out yet I highly recommend giving it a shot!

2. WOT – Check Trustworthy Websites

The funky plug-in with a weird name actually has taken me by surprise! As the title says: WOT – Know Which Websites to Trust provides a rating for every website you visit. These are backed by users of the software who have given rankings to sites all over the Internet.

WOT menu screenshot from Mozilla's home page

Many users feel this has little-to-no purpose since you can gauge the legitimacy of a website within the first few seconds of landing. Definitely true, but I do frequently cycle through random websites found in social network communities like StumbleUpon. In this scenario I feel WOT hasn’t provided any first step security, but it does help me build credibility and trust for domains I run into through differing sources.

3. Element Hiding Helper for ABP

Most Firefox users are familiar with Adblock Plus which has proven time and again as a sure-fire ads remover. From this core a developer Wladimir Palant from ABP released an extension called Element Hiding Helper. Now you can target any specific page element and choose to block it regardless of the internal content.

This is perfect for when you don’t want to block all advertisements on a website but you need to remove 1 or 2 of them for whatever reason. Often times video websites will have loud audio ads start playing out of nowhere – and this plug-in is the perfect remedy. You can choose to remove things other than advertisements, such as annoying JavaScript apps or specific HTML blocks within the page layout.

4. Speed Dial

This feature has become standard to users of the Opera browser and more recently has been picked up by Google Chrome. Yet the speed dial home page setup was never implemented into Firefox in any majorly functional way.

Firefox plug-in Speed Dial - official website

This plug-in gives you total control over which links appear where in the 9-box grid system. You have easy access to manipulate settings as well, such as default thumbnail height/width and a few keyboard shortcuts. Overall the software has a lot of support from the Mozilla userbase. If you want to learn more check out the official website for detailed features and release notes.

System Edits in about:config

Firefox users have the ability to edit internal variables within the software from the configuration area. Simply open a new tab, type about:config and hit enter. You’ll come to a warning page mentioning the dangers of blindly changing these settings. But we know what we’re doing, so just hit “I’ll be careful” and you’ll be directed to sorted table of values.

Firefox 8 about:config warning menu

Each of the values in the far left column are associated with a type of variable name. These control instances of how the software runs and performs in the background. I have just a few suggestions for reliable edits.

1. Increase pipelining

In the filter box at the top type in network.http.pipelining.maxrequests. This should limit your field to a single value row set at 4. We can increase this number to 8, which means Firefox can request data through 8 different channels rather than 4 – greatly decreasing your waiting time!

Once you edit this value above you’ll need to enable pipelining to see any major effects. Do a search for network.http.pipelining and the first value should be set to false by default. You want to change this to true by double-clicking on the table row.

2. Disable placeholder images

Sometimes when Firefox realizes a page is going to take a while to download it will apply placeholder images. This is to prevent page content from rendering improperly while waiting for the image data. It seems like a good idea in concept, and it does have value but I feel disabling this feature will keep the requested content organized.

In the filter box do a search for browser.display.show_image_placeholders which should be set as true. Double-click to change this to false and we should be all set.

3. Disable interface animations

While we’re removing unnecessary features let’s turn our attention to the browser UI. By default Firefox uses a small animation effect whenever you open or switch onto a new tab. It seems small at a glance but once you disable this you’ll be shocked at how much quicker you can move and create tabs. Just do a search for browser.tabs.animate and change the value to false.

4. Increase persistent connections

This variable is similar to pipelining except now we’re looking to open more connections on the server end. This is set much lower at first to keep Firefox downloading at a steady pace. But if you are downloading larger content such as streaming audio or video more persistent connections will mean more data collected at once.

In the filter box enter network.http.max-persistent-connections-per-server and you should find only one result. By default the value should be 6, but double-click and change to 8. Then hit okay and restart your browser for these effects to kick in!

Conclusion

With so many options in today’s browser market Firefox appears to be holding a steady place. Their engineers know how to build stable software as it has been a reliable brand for years.

With the endless number of plugins and extensions free to download there are solutions for practically any problem. I hope these tips can provide a solid foundation for optimizing your web browsing experience. If you have any other great ideas for speeding up Firefox please let us know in the discussion area.