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
Целое меню, позволяющее узнать текущие размеры окна браузера и также дающее возможность установить размеры окна в наиболее стандартные значения привычных разрешений типа 1024×768, 800×600 и т.д. Можно эти размеры указывать самому, так что очень удобная возможность позволяет максимально упростить отладку вашего диазйна для любых разрешений

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

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