Наверное каждый верстальщик будь то новичок, или опытный профи, в процессе работы над версткой, хоть раз да сталкивался с разными проблемами, которые методом "научного тыка" определить проблемный элемент бывает долго и довольно сложно.
К счастью, есть инструменты, которые намного облегчают поиск проблемных мест, так называемые плагины для браузеров. И так как при верстке основной мой браузер это - Mozilla Firefox, по этому поделюсь с Вами теми плагинами которыми пользуюсь сам. Созданные специально для веб-разработчиков, верстальщиков, веб-дизайнеров и т.д.
-
FireBug - Этот плагин – просто must have для веб-разработчика. Плагин позволяет "на лету” вносить изменения в HTML и CSS и сразу видеть результат проделанной работы, отлаживать скрипты, смотреть заголовки и ответы сервера, смотреть запрашиваемые элементы, их размер и время загрузки.
Если кратко о главном то: С помощью FireBug Вы сможете редактировать, отлаживать и мониторить CSS, HTML и JavaScript в реальном времени на любой веб-странице.
Очень удобна кнопка в контекстном меню "Анализировать".
Плагин из разряда must have, весьма полезный плагин для веб-дизайнеров и разработчиков.
-
Web Developer Toolbar - Расширение добавляет удобное меню с полезными для веб-мастера инструментами. некоторые из них: управление cookies, личными данными, формами, изображениями, отображение различной информации об элементах на странице, быстрая отправка HTML и CSS в валидатор и отладка JS. Отдельного внимания заслуживают инструменты выверения пикселей и дизайна таблиц. Второй must have для веб-разработчика.
-
Html Validator - Самый популярный плагин для Firefox в среде веб-программистов, позволяет проверить html код на всевозможные ошибки, а также даст дополнительные рекомендации, где отсутствует закрытие тега, где забыли прописать для картинки тег ALT ну и т.п.
Плагин подробно показывает ошибки и точное место, а также объяснит, как эту ошибку исправить. Работает в фоновом режиме и встроен в страницу просмотра исходного кода. Очень экономит время.
-
Pixel Perfect - Этот плагин является дополнением к FireBug. Оригинальное расширение для дизайнеров, позволяет накладывать изображение на страницу любого сайта. Картинки полупрозрачные, легко перетаскиваются мышкой.
Не заменимая вещь, если Вам надо сверстать страницу согласно рисунку, как говорится: "Пиксель в пиксель"
-
MeasureIt
- Плагин позволяет вам измерить любой элемент Интернет страницы. С помощью этого плагина вы можете измерить логотип страницы, баннер, формы, иконку и многое другое. Просто растягиваете над нужным вам элементом сетку и смотрите длину и ширины элемента в пикселях. Плагин прост и удобен и будет полезен любому вебмастеру.
-
ColorZilla - с помощью этого плагина Вы можете получить цвет, кликнув в любом месте сайта и после перенести этот цвет в любую другую программу (имеется 5 вариантов описания цвета). Вы можете изменять масштаб изображения страницы, которую Вы просматриваете (от 20% до 1000%).
Встроенный просмотрщик палитры позволяет выбирать цвета из предопределенных цветных наборов (палитр), с возможностью сохранения, наиболее используемых цветов, в палитре Избранное.
грубо говоря - это пипетка в Photoshop'е.
-
Video DownloadHelper - позволяет быстро и просто скачать любое видео и музыку с youtube, googlevideo, Вконтакте и любых других сайтов, где используются видео-аудио-проигрыватели на флеше или схожих технологиях.
При посещение станицы, на которой есть ссылки на видео, Download Helper помещает прямые ссылки на скачивание в кнопку-меню рядом с полем ввода адреса. Выбрав такую ссылку из списка, вы скачаете файл. Поддерживается не только формат-контейнер FLV, но и другие популярные форматы файлов вроде AVI, MPEG, MP3 и так далее.