Расширения для разработчиков для разных браузеров

Часто, перед блогеров встает вопрос изменения шаблона сайта или блога. В сегодняшней статье будет информация, которая пригодиться для блогеров, независимо от того, на какой платформе находится блог – будь то Blogger, WordPress, Joomla, Ucoz и др. Если вы не на 100% разбираетесь в кодах, но вам нужно поменять ту или иную часть (футер, сайдбар или отдельный виджет, выпадающее меню, шрифт в статьях и многое другое.) сайта, то вам поможет моя инструкция. Также этим способом вы сможете воспользоваться, если обнаруживаются ошибки на сайте, например, сдвиг отдельных элементов дизайна.
Итак, для работы над шаблоном сайта нам понадобятся плагины (расширения для разработчиков) для браузеров, которые значительно упрощают задачу. Кроме того, каждый браузер снабжен своими встроенными инструментами, которые помогают инспектировать код сайта. Подробнее об это написано в статье, как посмотреть код страницы). Еще один лайфхак, который может понадобиться разработчику, это изменение мобильной версии Blogger.

Web Developer

• • для Mozilla Firefox. Ссылка для установки Ссылка для установки
  • для Google Chrome - Ссылка для установки
  • для Opera, Ссылка для установки
  • для IE разработана модификация плагина под названием  Developer Toolbar. Это нечто среднее меджу firebug и Web Developer. Ссылка

Firebug

• • • для Mozilla Firefox. Скачать плагин
    • для Google Chrome Скачать
    • для Opera, ссылка для скачивания

Читайте также про полезные плагины для браузеров:

• SEO плагины для браузеров
• плагин для скриншота в опере

 

Как пользоваться Web Developer

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

Основные опции web developer:

• Disable – выключает javascript,
• Cookies – работаем с куками, удаляем, добавляем.
• CSS – редактируем стили. Вы можете просмотреть сайт без стилей (disable all styles), быстро отредактировать стиль (edit css).
• Form – работа с формами,
• Image – изображения, их стили, показывает атрибуты alt,
• Information. Здесь вы можете включить границ div, показывает информацию по отдельному элементу, показывает сайт при различных разрешениях экрана и др.
• Miscellaneous – чистим кэш, определение цвета каждой точки экрана монитора, измеряем размеры отдельных элементов страницы, а также их абсолютную позицию, сайт – в один столбец (так в большинстве случаев выглядит веб-страница в мобильных браузерах.
• Outline – выделение элементов сайтов – таблиц, блоков, страниц и т.д.
• Resize – изменяем размеров экрана,
• Tools – быстрый доступ к валидаторам кодов.
• Options – настройки.

Как пользоваться Firebug

Этот замечательный плагин выполняет роль инспектора кодов. С его помощью вы можете быстро найти код интересующего элемента дизайна сайта. Вам стоит лишь выделить интересующий элемент на веб-странице, щелкнуть правой кнопкой мыши и выбрать пункт @Inspect with Firebug Lite”.

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

Таким образом, протестировав сначала изменения кода непосредственно в браузере, вы можете изменять шаблон своего сайта. Кстати, таким же образом, вы сможете узнать код любой флеш-игры или флеш-анимации. Еще один способ читайте в статье - Как вставить flash-ролик с любого сайта в блог