Web Developer. Часть 2

Продолжаем описание культового плагина для Firefox. На этот раз - меню «Формы» и «Графика».

Показать параметры форм. Подсвечивает все формы и их поля (в том числе и скрытые). Прямо в всплывающих подсказках можно содержимое этих полей менять. Выглядит, на примере гугла, так:

Показать пароли. Открывает пароли в полях со звездочками (type="password").

Информация о формах. Открывает отдельную закладку, на которой подробно расписывает свойства всех форм и полей на странице. Пример того же гугла:

Изменить Method форм. В подпунктах можно одним кликом изменить метод отправки всех форм на текущей странице с GET на POST и наоборот.

Заменить элементы Select на текстовые поля. И правда. Вместо селектов появляются текстовые поля, в которые можно явно вбить value. Ни разу не пользовался :)

Включить автозаполнение и включить поля форм. Два пункта, эффекта от действия которых я не заметил вообще.

Сбросить радиокнопки. Снимает выделение со всех радиокнопок (type="radio") на странице.

Сделать поля форм изменяемыми. Отменяет действие атрибута readonly (но не disabled) для всех полей на стрнице.

Заполнить поля форм. Странный пункт. Всем текстовым полям прописывает в качестве значения поле name. По какой-то логике переключает и радиобатоны. Удобно разве что, чтобы быстро посмотреть значение name у всех текстовых полей.

Удалить ограничение длины полей ввода. Пункт говорит сам за себя :). Вводим сколько ходим.

Перед тем, как перейти к следующему меню, хотел бы обратить внимание программистов на то, что благодаря WebDeveloper'у (и его аналогам) уже не только программисты, но и любой желающий может делать с формами все, что захочет. Поэтому, делая разнообразные проверки ввода на JavaScript нужно не забывать повторять (и усложнять) валидацию и на стороне сервера.

Отключить изображения. Три варианта отключения изображений на странице. Можно отключить полностью все, только внешние (подтянутые с других сайтов), или отключить только анимацию. Последнее, впрочем, далеко не везде будет заметно, т.к. все равно на смену анимированным GIF уже пришли флешки :)

Показать атрибуты Alt. Удобно сеошникам для, к примеру, быстрой проверки, не забыли ли где проставить подписи к картинкам. Для картинок со ссылками, правда, нужно проверять еще и title, а за этим нужно будет лезть уже в меню Инфо, о котором расскажу в другой раз.

Показать размеры изображений, показать вес изображений и показать пути изображений. Три пункта, которые нет смысла описывать отдельно из-за говорящих названий :). Результат включения всех трех выглядит примерно так:

Наблюдательный заметит, что когда включается сразу много разных информеров, верстка разъезжается, восприятие притупляется, т.к. все блочки одинаково желтые. Поэтому включать сразу все не рекомендуется :)

Найти поврежденные изображения. А вот это удобная фича. Обычно я юзаю FireBug для отлова битых (не найденых) картинок. А тут попроще - при выборе пункта открывается окно со списком всех картинок, которые не удалось загрузить. Осталось невыясненым, ориентируется ли Web Developer только под коду ответа сервера («если не 200, то плохо»), или умеет определять тип загруженых изображения по мета данным. Последнее было бы удобно, если, к примеру, вместо картинки выдается скрипт или страница сайта с включенным RewriteEngine, т.е. код ответа будет 200, но картинку, по большому счету, нужно все равно считать битой.

Не уверен, но, возможно, обрабатывает и изображения, подтягиваемые через CSS.

Контур изображений. Еще одно открытие дня. Подсвечивает синим (фоновые) или красным (обычные) изображения на странице, по одному или нескольким признакам. Например, без атрибута alt, без title, с пустым alt (в смысле, атрибут существует, но пустой), увеличенные изображения (если атрибуты, указанные в width и height изображения больше фактического размера), изображения без указанных размеров (и, наоборот, с указанными). Очень полезный инструмент для отлова программистских багов, если имеете дело с нагруженными графикой проектами :)

Всему перечисленному обилию препятствуют уже выработанные привычки руками залезать в код страницы и смотреть что не так. Увы :(

Информация об изображениях. Открывается отдельное окно со списком всех изображений и их атрибутов. Скучно, комментировать нечего :)

Скрыть фоновые изображения и Скрыть изображения. Почему-то пункты оказались разнесены в меню, поэтому чуть нарушаю порядок описания. Все просто. Нажали - нет изображений, нажали второй раз - чудо, все вернулось. Иногда интересно узнать, как сверстан какой-то фрагмент - картинкой или нет. Вот для проверки фона удобно :)

Удалить изображения. Звучит стремно. Так и не понял - то ли просто объединяет действие двух предыдущих пунктов, то ли и вправду удаляет картинки из кеша Firefox. Последнее было бы полезно.

Показать полноразмерные изображения. Убейте меня - не понял, что это :). Может быть кто-то сообразит, отпишется в комментах...

P.S.: Андрей в коментах подсказал, что этот пункт позволяет показать «уменьшеные» атрибутами width и height изображения. Ну, когда полноэкранные фотки уменьшают до миниатюр...

Показать вместо изображений атрибут Alt. Все понятно :). На мой взгляд, удобнее просто подсвечивать Alt, ничего не скрывая.

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

Вторая часть на этом заканчивается, в следующий раз - пункт «Инфо» и может быть «Разное», если успею.