Что у нас есть?



Как в браузере сделать скриншот всей страницы.

Блог Terminus'а

Web Developer. Часть 1

Рубрики: Программирование,
Михаил Бесчетнов @ 10 июля 2009, в 12:52

Устал удивляться, как много людей, занимающихся сайтостроительством, не знают о существовании такого замечательного плагина для Firefox, как Web Developer. Между тем, он может оказаться крайне полезен не только каждому верстальщику, но и программисту.

Пришло время расписать по пунктам все возможности данного плагина, с картинками для наглядности :)

Итак, перво-наперво качаем сабж по ссылке выше. Даже нет, можно закачать сразу локализованную русскую версию в соседнем разделе. Описывать буду именно эту, русскую версию v1.1.6. С выходом новой не забуду отписаться и обновить описание :)

Итак, ставим, качаем. Видим сверху, на панели инструментов, новую панельку. Пройдемся по пунктам.

Отключить кеш. Отключает кеширование браузером страниц, картинок, скриптов и всего прочего. Бывает удобно, когда лень после обновления какого-нибудь скрипта жать Ctrl+F5.

Отключить Java и Отключить JavaScript. Отключает, соответственно, Java приложения и JavaScript скрипты. Понятно, нужно для проверки работоспособности сайтов при отключенных скриптах (или криво реализованых, как в мобилах).

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

Отключить цвета страницы. Насколько я успел заметить - отменяет на странице действие CSS-свойств color и background-color. Впрочем, кажется, еще и фоновые картинки прячет.

Отключить блокировщик Popup. Небольшая загадка. У меня эта опция не включена (т.е. попапы должны, типа, блокироваться), однако всплывающие окна появляются только так.

Отключить прокси. Отключает настроенный прокси-сервер в браузере. Удобно, чтобы не лезть, если потребуется, в меню сетевых настроек.

Отключить Referrers. Сервер, на котором работает тестируемый сайт, не будет знать, откуда вы пришли (имеется в виду реферер, конечно). Удобно для тестирования систем защиты, хотя реферер сейчас подделывают все кому не лень.

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

Удалить Cookies сессии/для домена/для пути. Три пункта с разными вариантами удаления кук.

Информация о Cookies. Открывает отдельную вкладку, на которой пишет все куки, которые используются на открытой странице текущего сайта. Выглядит примерно так:

Демонстрация функции "Информация о Cookies"

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

Не помню уже, как называется это меню в английской версии, но у меня это «Ошибок CSS нет» светится всегда. И вряд ли потому, что на ни на одном сайте нет ошибок :)

Отключить стили. Никогда не пользовался, но тем не менее. Позволяет отключать все стили CSS; отдельные прилинкованные CSS файлы, встроенные стили на странице; отдельно содержимое атрибута style у элементов и стили печати.

Отображать с помощью стиля. В подменю есть выбор - «Принтер» и «Наладонник». С первым понятно - сайт будет показан с применением стилей, помеченых как media="print". С наладонником я пас - не сталкивался :)

Информация о CSS. Показывает все привязанные к текущей странице CSS файлы. Скриншот:

Демонстрация функции "Информация о CSS"

Посмотреть стиль элемента. Мега-фича. Показывает все стили, которые элементу присвоены как явно, так и наследованием. Есть ощущение, что иногда подглючивает и что-то скрывает. Но в целом - чрезвычайно полезно. На скриншоте видно, что при наведении на элементы страницы наверху также показывается DOM указанной части страницы.

Демонстрация функции "Посмотреть стиль элемента"

Добавить стиль CSS... Добавляет и применяет к текущей странице выбранный CSS файл. Удобно, вероятно, для тестирования скинов. Впрочем, я, как программист, привык просто подставить другой стиль в шаблоне.

Редактор CSS. Тоже удобный для отладки инструмент. Открывает табулированную панель со списком подключенных стилей, которые прямо в этой панели можно редактировать и смотреть результат. Получается своеобразный CSS редактор. Я, к примеру, поменял цвет фона на сайте Интерфакса.

Демонстрация функции "Редактор CSS"

Использовать блочную модель с границами. Вообще не понял, что это :(. Что-то дернулось, что-то чуть сдвинулось. Пункт-загадка :)

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


10 комментариев к заметке

  1. Андрей пишет:

    Спасибо за статью :)

    Пользуюсь плагином давно, но только некоторыми функциями. А тут всё так расписано, что грех не опробывать всё. Жду следующей части.

  2. Terminus пишет:

    Постараюсь не затянуть :)
    Несмотря на то, что юзаю WebDeveloper уже давно, с многими фичами знакомлюсь одновременно с написанием :)

  3. Гоча пишет:

    Я как выжу Терминус ты забыл игро-взлом и перешол на веб-мастерство, что весьма жал … можно сказать екстрактор.ру легендарный сайт в рунете и первычный в относительно с разборамы ресурсов игр, так что желаю обновленый

  4. Михаил Бесчетнов пишет:

    Что делать :)
    Web-девелопмент приносит существенно больше денег, а сайт будет жить в своей форумной части :)

  5. Рамзан пишет:

    СПС за статью,по поводу «Использовать блочную модель с границами. Вообще не понял, что это»
    Один из моих методов сбора инфы это инет к примеру:
    http://usabili.ru/news/2009/07/01/box_model.html
    Еще раз СПС автору узнал много полезного.

  6. Михаил Бесчетнов пишет:

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

  7. Svetlana пишет:

    Для разрабатываемого сайта .. применила функцию «Удалить Cookies для пути» … и у меня перестал отображаться контент… только формально шаблон.. Причем не на одном компьютере — а везде… что можно сделать, чтобы вернуть все обратно!!??? кто может объяснить, что произошло?…..

  8. Svetlana пишет:

    сам сайт: http://www.ratin.ru — там поле шапки был контент, от которого сейчас «ничего не осталось»…

  9. Михаил Бесчетнов пишет:

    Определенно, ваша проблема не является результатом работы WebDeveloper’а, т.к. удаление кук — операция, работающая только с браузером.

  10. Михаил Бесчетнов пишет:

    Да и вообще WebDeveloper никаким образом не может влиять на, собственно, сам сайт.

Добавить комментарий

В Блоге работает система премодерирования. Спам, реклама, попытки хамить будут беспощадно удаляться. Да, и не работают HTML теги :)

Ну а свежим мыслям я всегда рад, так что не стесняйтесь :)


 
 
©2000—2010 Михаил Бесчетнов aka Terminus
«EXTRACTOR.ru» — игровые ресурсы: распаковка музыки и графики, конверторы форматов и многое другое…
Ссылка на «EXTRACTOR.ru» при перепечатывании оригинальных материалов крайне желательна

Rambler's Top100