Firefox: Web Developer extension

Помнится, давным-давно я уже обещал рассказать на страницах блога про мои самые любимые расширения для браузера Firefox. И раз уж когда-нибудь да нужно начинать, то почему не сегодня?

Web Developer - это, пожалуй, самое любимое мною расширение для Firefox. За последний год я так привык к панели инструментов Web Developer, что уже попросту чувствую себя неуютно, если приходится (по работе) запускать Internet Explorer, и нет возможности столь же детально изучить открытую в браузере страницу.



Web Developer - это удобная панель инструментов, состоящая из различных меню, позволяющая вам в любой момент получить всю необходимую информацию о просматриваемой странице: якоря ссылок, размеры блоков элементов, названия идентификаторов классов, параметры ссылок, приведённых на странице, мета-теги, скрипты JavaScript и многое-многое другое. Помимо получения информации, есть целый набор активного веб-дизайна страницы - можно на лету изменять любые параметры таблицы стилей CSS, или с помощью различных опций выделять только определённые объекты на странице - например, ячейки таблиц или заголовки. Есть целый раздел утилит, позволяющих вам проверить синтаксическую правильность ваших стилей CSS, HTML кода, ссылок или новостных лент (RSS). Всё сразу перечислять просто нет смысла - просто загляните на
страницу расширения Web Developer и посмотрите сами, но некоторые особенно полюбившиеся мне возможности я здесь просто обязан упомянуть.

Вот те функции этого расширения, которыми я пользуюсь чаще всего (я указываю пункты главного меню расширения, которые вызывают ту или иную функцию):

1. Information -> Display Id & Class details
Показывает названия идентификаторов и классов всех элементов открытой страницы. Прямо на фоне оригинальной страницы появляются вставки с подписями названия классов - очень удобно!

2. Information -> Display Block Size
Просто незаменимая возможность при отладке новых элементов ваших страниц. Если вдруг один из элементов занимает слишком много места на странице - этот пункт меню вас обязательно спасёт!

3. Outline -> Outline Tables
Ещё одна возможность, которую сложно недооценить. Показывает вам границы всех видимых и невидимых таблиц на вашей странице, так что если где-то забыт один из тегов закрытия ячейки или строки таблицы, это будет очень легко исправить.

4. Resize
Целое меню, позволяющее узнать текущие размеры окна браузера и также дающее возможность установить размеры окна в наиболее стандартные значения привычных разрешений типа 1024x768, 800x600 и т.д. Можно эти размеры указывать самому, так что очень удобная возможность позволяет максимально упростить отладку вашего диазйна для любых разрешений

5. Images
Ещё одно полезное меню, из которого я пользуюсь почти всеми функциями. Очень легко и быстро можно просмотреть подписи к каждому изображению (тег alt), размеры изображений в пикселях или размеры файлов изображений.

6. CSS -> Edit CSS
На самом деле, всё меню CSS необычайно полезно. Но именно функция редактирования таблицы стилей на лету очаровала меня больше всего. О таком удобстве и мечтать раньше не приходилось! Не нужно править никаких исходников страниц, просто выбираешь этот пункт, и можно сразу же меня различные параметры оформления и видеть, какой эффект произведут ваши действия на страницу. Если вам нравятся результаты ваших изменений, то есть возможность сохранить отредактированные стили в новый файл CSS.

Ну, думаю я достаточно уже заинтриговал потенциальных пользователей этого расширения. Если вы ещё не знаете удобства панели Web Developer - обязательно поставьте его и попробуйте - уверен, что-нибудь из его возможностей вам обязательно понравится!