Here's some tools we use in house for development:
ScreenGrab: https://addons.mozilla.org/en-US/firefox/addon/1146Screengrab saves entire webpages as images.
It will save what you can see in the window, the entire page, just a selection, a particular frame... basically it saves webpages as images.
The following little keywords are at the request of those who can't remember the name ScreenGrab! and want searches to work. It takes screen shots, screenshots - that is, shots, of web pages.
MeasureIt: https://addons.mozilla.org/en-US/firefox/addon/539Draw out a ruler to get the pixel width and height of any elements on a webpage.
Inline Code Finder for Firebug: https://addons.mozilla.org/en-US/firefox/addon/9641Inline Code Finder is an add-on to Firebug, to be able to find HTML elements with any of the below issues:
* Inline JavaScript events
* Inline style
* javascript: links
Detailed description can be found at
http://www.robertnyman.com/inline-code-finder/YSlow: https://addons.mozilla.org/en-US/firefox/addon/5369YSlow analyzes web pages and tells you why they're slow based on Yahoo's rules for high performance web sites.
Pixel Perfect: https://addons.mozilla.org/en-US/firefox/addon/7943Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
* Requires Firebug
ColorZilla 2.0: https://addons.mozilla.org/en-US/firefox/addon/271With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. And there's more...
IE Tab: https://addons.mozilla.org/en-US/firefox/addon/1419This is a great tool for web developers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox.
PageDiff 1.3.0: https://addons.mozilla.org/en-US/firefox/addon/4274Pagediff is a simple page compare application. It helps web developers and designers to see HTML-code(text) differences between web pages.
It doesn't take original page source. It takes browser generated DOM compliant view source. It omits Doctype declaration and HTML tags.
After installation, to use this, one has to
1. Right click on a page & select 'Start DIFF' (this action saves the current page to memory),
2. Go to the page which one wants to compare (with the saved one) and
3. Right click on the page & select 'Show DIFF'.
Html Validator: https://addons.mozilla.org/en-US/firefox/addon/249HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
The extension can validate the HTML sent by the server or the HTML in the memory (after Ajax execution).
The details of the errors are seen when looking the HTML source of the page.
The extension is based on Tidy and OpenSP (SGML Parser). Both algorithms were originally developed by the Web Consortium W3C. And now extended and improved by a lot of persons. Both algorithms are embedded inside Mozilla/Firefox and makes the validation locally on your machine, without sending HTML to a third party server.
Each algorithm has advantages and inconvenients. The program will give you the choice at startup. But mostly,
- The SGML parser is the same program than the one running behind validator.w3.org.
- Tidy has accessibility check for the 3 levels defined in WAI
Console²: https://addons.mozilla.org/en-US/firefox/addon/1815As of Firefox 1.5, the JavaScript Console is used not only for JavaScript errors, but for CSS errors as well. This extension takes this into account by providing a simple possibility to display errors by type.
Console² let's you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content). Furthermore it provides a simple search box (as seen in the History and Bookmarks sidebars), hiding of duplicates, sidebar optimizations, a customizable toolbar and some more accessibility improvements.
Labels: CSS, Design, Statistics, Technology, Website Curation