The latest version of Firefox – Version 35 – has been released. It packs some great improvements that should make the lives of developers easier and, well, just a little more awesome. youtube: zu2eZbYtEUQ The first noteworthy change is to CSS source maps, which are now enable, by default.
Just in time for Mozilla’s 10th anniversary of Firefox, comes a series of new projects such as Polaris, Interest Dashboard and the one that’s been talked about for quite some time – Firefox Developer Edition. Although there are a lot of developer tool add-ons that can be integrated in the existing Mozilla Firefox browser, this […]
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.
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.
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.
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 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:
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”.
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.
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.
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!
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.
Profiles can be saved and imported easily, so you can compare profiles to make your applications streamlined to the extreme!
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.
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.
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.
Read this very carefully, because it could end up saving you a lot of money. If you’re planning to sign up to Adobe’s Creative Cloud subscription plan, check the price on as many browsers on as many devices as possible. Because we just checked on a Chrome browser on a Mac and it came out as £45.99 per month. Yet when we went to the same site through Firefox or Safari, it cost £37.99 per month.
If you download the latest version of Firefox today, you’ll see much more than the odd bug fix or functionality improvement – the UI has been completely redesigned. According to this post on the subject, the UX team used “the 80/20/2 rule” to reprioritise the browser’s features according to how much they are used.
Are you a fan of Firefox add-ons? They make your life easier by automating a lot of things you do with your favorite browser. In fact, there are actually collections that Firefox users have put together to benefit other Firefox users. These are called Firefox Collections.
Firefox Collections make it easy to keep track of your favorite add-ons and share them with the world. You can follow any collection to keep track of updates (newly added add-ons), try out recommended add-ons and even test out brand new ones. Most of these collections bear the ratings for the add-ons to help you decide, and these collections are often better-targeted and more actively curated by the collection owners.
Here are just some of the Firefox collections that I have come across that I’m sure will help you out one way or another.
Firefox has a great selection of Web development add-ons and this collection brings the best of them together. So far there are 14 add-ons to help you troubleshoot, edit and debug Web projects all from within Firefox.
Top Add-ons: Firebug, Greasemonkey, Stylish, iMacros, User Agent Switcher, Web Developer.
Looking for the best way to document useful Web pages, links, text and images? This collection is great for students, researchers, writers, bloggers or anyone else who does a lot of Web research or maybe those who just like to save things for later.
Top Add-ons: Evernote Web Clipper, Pocket, ScrapBook, StumbleUpon, SimilarWeb.
As the name implies, this collection is aimed at families. The add-ons listed can be used to create a “safe and fun online experience” for mothers, fathers and children. So far there’s only 6 on the list, but let’s hope that it is actively updated.
Top Add-ons: Web of Trust, ReminderFox, Integrated Inbox, FoxFilter.
Top Add-ons: Firebug, YSlow, FirePHP, CodeBurner, FireQuery, Firefinder.
There are quite a few privacy/security collections, but I really like this one because the collector has taken the time to write a useful note for each add-on featured. The selected security add-ons are said to be “relatively passive and produce minimal disturbance in typical day-to-day browsing.”
Top Add-ons: Adblock Plus, NoScript, LastPass, User Agent Switcher, BetterPrivacy, Lightbeam.
This collection will really come in handy for any special holiday when shopping deals are at their best. Whether you’re a shopaholic or just like saving money when shopping, these add-ons can help you to do just that. Now you’ll never miss out on those great sales!
Top Add-ons: CouponsHelper, Ciuvo – Price check in your Browser, PriceBlink, Boo.ly Shopping, The Amazon 1Button App, InvisibleHand.
Do you use all or most of Google’s products like YouTube, Gmail, Google Calendar and Google search? If so, this collection can help make using these tools even easier. The add-ons on this list can extend the functionality of Google’s most popular services.
Top Add-ons: Video DownloadHelper, Feedly (a Google Reader replacement), Gmail Manager, SearchPreview, Google Shortcuts, Shareaholic.
Are you a social networking addict or just like sharing cool things on to your social networking accounts? Then this collection is for you. It includes social networking add-ons to help make sharing easier, and to give you easy access to the most popular social sites.
Top Add-ons: ChatZilla, StumbleUpon, Facebook Toolbar, Yoono, Thumbnail Zoom, Shareaholic.
The name says it all. If you’re a sports fanatic, the add-ons in the collection are sure to help cater to your sports addiction. These add-ons can help you get the latest scores, highlights and news for your favorite sports team.
Top Add-ons: FootieFox, Are You Watching This?! Sports, Pickemfirst Fantasy Sports.
In case The Paranoid Kit collection doesn’t meet your needs, this is another privacy collection that is also useful. The add-ons listed are more geared toward making you anonymous on the Web as well as covering and erasing your tracks.
Top Add-ons: Adblock Plus, anonymoX, NoScript, Ghostery, Web Of Trust, BetterPrivacy.
Gmail is a great online email service, but you can make it even better with the add-ons in this collection. Whether you want to get notifications of new email messages, bring all your favorite Google services to Gmail or add a cool email signature, this collection is perfect for the job.
Top Add-ons: X-notifier, Gmail Manager, Integrated Inbox, WiseStamp.
Top Add-ons: Firebug, Greasemonkey, iMacros, User Agent Switcher, Web Developer, FoxyProxy.
The earlier mentioned Web Developer’s Toolbox is a collection just for Web developers, but this Web Pro collection is for Web developers and designers. Some of the add-ons listed may overlap, but you’ll find a lot of useful add-ons for designers and even some different ones for developers.
Top Add-ons: Video DownloadHelper, Firebug, DownThemAll!, Greasemonkey, iMacros, Flagfox.
This is a really thoughtful collection to say the least. The add-ons listed have been tested by the Collector and are found to be very helpful for people with visual impairments. The collection has a focus on “a user’s interactions with sites and Firefox.”
So if you have some type of visual impairment (partially sighted, low vision, legally blind), or just have a hard time seeing specific Web pages, these add-ons should be able to help you see better in Firefox.
Top Add-ons: Adblock Plus, Stylish, Tab Mix Plus, Web Developer, FireGestures, ColorfulTabs.
Now that you know more about Firefox Collections and the best ones to check out and/or follow, let us know which collections you’re following or plan to follow.
If you want to block some websites that you do not want your children to access then use these Parental control plugins for the Google Chrome. The meaning of Parental control is “to have a control on the web content that you would like to see or hide”. With this Parental control you can easily hide or block your unwanted contents on web. In the twenty first century you can easily access almost everything through internet at anywhere. So these parental control plugins will help you in this case.
In this post, we are presenting 10 free and amazing parental control plugins for the Google Chrome and Firefox. All these Parental control plugins will provide you the full control on the web content. Have a look at these Parental control plugins and download your favorite one which suite your requirement.
The tinyFilter extension is a tiny Web content filtering tool. As any other content filter, it uses predefined rules to filter a variety of Web sites. Additionally, tinyFilter provides a profanity filter to mask words that may be offensive to the user.
Cloudacl WebFilter is cloud based content filtering application which monitoring several million websites and billion of web pages to keep you family especially your kids have a safer internet surfing environment.
BlockSite is an extension, which automagically blocks websites of your choice. Additionally, this extension will disable all hyperlinks to these websites, by just displaying the link text without the clicking functionality.
Cloudacl WebFilter is cloud based porn content filtering application monitoring millions web sites and billion of web pages to keep you family especially your kids away from sex, nudity and adult content.
LeechBlock is a simple productivity tool designed to block those time-wasting sites that can suck the life out of your working day. All you need to do is specify which sites to block and when to block them.
Even though it has lost considerable market share to Google Chrome, Mozilla Firefox is still the preferred and favored web browser for a good number of internet users. And in the light of stiff competition from Chrome, Firefox has recently been trying hard to come up with something new in an attempt to bridge its lost market share.
And speaking of something new from Firefox, behold Australis, the newest and most gorgeous iteration of the Firefox user interface yet.
Screenshot of Australis
In easy terms, Australis is being hailed as a modern and clean visual design iteration for the Firefox web browser. Apart from simplifying and streamlining the default Firefox UI, Australis will also include easier ways to customize your web browser. As Mozilla is describing it, ‘it’s the most beautiful and detail-obsessed iteration of Firefox’s visual design yet: modern, clean, and comfortable’.
Here’s a two minute overview and walkthrough of Australis:
While it is not yet fully ready and needs a good deal of polishing, you can play around with the Australis interactive demo here.
Smartphones running the new Firefox OS have been launched by a couple of carriers around the world (most notably by Telefónica in Spain and South America), but a widespread launch in the US and UK is still a ways off. Despite that, ZTE still wants to sell its Open Firefox smartphone to consumers willing to pay for it in those countries, so it has turned to eBay to peddle its wares. The Open is ZTE’s first Firefox phone, and while it won’t get any hardware geeks excited with its 3.5-inch HVGA display and low-end processor, it does give the US and UK their first look at the new web-based mobile platform. Those interested in giving the Open a run can pick it up in orange for $ 79.99 (£59.99 in the UK) from the official ZTE eBay store…