1. Web Developer

This is the Swiss army knife of Web development add-ons. Web Developer gives you a toolbar packed with useful features.

You can also turn off the toolbar and access the same features via Tools > Web Developer, or by right-clicking in the page. This is great for reducing toolbar clutter!

With the Web Developer add-on you can:

Temporarily disable browser features such as caching, JavaScript, images and CSS

View, manipulate, create and delete cookies

View and edit a page’s CSS and HTML on the fly

Manipulate forms and form data

View all sorts of details about elements in the page

Measure page elements with the Line Guides and Ruler features

Highlight different types of elements within the page (great for debugging CSS layouts)

Resize the browser window to various preset sizes (good for checking compatibility)

Validate a page’s HTML and CSS with the W3C validators

View a page’s JavaScript-generated source — fantastic for debugging AJAX stuff

In my opinion, Web Developer is an must-have tool if you do any sort of Web design or development work.

2. Firebug

Firebug is a comprehensive suite of debugging tools along the lines of Web Developer. You can enable it on a page-by-page basis by clicking the little bug icon in the status bar.

Amongst other things, you can use Firebug to:

View and edit the page’s HTML, CSS and JavaScript

Right-click any element in the page to inspect it

Add breakpoints to the page’s JavaScript to debug it at certain points

See the page’s DOM tree

View download times, bottlenecks and HTTP headers

It even has a built-in JavaScript command line and console for debugging (and it’s nicer than the JavaScript Debugger add-on too).

A nice thing about the HTML inspector is that its Layout view shows you the CSS box (margin, padding and so on) around the currently-inspected element, and adds rulers and guides to the page so you can check everything’s lined up. Very cool.

Personally I prefer to use the Web Developer add-on, as I find Firebug has (ironically) got rather buggy and slow recently. However, Firebug does have some neat features not in Web Developer, such as being able to inspect any element by right-clicking it, as well as the aforementioned JavaScript debugger and Layout view.

3. SEO for Firefox

There are quite a few Firefox add-ons that can help you with SEO, but SEO for Firefox is the best in my opinion. Search for your target keywords on Google or Yahoo!, then click the SEO icon in the status bar to turn on the add-on. It then adds all sorts of useful info to each entry in the search results page, such as:

The entry’s position in the search results (surprisingly useful!)

The page’s Google PageRank

Its age (the older the better from an SEO perspective)

Number of inbound links to the page

Number of bookmarks on del.icio.us

Alexa rank

…and lots more besides. Unlike some add-ons, it just displays links to this info by default, rather than the info itself. This is a good thing, as it reduces the chance of your computer being blocked by search engines and other sites for requesting too much info at once.

You have to sign up for an SEO Book account to get the add-on, but it’s worth it.

Other honourable mentions in this category include SEO Toolbar (also from SEO Book), Foxy SEO Tool and SearchStatus. These all work with the page you’re viewing, rather than with a search results page.

4. HTML Validator

Validating webpages is one of those chores that you know you should do, but inevitably end up forgetting about when it comes to putting the site live. The great thing about this add-on is that it “auto-validates” your pages as you view them; if you see a red cross in your status bar you know that the page has failed validation. No excuses!

You can use one of two validators (or both): SGML Parser (as used by the W3C validation service) or HTML Tidy. As a nice touch, the add-on includes a feature to clean up your page markup, as well as the ability to check that your page conforms to the WAI accessibility guidelines (priorities 1, 2 and 3).

5. Save Complete

I often want to mess about with an online webpage’s HTML and CSS for debugging purposes. Firebug and Web Developer let you do this to some extent, but they’re a bit limited and, of course, they only let you preview changes in Firefox.

Enter Save Complete. This lets you save a webpage along with all its assets (CSS, images, and so on) to a folder on your hard drive. You then have a full local copy of the page that you can edit to your heart’s content, and open with any browser on your computer. Very handy for debugging and testing.

Unlike Firefox’s regular Save Page As > Web Page, Complete option, this add-on really does save pretty much everything: JavaScript files, style sheets, images referenced from CSS, and so on. It’s not perfect but it does a really good job. Also handy if you want to archive a permanent copy of any webpage on your computer.

6. FireFTP

An entire FTP program inside your Web browser might sound like a terrible idea, but in fact FireFTP is rather swish. There’s something nice about having an FTP client always at hand in the browser, since that’s where you tend to spend most of the time when coding webpages.

You can open it in a separate window or in a tab, and it’s very easy to use. It also supports advanced stuff like TLS/SFTP, directory syncing, and even FXP. Many developers I know even prefer FireFTP to the separate Mozilla FTP client, FileZilla.

7. Screengrab

Takes screen shots of webpages. Great for sending mockups to clients. The nice thing about Screengrab is that it can capture the entire page, even if it doesn’t fit in the browser window. You can also grab just the visible portion of a page, or a selection. Screen shots can be saved out to files, or copied to the clipboard.

If you like Screengrab you might also like Shooter. It does the same basic job but it’s a bit easier to make selections. It can’t, however, copy the screen shot to the clipboard (at the time of writing).

8. HttpFox

This add-on lets you analyze, in real time, the data that is sent between Firefox and the Web server. You can see the full HTTP request and response headers; any sent or set cookies; posted form fields, and so on. This is handy if you do a lot of server-side coding using PHP, for example.

You can also filter on a string of text, which makes it really easy to find the particular header you’re after.

9. User Agent Switcher

Another one from the author of Web Developer, Chris Pederick. This add-on lets you alter the User-Agent string that Firefox sends to the Web server. This allows Firefox to impersonate other browsers such as IE and iPhone, and search engine crawlers such as Googlebot.

The Googlebot option has saved my bacon on at least one occasion when sites weren’t getting indexed by Google. It turned out that, when a site was accessed by Googlebot, it was triggering a bug in the site’s robot detection code and crashing the server. Doh!

10. ColorZilla

ColorZilla is a tool for analyzing colours in a webpage. Click its icon in the status bar, then hover the mouse over a pixel in the webpage to see its colour value. Click to select the colour; you can then right-click the status bar icon to copy the RGB values in a variety of formats for pasting into your style sheet.

Other handy features of ColorZilla include:

A Photoshop-style colour picker and palette browser

A zoom feature to make it easier to click a colour in the page

A DOM colour analyzer that gives you a palette of all colours used on the page, and lets you see which page elements use which colour

ColorZilla is a nice way to quickly eyedrop colours from a Web page without having to mess about in Photoshop. Great for CSS development.

Other Addons :

CSS Validator: CSS Validator adds a right-click option in your browser, sending the CSS to the W3C CSS Validator. It opens the results in a new tab. CSS Validator is a nice tool that will come in handy often.

FirePHP: FireBug is a fine tool for CSS, HTML, and JavaScript, but FirePHP, which only works when you have the FireBug extension installed, creates a full-featured development experience. With the help of both add-ons, you can view the quality of your PHP and find errors. It’s a great aid.

Font Finder: Font Finder allows you to highlight a font you like on any site, right-click on the selection, and after choosing “Font Finder”, view the full CSS text styling of the selection. You can then paste that into your own Web page.

Aardvark – A cool extension for web developers and designers, allows them to view CSS attributes, id, class by highlighting page element individually.

Flash Switcher – Use this extension to avoid reloading between flash plugins.

Window Resizer – Automatically resize your browser window between 640×480, 800×600, 1024×768, 1280×1024, 1600×1200 to see how pages appear at these resolutions.

Screen grab – Capture screenshot of any webpage and save it as an image file with this extension.

Related Posts

• Top 5 Firefox Add-ons for Facebook Users (0)
• 5 Interesting Firefox Tabs add-ons (1)

Firefox for Mobile (Fennec) version 1.0 release candidate for Nokia Maemo based N800/N810/N900 is out (Fennec for Windows Mobile is still in alpha). You can also experiment on your desktop with Firefox for mobile, provide feedback, build add-ons, and get involved by installing it on your desktop PC: for Windows, Linux and Mac OS X.

You can view Firefox for Mobile 1.0RC release notes as well as download links for Maemo, Windows, Linux and Mac OS X,Here.

Related Posts

• No Related Posts

This is the first screen you’ll see in Firefox Mobile. The application has a skin on top of the existing user interface which I suspect slows it down a bit. Still, it looks like a typical Maemo application with the “switch apps” icon in the top left and the “close” in the top right.

Related Posts

• No Related Posts

Jay Sullivan who was in charge of the project said that the mobile version underwent various tests and would be launched by the end of the year. He also added a user would not have to sit in the evening and work on their PC, instead he would be able to walk. In case he received some urgent documents that he had to read there would be no necessity to back home and check his e-mail, as his mobile would be equipped with Firefox mobile version.

The version is able to encrypt all the information a user receives and sends it back through the cloud. Also it can sync with the desktop version of the browser.

In case everything goes smoothly, the owners of N900 will be able to download Firefox that can be found in Nokia’s Ovi store.

Also Mozila which is considered to be the parent company of Firefox, is developing versions for Google’s Android as well as Microsoft’s Windows operating systems.

Those who have, iPhones and want to have Firefox on their desktop, they will have to wait a bit, as the company has to synchronize their desktop.

But still Opera is considered to be the most popular mobile browser at present. It is available for many mobile handsets.

(Via theLatestNews)

Related Posts

• Firefox for Mobile ‘Days Away’ from Launch (0)
• Firefox Image Host Downloader (8)

The browser, codenamed Fennec, will initially be available for Nokia’s N900 phone, followed by other handsets.

It is currently going through final testing and could be released before the end of the year, said Jay Sullivan at Mozilla, the group behind Firefox.

The open-source browser will be able to synchronise with the desktop version.

Software will mean that any web pages open in a user’s desktop browser will automatically open in the mobile version.

“At the end of the working day you can walk away from your computer and keep on going on your phone,” Mr Sullivan told the BBC.

“It encrypts all of the information and sends it back through the cloud between your desktop and mobile.”

He said that providing there were no “show stoppers”, the software could be available to download “within the year”.

Desktop success

The browser will be available to download from the Mozilla website and then offered in Nokia’s Ovi store, so that N900 owners can download the software.

The organisation is also developing versions for Microsoft’s Windows mobile and Google’s Android operating system.

However, he said that it would be some time before iPhone users would be able to use the browser.

“Apple is very restrictive.” he said. “As it’s a pretty closed platform we don’t see that happening soon.”

Apple only allows browsers based on its Webkit engine, which is used to power its Safari browser, to be loaded on to the iPhone. Firefox uses alternative technology.

When it launches, Fennec will compete with browsers such as Opera, which is the most popular mobile browser according to analytics firm Stats Counter.

Safari, which comes bundled with the iPhone, is the second most popular, whilst Nokia’s own browser is third.

The mobile version of Firefox will hope to follow the success of its desktop browser.

Stats Counter has reported that the latest version of the Firefox browser has overtaken Internet Explorer 7 (IE7) as the World’s most popular browser with 21.93% of the market, compared with IE7’s share of 21.2%.

However, other firms suggest IE still has the lead on Firefox, whilst most agree that the various versions of Explorer combined still dominate the web browser market.

App craze

Fennec has been in development for the last year and a half.

The new software has many of the features of the desktop version, such as tabbed browsing, and an address bar that doubles as a search box.

However, the mobile version will also scale pages to fit the device and will support functions such as tapping the screen to zoom in on a page.

Mr Sullivan said it would also be the first mobile browser to have “add-ons”, small pieces of software that add functionality to the browser such as news readers or online games. They can also be used to customise the look and feel of the browser.

“Because it is a browser for a mobile device, the add-ons will be different,” said Mr Sullivan. “You’ll see ones that use geo-location and exploit how the device is tilted.”

The add-ons will add functionality to the phone that is currently offered by mobile apps.

These small specialist pieces of software have become increasingly popular.

For example, Apple now offer more than 100,000 apps in its store ranging from games and social networks to news readers and tools that allow people to use sites such as eBay or Amazon on the go.

Blackberry, Google, Nokia, Symbian and Microsoft all offer their own app stores.

However, he said that he did not think that the browser would completely replace these apps.

“They will co-exist,” he said.

(Via BBS News)

Related Posts

• Firefox Will Soon Unveil its First Mobile Version (2)

Firefox 4 developer Stephen Horlander published some new design mockups of Firefox 4 on his personal blog. The major element in this mockup series of Firefox 4 seems to be the App button as he calls it. This is the same one-button approach that the other web browsers have already implemented or started to implement.

The Firefox button in the mockup above is the App button that leads to all the menus that are usually found in the menu bar of Firefox 3. Some users might argue that it is a waste of space to put the app button in single toolbar

instead of placing it into an existing toolbar. The removal of the title bar would have barely any effect on the available screen estate otherwise.

Stephen posted some app button variations that place the app button next to the tabs instead or next to the title bar; Something that would free up screen estate.

What are your thoughts on the new mockups of Firefox 4? Long needed changes or something that better remains untouched?

Related Posts

• Mozilla Firefox 3.6 Beta will Release Next Tuesday (1)

This littlest add-on of them all spread joy a harmony throughout the Internets by allowing all those in Twitter land to send tweets to their friend, families and that guy who keeps spamming affiliate deals.  It didn’t do this by any normal means.  Oh no.  It did it’s work by simply highlighting text on any page.

Ok, that is all the fairy tail talk I can handle.  TinyTweet is another one of those, small extensions that simply gets the job done.  All you have to do is highlight any text inside of any web page, and a “Tweet This” button will magically appear.  Click it, and an automatically generated bit.ly link is created and the text you highlighted is ready to be shared to all your Twitter followers.

You can pick up the TinyTweet add-on from the Firefox Add-ons web site.

Related Posts

• No Related Posts

The missing release notes are an indication that it will take anywhere from 24-48 hours before the new version of Firefox 3.6 will get officially announced by Mozilla. This will also be the time frame for the discovery of the new version by the automatic update check in the web browser.

The new beta release could be related to the updates yesterday which would suggest that the update fixes security and stability issues in Firefox 3.6. The only option to know for sure is to wait until the developers are publishing information on the Mozilla website.

Users who want to update the web browser right away need to wait until it gets posted on various download portals which usually pick up the new releases faster than the official Mozilla page.

Related Posts

• Firefox 3.6 Beta 4 Released (0)
• Firefox 3.6 Beta Coming Next Week (0)

Add-ons product manager Justin Scott (reluctantly) announced the news this morning at an add-on-happy conference in Mozilla’s home town of Mountain View, California. “We’ll probably be doing a App Store pilot in 2010,” he said.

Scott did not provide details. But earlier in the morning, he did say that Mozilla has no intention of using DRM – not that you would have expected anything else. “I don’t know what we’ll do, but we won’t do DRM,” he said.

Clearly, an add-on App Store is a touchy subject for Mozilla, an open source outfit viewed as one of the leading champions of free software. Earlier in a panel discussion meant to answer the question “Do add-ons need a marketplace?,” Scott hemmed and hawed over the idea.

“I really wish we had more consumer feedback on these sorts of things,” he said. “We don’t get enough feedback from consumers who would actually be buying these add-ons. We haven’t really brought it up for discussion among them yet. But from what we hear, developers all want a store. But we’re not really sure how consumers feel about it.

“Occasionally, we do see people commenting on add-ons say ‘I think software should be free.’”

Yes, Mozilla already offers a central download page for Firefox add-ons – addon.mozilla.org, affectionately known as AMO – but this is not a place where developers can actually sell their browserware. The best they can do is request contributions from users, and at least one developer at today’s Add-on-Con reacted with incredulity to the waffling by Scott and various other add-on makers attempting to address the marketplace issue.

“Look at the Apple App Store,” the developer told the panel, referring to the application storefront the Jobsian cult has set up for the iPhone. “You guys are really smart guys. If you can’t see a great path like that, I think it’s a real bummer for developers.”

But thanks to some additional prompting from conference host Robert Reich – founder of the real-time search outfit OneRiot – Scott did admit that some sort of Mozilla marketplace is on the way. Though that’s all he said.

At one point, Reich also asked Scott if Mozilla might provide built-in access to an add-on marketplace run by a third-party – i.e., add it to the Firefox toolbar, where Mozilla already links users directly to Google and other search engines. Scott pretty much ruled out that possibility. But he did acknowledge that anyone could add an add-on store to Firefox – with an add-on.

Related Posts

• Mozilla Launches Plugin Check To Keep Firefox More Secure (1)
• Mozilla Releases Fifth Beta Of Firefox 3.6 (0)

Other additions included a filter to only display add-ons specifically for one product. The latest addition to those pages is a language filter which can be used to display only add-ons that are offered in a specific language.

The displayed language filter uses information provided by the url that is accessed to display the filter. You might recall that the Mozilla website uses language encodings as part of their url structure.

A visitor from the United States would therefor be able to filter the add-ons so that only English add-ons would be displayed, a German would be able to do the same for add-ons that are provided with a German interface.

It sometimes happens that users land on a Mozilla page that is displayed in a different language which can be the case when following links from websites for example. The Mozilla website displays a pulldown menu at the bottom that allows the visitor to switch to another supported language.

This new feature can be helpful for users who prefer to use add-ons that are provided in their native language.

Related Posts

• Mozilla Releases Fifth Beta Of Firefox 3.6 (0)
• Mozilla Planning App Store For Add-ons (0)