Page Speed, the popular Firebug/Chrome add-on -by Google- for evaluating the performance of web pages now gets an online version.
It offers a very similar functionality with the Firebug version, analyzes the page performance and comes with suggestions that are categorized in priorities to improve it.
This free service also has a new feature: "suggestions for the mobile version of a web page" which are tuned for the unique characteristics of mobile devices.
foxGuide is a firefox extension that can display both horizontal and vertical guides on web pages.
The guides can be moved or removed just like the ones in Photoshop. Also, you can set the transparency and color of them for a perfect fit.
The extension has a memory which remembers the guides created per website. Even if the browser is closed or the URL is changed, the guide for that web page is stored.
foxGuide also works well for pages that have huge width/heights (supports up to 10,000px).
ColorZilla is an impressive Firefox plugin that assists web developers and graphic designers with color related tasks.
A built-in eyedopper can get the color of any pixel and a color-picker helps playing with colors instantly. Picked colors can be added to the plugin's palette viewer/editor.
Also, generated or sampled colors can be auto-copied in CSS RGB, Hex and other formats which is handy to paste them into image editing apps.
A great feature is the ability to generate the color palette of any web page automatically and seeing where they are exactly used.
Beside these color-based functions, it can also measure between any to points
BrowserLab, a web-based service by Adobe, enables you to test websites on multiple browsers and OSs.
It is possible to create a custom browser set where the screenshots will be created only for those browsers (also helps speeding up the results).
Screenshots can be previewed in 2-up or onion-skin views which makes comparing multiple versions easier and x/y rulers can be used for sensitive measurements..
The service currently supports different Firefox, Safari and IE versions for Windows and Mac OS X. However, it is still in beta and new browsers are added within time.
BrowserLab is part of the Adobe CS Live and free for 1 year if you sign-up before April 30, 2011.
Although everyone tries hard to make websites work with every browser, they are generally not 100% compatible.
And, with the increasing usage of HTML5+CSS3, they are becoming incompatible with more and more browsers everyday.
Free The Foxes is a free JavaScript+HTML+CSS-based solution for displaying good-looking notifications to visitors with a incompatible browser.
With the help of a simple configuration file, it is possible to rate browsers and their versions where the notification window displays result according to these ratings.
The window also guides users to download a better browser with the options and their download links.
PixelZoomer is a very handy Firefox extension for web developers which can replace the step of taking screenshots of a web page and pasting it into an image editing software for making pixel-perfect measurements.
Once it is activated (clicking an icon at the bottom of Firefox), a custom window with the web page screenshot is loaded.
Inside this window, you can zoom in/out, select specific areas to see their width/height and pick the color of a pixel.
The extension has an option to grab the screenshots using Java runtime (more accurate) or Canvas (faster).
LightShot is a simple & free tool which makes taking screenshots very easy.
With the click of a keyboard shortcut, a cropping interface appears where it is possible to:
Most of the similar tools instantly take a screenshot of the area you selected before clicking any approve button. LightShot makes it kindly, waits for you to arrange the area, shows you the size of it & a click is required which is better to prevent wrong screenshots.
The tool can work in every computer as it comes as a Windows desktop application, a Firefox add-on & an Internet Explorer add-on.
Browser Sandbox is an online platform which makes launching various browser versions possible.
It requires an installation of a plugin & can run:
The platform is definitely a gold mine for making cross-browser tests quickly & easily.
P.S. Spoon allows you to convert your own apps to Spoon apps & post them on the web. You can check the platform's homepage for that.
FireQuery is a Firefox add-on that extends Firebug with new jQuery-focused features.
It adds extra functions to the HTML tab like showing embedded data elements & event handlers inserted using jQuery.
All the jQuery expressions are presented in Firebug Console + DOM inspector and elements in jQuery collections are highlighted on hover.
Also, the jQueryify bookmarklet is integrated into FireQuery which makes injecting jQuery into any website possible.
For every web designer & developer, refreshing the browsers to see the updates we make is a very common action.
XRefresh is a solution, specifically built for easing this process, which automatically refreshes browsers once an update to a file in our project folder is done.
It comes with 2 parts: a browser plugin (both for Firefox & IE) and an application (for Windows & Mac) which watches the changes made in the folders we mentioned.
Although it is handy for systems with one monitor, the best environment will probably be two monitors where the IDE & the browsers runs on each.
P.S. For Firefox, it requires Firebug to be installed.
