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

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

Web Developer

Firebug

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

 

Как пользоваться 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”.
firebug
Появится окно, в котором код данного элемента будет обозначен синим. Вы можете удалить его, внести изменения и просмотреть, как будут проявляться изменения кода в действии. Справа вы видите код css, который вы также можете изменять.
Web Developer

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

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *