DevTools Showdown: Edge’s F12 vs Firefox vs Chrome

Microsoft Edge

The Developer Tools of Microsoft Edge, the new default browser of Windows 10 got a modern design and a few new features compared to its predecessor, Internet Explorer 11‘s F12 Dev Tools.

The question of whether Microsoft Edge’s dev tools measure up to their popular competitors – the dev tools in other modern browsers such as Mozilla Firefox and Google Chrome – naturally arises in the minds of many developers.

Microsoft Edge

In this post we try to answer this question, and figure out if Edge’s F12 Dev Tools are really worth to use. We will compare its features to those of Firefox’s Developer Tools and Google Chrome’s DevTools.

Open the Dev Tools

Pressing F12 opens the developer tools in all 3 cases: Developer Tools in Firefox, DevTools in Chrome, and F12 Dev Tools in Microsoft Edge. This is the keyboard shortcut where the official name of Edge’s F12 Dev Tools comes from.

When you open Edge’s Dev Tools you can experience at once one of its most well-known shortcomings: currently it’s impossible to pin the tools to an existing window. While you can follow what’s happening on the screen on Firefox Developer Tools and Chrome DevTools by pinning the dev tools window to the bottom of the screen, you (currently) can’t do the same with Edge.

Microsoft’s developers claim they will fix this issue in a future update.

Inspect the DOM

The DOM Explorer tool (Shortcut: CTRL + 1) is the first tab of Microsoft Edge’s F12 Dev Tools. Its layout and overall design is quite similar to the Element tab of Chrome and the Inspector tab in Firefox, however the capabilities sightly differ.

In Edge you can take a look at the rendered HTML document, the related CSS styles, and the event handlers registered on each element. You can also find the small graphic about the CSS box model with the computed values, already well known from the two competing browsers.

You can experiment with CSS rules by deleting current ones and adding new ones, and you can see your summarized changes on a separate subtab called “Changes” (it’s located on the left-hand side). This latter is a feature that is not built in Firefox Developer nor Chrome DevTools. It can give a quick recap to the user, so it’s a really useful option.

There are some features in Firefox Developer Tools that neither Edge, nor Google Chrome currently provide, but can significantly help the life of a designer: the Font and the Animation analyzer tools.

In Edge there’s a cool colour picker though that may somewhat compensate the user for it.

DOM Explorer

Interact with JavaScript

The Console tab (Shortcut: CTRL + 2) in Microsoft Edge allows you to interact with the JavaScript of your site, just like in Firefox and Chrome Dev Tools. All three allow you to follow JavaScript errors in real-time and you can also analyze them by entering your own input.

The Console tool of Edge’s F12 Dev Tools has a nice autocomplete feature that helps you with the commands, however it seems to be less knowledgeable compared to the one in Firefox and Chrome Dev Tools.

Edge separates Errors, Warnings, and Messages which is a big help, though not something that the other two toolkits don’t have.

Firefox’s Console seems to be the most professional out of the three dev tools, as it also separately shows other kind of problems: network, CSS, security errors and logging messages, and allows you to interact with these through the Console interface, not just with the JavaScript errors.

Console

Understand What Your Code Is Doing

The Debugger tool (Shortcut: CTRL + 3) helps you understand what is happening to your code while finding potential bugs. You can set watches and breakpoints, and view call stacks.

The Watches pane displays variable values, the Callstack mode shows the chain of function calls that led to the current state, and the Breakpoints mode shows a list of the breakpoints you’ve set.

Edge’s F12 Dev Tools let you pause your code in the middle of execution, and step through it line by line. You also have the option to improve the readability of a compiled or minified JavaScript file, and you can debug different resources (JavaScript, extensions, etc.) one by one.

Firefox and Chrome DevTools provide all these functionalities, so Edge doesn’t offer an exceptional debugging experience, but it provides the user with a solid and reliable tool that is in par with its competitors.

Debugger

Take A Look At The Browser-Server Communication

The Network tool (Shortcut: CTRL + 4) has been completely redesigned for Microsoft Edge since Internet Explorer 11. With the help of this handy tool you can follow the communication between the server and the browser, and inspect the individual requests.

You can filter the results by content type such as stylesheets, images, media, fonts, XHR, and many others. You can also debug AJAX with the help of the Network tool.

Edge’s and Firefox’s Network tab offer quite similar capabilities and user interface. Both has a user-friendly sidebar pane that allows you to take a look at the selected resource’s HTTP header, HTTP body, parameters, related cookies and timings item-by-item.

Chrome DevTools’ Network tab doesn’t have a pane like this, but if you click on the requests one-by-one you can see the same information. It’s a less intuitive solution though.

Network

Track Down Slow Pages

The Performance tab (Shortcut: CTRL + 5) helps you understand the reasons behind a slow web page. With the Performance tool Microsoft took a huge leap forward by combining the previous UI Responsiveness and Profiler tools to create an end-to-end view of all your scripting, and visualizing the performance.

This handy tool provides you with reports on different types of CPU usage, gives you insights into your site’s frame paint, and it’s also possible to isolate different user scenarios by setting labels on the timeline.

During the testing process we found that the Performance tool in Edge provided us with more information about speed issues than either Firefox Developer or Chrome DevTools. The user interface of the Performance tab in Edge is quite well-designed, helping us with many visual cues, and it’s relatively easy-to-use. If you want to know more about how to use it, read the detailed Docs.

Performance

Diagnose Memory Issues

The Memory tool (Shortcut: CTRL + 6) makes it possible to find memory leaks that can also slow down your web page, moreover can impact the stability of your site.

With the help of a nice graph you can easily understand where your memory usage is growing, and you can make snapshots at specific points that make it possible to analyze the memory use. You can also compare two snapshots made at different points of the page lifecycle to understand the difference between them.

Chrome DevTools also have a nice memory profiler under the Profiles tab, while Firefox Developer doesn’t provide this feature by default, but you can download and install addons like this if you want. The memory profiler of Chrome DevTools is quite advanced and offers more features than Edge’s, for example it allows you to record JavaScript object allocations over time that can help you isolate memory leaks.

Memory

Test Your Site On Different Screen Sizes

The Emulation tool (Shortcut: CTRL + 7) enables you to test your site under different circumstances. You can choose from two browser profiles, Desktop and Windows 10 Mobile, and from many different user agents including all desktop and mobile versions of Internet Explorer back to IE6, alongisde many of Edge’s competitors, Chrome, Firefox, Safari, etc.

It’s interesting that you have the option to take a look at your page as a Bing Bot. You can also emulate a GPS, and set different resolutions and orientations.

Firefox Developer Tools doesn’t have a device emulation tool, but Chrome DevTools have such a sophisticated emulator that Edge’s can hardly compete with it.

For example Chrome’s emulation screen has an accurate grid where the emulated view is inserted in, and you not only can choose from browser profiles and user agents, but also from many devices such as the different versions of iPhone or Samsung Galaxy and many others. Chrome DevTools’ emulator also has a handy Zoom option and you can test your site on different networks like 3G, 4G, DSL, WiFi, etc.

Emulation

Summary

On the whole, Microsoft Edge’s F12 Dev Tools seems to be suprisingly good. It provides features quite similar to the popular web development toolkits of other modern browsers. There are two areas where Edge’s F12 Dev Tools is quite strong: the user interface that is really intuitive, user-friendly, and well-designed, and the performance diagnostic tools.

For these two features it may be worth to consider switching to, or at least testing Edge. The biggest shortcoming is the lack of the possibility to pin the dev tools to the bottom of the screen, but let’s hope Microsoft will quickly fix this issue.

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.

A Look Into: Essential Firefox Tools For Web Developers

Firefox has long been the preferred browser for web development. There are a number of useful add-ons to do the job. In this post, we are going to look into a few add-ons that I think is essential to be installed if you are going to do web development. Also we are going to uncover some of the features in these add-ons that can help.

First of all, we need to install the Firebug.

Firebug

Firebug is a must-install add-on for web development. Assuming that you don’t know where to get Firebug, you can install it here. Probably, you need to restart your Firefox before it is activated.

After that, you can view the Firebug through one of the following ways: follow this menu Tools > Web Developers > Firebug, right-click on the web page and choose “Inspect Element with Firebug”.

Alternatively, you can find a Firebug icon in Firefox and click on it, this will show the firebug window;

Firebug is quite identical to Chrome Developers Tools. it has a panel to see the HTML structure and the styles, and also a Console panel to see the errors, warnings and logs. But, I have a few more tips that hopefully you may find useful.

Adjusting Box Sizing

HTML element is made up with CSS box model that consist of margin, padding and object dimension (width/height). There are times when we may need to modify these properties. In that case, you can select one of the elements you want it to change, then go to the Layout panel.

In this panel, you will find an illustration of a CSS box model along with its information, including the width and height. Even though these two properties are not specified in CSS, this tool is clever enough to determine the value. If you need to modify them, you can simply click on the value and use the up or down arrow key to increase or decrease the value.

Computed styles

In many situations, you probably are wondering why certain styles are not applied. One of the easier and faster ways, particularly when you have thousands of lines of styles, is by inspecting it from the Computed Style panel. This example shows that the anchor tag text color is overwritten by .button class, while the background of the .button class is overwritten by .button.add.

Inspecting Font Family (the easy way)

You probably often find something like this in font-family property in CSS with various font families. Unfortunately, this won’t tell us specifically which font the browser takes. To make the identification easier we can install this Firebug extension namely FireFontFamily.

After the installation is done, load your webpage, and now we can clearly see which font family is applied. In our case it is in fact Helvetica Neue (see shot).

Analyzing Performance

This might be platitude, but Site Speed is now one of Google parameters (algorithm) in deciding website quality; the website that loads faster is considered to be well developed and ranked higher in terms of content. So speed is not something that should be overlooked.

Net Panel

The first place that you might need to visit to inspect your website performance is the Net panel. This panel will record the HTTP request of your website when it is loaded. This screenshot below shows a webpage that loads 42 request and takes around 4.36 seconds to load.

You can then sort the HTTP request upon their type like HTML, CSS, and Images.

Yslow!

Furthermore, you can also install YSlow, an extension for Firebug from Yahoo!. After it is activated, you will find an additional panel expressively called Yslow!.

Similar to Net panel, Yslow! will record the webpage performances when it’s being loaded, but then it will also tell you why the webpage is slow and what can we do to solve it. In this example, we run a test to a webpage and it is scored 86 for overall performance, which is considered OK.

Page Speed

Alternatively, you can also install Page Speed from Google. Similar to Yslow!, it tests website speed performance, albeit the test result may be slightly different. This example shows that the same webpage scored 82 according to Page Speed.

Web Developer Tools

Web Developers Tools is obviously for web developers and it has a bunch of features packed in this toolbar. But this one below is one of my favorites.

Image Inspection

There are times when we may need to get image information from the webpage. I commonly see people do this by stumbling across the browser or by right-clicking the image and select View Image Info, like so:

But this way is not quite efficient when we need to get the information from many images. In that case, we can utilize the Images feature from the add-on. This feature is easily accessible from the Image menu from the toolbar.

And, this example shows how we show the image dimension and image file size simultaneously:

Firefox Built-in Tools

In recent versions, Firefox has tremendously enhanced its built-in features for web developers, some of them are:

Native Inspect Element

This native Inspect Element from Firefox may look similar to “Inspect Element in Firebug”, but it actually acts in different ways.

This time, I will not go through this feature further, as it is essentially identical to Firebug HTML and CSS panel, albeit with a difference in layout and design. But, there is one distinctive feature that is worth trying out, the 3D view.

Using 3D view you can view the webpage structure in depth. To activate this view, you can find the button at the bottom right of the “Firefox Native Inspect Element”. This is how the 3D view looks like.

I don’t use it as often as other features though, but it’s quite an innovative feature from Mozilla I admit, and certainly very useful in certain situations.

Web Design View

Since the increasing popularity in Responsive Web Design, Firefox has initiated a Responsive Bookmarklet to the Browser. This tool will allow us to test our responsive website in different viewports without resizing the browser window.

This view is available from this menu: Tools > Web Developer > Web Design View. And, this how the view looks like.

Style Editor

Lastly, if you are working with CSS frequently, you will likely fall in love with this feature. Since the version of 11, Firefox had added Style Editor in its native developer tools.

This feature is as cool as the Web Design View, it allows you to edit the CSS, see the impact instantly on the browser and save the changes that directly affects the CSS source file.

The Style Editor is available from the following menu: Tools > Web Developer > Style Editor.

Final Thought

There is a bunch of features packed in these Firefox add-ons and those discussed here are just some of the features I utilize quite frequently during web development. Nonetheless, you may have some other tips that might be useful to increase web development productivity in Firefox.

What features do you use frequently? You can share your thoughts in the comment box below.

Guide to: Installing Firebug in Major Browsers and iOS Devices

Firebug

Firebug is a Firefox add-on with cool tools to inspect web page element, debug and develop web pages. There is however no way you can have these tools on other web browsers apart from Firefox.

Firebug

Development of a similar tool for other browsers may take hard work, but it will be of great help if you could get Firebug to work on other browsers too, considering that everyone has their preferred browsers.

Well, here is where Firebug Lite comes in to solve your needs. Firebug Lite is a simpler version of Firebug but it can be used on IE, Opera, Chrome, Safari, iPad and iPhone while retaining similar options and features.

Installing Firebug Lite on Opera, Safari & Chrome

With Firebug Lite, there isn’t any installation necessary. Written in Java Script, you can bookmark a Firebug Lite link and it will be ready for page inspection. So what you need to do is to simply bookmark the link below (you can also drag the link to your browser’s bookmark bar).

Firebug Lite

If you are using Chrome browser, the bookmark should appear as below, if your bookmark bar is visible.

Firebug Bookmark

That’s it, your Firebug Lite should now work when you need to use it.

Using Firebug Lite on Opera, Safari & Chrome

Now you can use Firebug Lite to inspect practically any web page. For this example, we will use Wikipedia.org.

When the web page is loaded, click on the Firebug Lite bookmark you saved earlier and you will see a consol box appear at the bottom of the web page.

Firebug Consol

If we close up, this is what you will see on the bottom left of the page.

Firebug Consol Closeup

Now you can see the (+) and the (-) at the starting point of many lines. The (+) means there are more lines closed under the one-liner of html, and if you highlight the line, you will see which part of the page it represents.

Highlighted lines

But if you want to make it easier to spot the lines represented by any text, photo, link or any other elements on the web page itself, click on the ‘Inspect’ button.

Inspect

Now you can hover your mouse cursor to any part of the elements available on the web page, and you will see the html line highlighted. This makes it easier for you to do some inspection.

Inspect Highlighted

Installing Firebug Lite on iPad & iPhone

Bookmarklets doesn’t really go well with iPad and iPhone. To have Firebug Lite installed on iPad and iPhone, here’s how:

  1. Bookmark this page on your iPad or iPhone.

    Firebug Bookmark iPad

  2. Rename the bookmark to “Firebug”.

    Firebug Bookmark Rename

  3. Select and copy all the script below.

    javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
  4. Go to bookmark option and press “Edit”. Then select “Firebug” bookmark.

    Firebug Bookmark Edit

  5. Remove the original URL and paste the bookmarklet.

    Firebug Bookmark Paste

  6. Choose “Done” on your keyboard.

Now, try to open any website and select “Firebug” bookmark and you’ll see a functioning Firebug at the bottom of your iPad screen.

Firebug Bookmark Paste

Conclusion

Firebug Lite is by far good enough to do quick page inspection. You can view html, css and any script used to build the webpage. Although Chrome has its own Web Developer extension, Firebug Lite does not disappoint by a mile.

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.