[Must have] Все для веб мастеров

[PandoraBox]

[Mozilla] Набор для Веб-разработчика

http://s51.radikal.ru/i131/0910/3b/8772ead54674.jpg
Codetch (https://addons.mozilla.org/ru/firefox/addon/1002) — WYSIWYG-редактор по функциям напоминающий Macromedia (Adobe) DreamWeaver. Окна со вкладками, функция предварительного просмотра, отладчик Javascript - вот лишь несколько пунктов из обширного списка функциональных особенностей продукта.

Firebug (https://addons.mozilla.org/ru/firefox/addon/1843) — Наверное самым мощным инструментом в "Наборе веб-разработчика на базе FireFox" является уникальное средство отладки веб-приложений.

Web Developer (https://addons.mozilla.org/ru/firefox/addon/60) — это плагин для браузера Mozilla Firefox, добавляющий панель веб-разработчика, с помощью которой Вы без лишних затрат сможете посмотреть стиль элемента, его отредактировать, редактировать атрибуты html тегов.

Live HTTP Headers (https://addons.mozilla.org/ru/firefox/addon/3829) — позволяет видеть, что именно гуляет между вашим браузером и сервером. А хорошим дополнением к LiveHTTPHeaders будет кнопка очистки кэша браузера "Clear Cache", еще одно расширение для Firefox (после установки вам нужно вручную добавить ее на панель инструментов).

MeasureIt (https://addons.mozilla.org/ru/firefox/addon/539) — расширение схожее по назначению с ColorZilla - измеряет расстояния на странице. С помощью него мы можем получить точные размеры произвольного прямоугольника.

ColorZilla (https://addons.mozilla.org/ru/firefox/addon/271) — Дополнение к FireFox, при помощи которого можно определять цвета в любой точке браузера.

Xinha here! (https://addons.mozilla.org/ru/firefox/addon/1449) — замечательное расширение для FireFox, которое представляет из себя WYSIWYG-редактор для форм с богатым набором возможностей.

FasterFox (https://addons.mozilla.org/ru/firefox/addon/9037) — это расширение Firefox, ускоряющее загрузку веб-страниц браузером Firefox. На апрель 2006 года занимает 3-е место в рейтинге расширений.

FlashGot (https://addons.mozilla.org/ru/firefox/addon/220) - интеграция с менеджерами закачек.

Adblock Plus (https://addons.mozilla.org/ru/firefox/addon/1865) - блокировать рекламу.

NoScript (https://addons.mozilla.org/ru/firefox/addon/722) - позволяет запреть/разрешить работу JavaScript на конкретном сайте.

[CUT]Screen Grab! (https://addons.mozilla.org/ru/firefox/addon/1146) - сохранить страницу как картинку.

Cooliris Previews (https://addons.mozilla.org/ru/firefox/addon/2207) - просмотр содержимого ссылки в мини-окне.

SwitchProxy Tool (https://addons.mozilla.org/ru/firefox/addon/125) - переключение между серверами прокси.

ChatZilla (https://addons.mozilla.org/ru/firefox/addon/16) - IRC клиент.

IE Tab (https://addons.mozilla.org/ru/firefox/addon/1419) - отображение Internt Explorer в закладке FireFox.

Password Exporter (https://addons.mozilla.org/ru/firefox/addon/2848) - помогает импортировать экспортировать пароли к сайтам, в основном использую для просмотра забытых паролей.

ScrapBook (https://addons.mozilla.org/ru/firefox/addon/427) - удобный инструмент для сохранения html страниц.

SEO for Firefox (https://addons.mozilla.org/ru/firefox/addon/3036) - набор полезных мини-утилит для оптимизатора (оптимизатор).

SEOBar (http://forum.mozilla-russia.org/viewtopic.php?id=27669) - набор полезных мини-утилит для оптимизатора (оптимизатор)

Site Navigation Bar (https://addons.mozilla.org/ru/firefox/addon/1949) - плагин для работы с мета информацией страницы (link rel="prev")

User Agent Switcher (https://addons.mozilla.org/ru/firefox/addon/59) - позволяет прикинутся разными браузерами (web-разаработчик).

View formated source (https://addons.mozilla.org/ru/firefox/addon/697) - просмотр исходного HTML страницы (web-разаработчик).

View Source Chart (https://addons.mozilla.org/ru/firefox/addon/655) - структурная диаграма исходного кода HTML (web-разаработчик).

Web Developer (https://addons.mozilla.org/ru/firefox/addon/60) - набор архи-полезных утилит для web - разработчика (web-разаработчик).

MeasureIt (https://addons.mozilla.org/ru/firefox/addon/539) - линейка для измерения размеров отрендереного HTML (web-разаработчик).

FireBug (https://addons.mozilla.org/ru/firefox/addon/1843) - отладка Java Script - архи-полезная вещь для web - разработчика (web-разаработчик).

DOM Inspector (https://addons.mozilla.org/ru/firefox/addon/6622) - просмотр DOM дерева документа (web-разаработчик).

Gmail Manager (https://addons.mozilla.org/ru/firefox/addon/1320) - слежение за почтой gmail.

[PandoraBox]

Онлайновые сервисы и инструменты
Конечно, полное представление об отображении сайта в различных браузерах можно получить, только установив их на свой компьютер, но если нужно просто проверить все ли в порядке, то онлайновые сервисы могут быть весьма полезны. Ассортимент сервисов достаточно широк, но многие из них платные.

Browsershots (http://browsershots.org/)
Позволяет тестировать сайты не только в Firefox, Opera, IE и Safari, но и в экзотических браузерах (Dillo, Epiphany, Flock, Galeon, Konqueror, Seamonkey), возможна настройка разрешения и глубины цвета, а также поддержки JavaScript и Flash.

http://designformasters.info/stuff/browser-compatibility-testing/browsershots.png (http://browsershots.org/)

Все отправленные URL добавляются в очередь, время ожидания их обработки зависит от загруженности сервера. Вы можете создать закладку, чтобы вернуться за результатами своего запроса или получить уведомление по E-Mail или RSS. Можно загрузить все свои скриншоты в виде zip архива.

Litmus (http://litmusapp.com/)
Не просто предоставляет вам скриншоты, но и содержит систему управления тестированием. Скриншоты создаются в почти в 30 различных браузерах в течении секунд, причем можно видеть всю страницу а не только ее верхнюю часть как в других сервисах. Сервис содержит систему контроля версий и отслеживания багов.

http://designformasters.info/stuff/browser-compatibility-testing/litmus.png (http://litmusapp.com/)

Сейчас сервис создает скриншоты в 17 браузерах для Windows и 6 браузерах для Mac OS X, а вскоре будут добавлены еще некоторые браузеры. И хотя сервис не столь всеобъемлющий как другие, цена достаточно высока и составляет 39$ в месяц за индивидуальную лицензию. Есть интересная возможность создания скриншотов рассылок в почтовых клиентах Outlook 2007, Outlook 2003, Outlook 2002, Outlook 2000, Gmail, Hotmail и AOL Mail.

Browsercam (http://www.browsercam.com/)
Предводитель в семействе тестовых сервисов, кроме скриншотов возможно удаленное управление браузером. Количество доступных браузеров постоянно растет, на данный момент это более 70 браузеров под Linux, Win и Mac, а также эмуляторы мобильных устройств BlackBerry и Win Mobile. Есть настройка разрешений и доступа к защищенным сайтам, возможна загрузка скриншотов в zip архиве.

http://designformasters.info/stuff/browser-compatibility-testing/browsercam.png

По большому счету этот сервис предоставляет все, что вам может понадобиться. Возможны тарифные планы от $20 до $1000 в месяц.

http://designformasters.info/stuff/browser-compatibility-testing/br1.png (http://www.browsercam.com/)

Широкий выбор……

http://designformasters.info/stuff/browser-compatibility-testing/br2.png (http://www.browsercam.com/)

…и гибкая настройка!

Статьи
Как протестировать сайт в различных браузерах на одном компьютере (http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml)
Количество браузеров в которых нужно тестировать сайты давно перешло все границы, это Internet Explorer (IE) 7, 6, 5.5 и 5.0, Firefox 2.0 и 1.5, Opera 9 и 8, несколько версий Safari, и еще множество не столь распространенных. При этом, они работают на различных платформах: Windows, Mac, Linux. Есть еще и проблема невозможности совместной установки различных версий для некоторых браузеров (наиболее заметный пример Internet Explorer для Windows. Автор этой статьи предлагает несколько способов преодоления проблем с установкой нескольких версий различных браузеров на одном компьютере.

На что способен ваш браузер?

Новые версии браузеров дают новые возможности веб-разработчикам, к примеру, Safari поддерживает некоторые правила CSS3. Вот небольшой список тестов, позволяющих узнать, какие технологии поддерживает ваш браузер, и как обстоят дела с их поддержкой в других браузерах, чтобы определить, что можно использовать в своих проектах, а что не стоит.

Acid 2 Test (http://www.webstandards.org/action/acid2/guide/)
Современные браузеры должны отображать это сложно изображение созданное с помощью CSS. У большинства браузеров с этим пока проблемы.
http://designformasters.info/stuff/browser-compatibility-testing/acids2-reference.png

Селекторы CSS 3 (http://www.css3.info/selectors-test/)
Поддерживает ли ваш браузер селекторы CSS3?

Набор страниц для тестирования поддержики CSS2 браузером (http://meyerweb.com/eric/css/tests/css2/index.html)
автор Эрик Майер

Acidic Float Tests (http://www.satzansatz.de/cssd/acidicfloat.html)
Тесты показывающие поведение плавающего блока, выходящего за границы родительского.

Набор CSS тестов (http://www.richinstyle.com/test/)
Набор страниц тестирующих все возможности CSS 2.

CSS Тесты и эксперименты (http://www.brunildo.org/test/)
Множество примеров иллюстрирующих возможности браузеров.

Cascading Style Sheets Test Suites (http://www.w3.org/Style/CSS/Test/)
Набор для тестирования поддержки CSS от W3C

PNG Test (http://www.libpng.org/pub/png/pngsuite.html)
Набор PNG иконок для тестирования PNG декодеров, программ для просмотра PNG и браузеров. Множество различных вариантов иконок с глубиной цвета от 1 до 64 бит, в оттенках серого, с палитрой и в truecolor, interlaced и нет, с простой прозрачностью и с альфа-каналом, с фоном, гамма коррекцией, комментариями и др. есть даже некорректные и поврежденные в результате ошибки при передаче.
http://designformasters.info/stuff/browser-compatibility-testing/png.png