Руководство по firebug для веб-мастеров

Как запустить Firebug

Если щелкнуть правой кнопкой мышки по интересующему месту веб-страницы и выбрать из контекстного меню «Инспектировать элемент с помощью Firebug», то перед вами откроется участок кода страницы, который отвечает за формирование того элемента, который Вы выбрали.

Код интересующего нас элемента будет виден в открывшемся внизу страницы окне, при этом участок кода, который отвечает за выбранный элемент веб-страницы, будет подсвечен синим цветом.Запустить Firebug можно также с помощью комбинации клавиш «Ctrl» + «F12» либо  щелкнув по жучку в правом верхнем углу экрана.  А если нажать клавишу «F12», то Firebug откроется в новом окне браузера.

Редактирование HTML- кода в FireBug

В левой половине окна плагина FireBug отображаются HTML — теги открытой в браузере  веб-страницы. Здесь можно просматривать вложенность друг в друга тех или иных контейнеров, для открытия содержимого контейнера нужно нажать на плюсик рядом с ним, а также можно свернуть его, щёлкнув ещё раз. Для удобства перемещения по элементам можно использовать стрелки навигации на клавиатуре (смещает синее выделение элемента).

Если Вы подведете мышку к div- контейнеру в левой части окна Firebug, то сможете видеть, какие элементы открытой веб-страницы входят в этот div-контейнер.

Если кликнуть правой клавишей мыши по элементу в панели HTML, то в выпадающем окне вы можете выбрать то действие, которое хотите с ним произвести: удалить элемент, добавить новый атрибут, редактировать HTML и др. Внесенные изменения в выделенный фрагмент HTML-кода, тут же отобразятся на веб-странице.

Для того, чтобы быстро найти нужный элемент в коде страницы необходимо активировать соответствующий режим, нажав на кнопку панели  «Исследовать элемент». После активизации кнопки, любой элемент веб-страницы на который Вы наводите курсор, автоматически ищется в HTML-коде. Ведите мышью над участками веб-страницы, а в левой части окна плагина просматривайте выделенные синим фоном фрагменты HTML- кода, которые отвечают за формирование данных элементов страницы. Фрагмент страницы, над которым находится курсор мыши, будет заключен в рамочку синего цвета.

Хочу обратить Ваше внимание на то, что когда Вы кликаете мышкой по элементу в панели HTML-кода, то во второй строке сверху панели плагина отображается порядок вложения элементов HTML. По этой строке можно прослеживать наследование CSS-свойств

Firebug позволяет смоделировать желаемый дизайн веб-страницы с учетом внесения тех или иных изменений в Html-код, но как только вы обновите страницу — все внесенные плагином изменения исчезнут.

Но если вы решили окончательно внести изменения в Html- код, то окажется, что  отыскивать тот файл, который генерирует данный участок Html- кода не так-то просто.

Внимание! Firebug выводит в панель HTML не только тот код, который хранится у Вас на сайте в HTML — файлах, но также и сгенерированный php-код. Дело в том, что в отличие от обычного исходного HTML- кода, плагин Firebug учитывает все изменения в коде после его преобразования через JavaScript

Вероятнее всего, искомый Вами файл будет иметь расширение «php», и этот участок в нем может выглядеть совсем не так, как в исходном коде веб-страницы. Как же найти в каком файле формируется нужный нам фрагмент веб-страницы? Внимательно изучив нужный участок веб-страницы с помощью плагина Firebug, подищите какой-нибудь  ID или CSS-класс, которые прописаны в контейнере с требуемым элементом веб-страницы. А далее с помощью программы Total commander осуществите поиск тех файлов, в которых присутствует данный класс или ID. Возможно Вам сразу не удастся найти нужный участок HTML- кода, тогда повторите поиск взяв за основу какой-нибудь другой маячок для поиска

Дело в том, что в отличие от обычного исходного HTML- кода, плагин Firebug учитывает все изменения в коде после его преобразования через JavaScript. Вероятнее всего, искомый Вами файл будет иметь расширение «php», и этот участок в нем может выглядеть совсем не так, как в исходном коде веб-страницы. Как же найти в каком файле формируется нужный нам фрагмент веб-страницы? Внимательно изучив нужный участок веб-страницы с помощью плагина Firebug, подищите какой-нибудь  ID или CSS-класс, которые прописаны в контейнере с требуемым элементом веб-страницы. А далее с помощью программы Total commander осуществите поиск тех файлов, в которых присутствует данный класс или ID. Возможно Вам сразу не удастся найти нужный участок HTML- кода, тогда повторите поиск взяв за основу какой-нибудь другой маячок для поиска.

Network Monitor

To monitor network requests Firebug provides a Net panel. The Firefox DevTools allow to inspect the network traffic using the Network Monitor. Both tools provide similar information including a timeline showing the request and response times of the network requests.

Inspect request information

Both Firebug and the Firefox DevTools’ Network Monitor allow you to inspect the information about a request by clicking on it. The only difference is that Firebug shows the information below the request while the Network Monitor displays it within a side panel.

In both tools there are different tabs containing different kinds of information for the selected request. They contain a Headers, Params, Response and Cookies panel. A preview of the response is shown within specifically named panels like HTML. The Network Monitor has a Preview panel for this purpose. It doesn’t provide information about the cached data yet (see bug 859051), but provides a Security tab in addition to Firebug’s information and a Timings tab showing detailed information about the network timings.

View request timings

Firebug offers detailed information about the network timings related to a request by hovering the Timeline column within its Net panel. The Network Monitor shows this information within a when you select a request.

View remote address

The remote address of a request is shown within the Remote IP column within Firebug. In the Network Monitor the address is shown at Remote Address in the Headers tab when a request is selected.

Search within requests

The search field within Firebug allows to search within the requests. The search field in the Firefox DevTools filters the requests by the entered string.

Firebug allowed to search within the response body of the network requests by checking Response Bodies within its search field options. This feature is not available yet within the Network Monitor, but it’s requested in bug 1334408. While response bodies can’t be searched yet, the Network Monitor allows to .

Как установить FireBug в FireFox

Браузер FireFox хорош тем, что его функционал легко можно расширить с помощью бесплатных дополнений, коих очень и очень много. Одним из таких дополнений является FireBug.

Устанавливается FireBug очень просто и быстро. Откройте браузер FireFox и зайдите на

На момент написания этих строк дополнением FireBug уже пользуются более 3 миллионов человек. Давайте присоединимся к ним. Нажимаем на кнопку «Добавить в FireFox».

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

Функции

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

  • полную русскую локализацию;
  • возможность сохранить видео в любом качестве;
  • возможность прослушать аудио или просмотреть видео перед тем, как его скачивать;
  • работа практически со всеми ресурсами;
  • стильный интерфейс;
  • подкачивание вместе с файлом метаданных (то есть обложка, название группы и так далее);
  • правильное название файла.

Помимо скачивания аудио- и видеофайлов, Skyload позволяет:

  • Посмотреть битрейт файла, его итоговый размер после скачивания (при выбранном пользователем качестве).
  • Управлять и другими загрузками, так как расширение представляет собой настоящий менеджер для скачиваемых файлов.
  • Выключить расширение на определённых сайтах при сохранении возможности просматривать менеджер загрузок.
  • Не конфликтует с другими подобными дополнениями, может работать совместно с ними.

Кроме того расширение всего в пару кликов позволяет скачать целый альбом с Яндекс.Музыки благодаря наличию функции «Мультизагрузка».

При помощи менеджера файлов все загрузки можно оформить в отдельную папку, подписав её, например, именем исполнителя.

Как установить Фаербаг для Мазилы и других браузеров?

Для начала нужно установить дополнение Фаербаг в ваш браузер.

Можно скачать Firebug с официального сайта Мозиллы и установить его. Но проще будет перейти в раздел «Дополнения» браузера и ввести в строку поиска «Firebug», затем нажать «Установить».

В сегодняшней статье я расскажу именно о плагине Фаербаг для Мазилы, потому как это его базовая версия. Для остальных браузеров созданы версии FireBug Lite. Их функционал несколько сокращен.

Можно скачать Фаербаг для Хрома и Opera на официальных сайтах этих браузеров.

Работать с ним можно, кликнув по странице правой клавишей и выбрать «Просмотр кода элемента», либо нажав F12. Сама я часто пользуюсь этим расширением для Гугл Хром. Однако, по моему мнению, для новичков Фаербаг более понятен и удобен. Кроме того, он переведен на русский язык в отличии от инструмента для просмотра кода в Хроме.

Топ 9 лучших дополнений для Яндекс браузера

Рассмотрим рейтинг самых полезных расширений для Яндекс браузера:

  1. LastPass – это очень полезное дополнение для Яндекс браузера, так как помогает защититься в сети от взломов. Все пароли и логины записываются в хранилище расширения, оно полностью безопасно (имеет надёжную систему шифрования, требует пароль для просмотра, администрация проекта не имеет доступа к данным). Расширение самостоятельно вводит пароль на всех сайтах. Теперь достаточно знать всего один пароль от LastPass, все остальные данные для доступа будут помещены на сервисе и доступны с любого устройства после ввода ключа.
  2. AdGuard. Работает по принципу AdBlock, но на практике показывает лучшие результаты. Позволяет заблокировать практически все видео-рекламы, баннеры, анимации и текстовую рекламу. Гибкие настройки популярного расширения для Яндекс браузера позволяют оставлять только полезную рекламу или устанавливать собственные правила фильтрации. С помощью установки регулярных выражений плагин сможет заблокировать любой элемент страницы, даже если он не является рекламой.
  3. friGate CDN – это топовое расширение для Яндекс браузера для обхода блокировки сайтов. Представляет собой дополнение для Proxy доступа к ресурсам. Достоинствами аддона является простой графический интерфейс, неограниченный лимит трафика, высокая скорость подключения и возможность настройки доступа к каждому отдельному взятому сайту. Работает со всеми прокси-серверами, не исключение и защищённые сети.
  4. SaveFrom. Если задаться вопросом, какие плагины больше всего нужны для Яндекс браузера, на ум в одну из первых очередей приходит SaveFrom, так как он позволяет скачивать видео со всех популярных видеохостингов. Поддерживает работу через дополнение, сайт и короткие URL-адреса.
  5. Checker Plus for Gmail. Принцип работы аддона максимально прост – он проверяет почту на Gmail и показывает сообщение при появлении новых уведомлений. Через Checker Plus сразу можно открыть письмо или поставить пометку возле него.
  6. Lightshot. Входил в список лучших расширений для Яндекс браузера 2017 года и занимает позицию в десятке ведущих плагинов 2018 года. Позволяет делать снимки всего или части экрана. После клика на расширение затемнится экран, и появится возможность выделить желаемый фрагмент страницы. Обладает простым встроенным редакторов: цифры, стрелки, линии, установка текста и т. п. Изображения можно сохранять на ПК, копировать в буфер обмена или загружать на облачное хранилище.
  7. Magic Actions for YouTube. Лидирующий плагин в сфере взаимодействия с Ютуб, открывает обширные настройки видеохостинга. Здесь настраивается предпочитаемое качество видео, тема, регулировка звука (выполняется скролом колёсика), «Cinema Mode» (убирает посторонние элементы и увеличивает плеер), режим день/ночь и многое другое. Является самым интересным расширением для Яндекс браузера в работе с YouTube, но не имеет функции загрузки видео.
  8. Firebug Lite. Плагин предназначается для разработки веб-ресурсов и тестирования кода. С помощью расширения проще редактировать JS, CSS и HTML-код прямо в браузере. Основная версия поставляется на Mozilla Firefox, а для Yandex browser имеет несколько урезанный функционал.
  9. Imagus. Позволяет экономить время при просмотре видео, а также делает сёрфинг удобнее благодаря приближению картинок. После наведения курсора на ссылку расширение показывает видео в миниатюре без необходимости открывать страницу.

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

Style Editor

The Style Editor in the Firefox DevTools allows you to examine and edit the different CSS style sheets of a page like Firebug’s CSS panel does it. In addition to that it allows to create new style sheets and to import existing style sheets and apply them to the page. It also allows you to toggle individual style sheets.

Switch between sources

The CSS panel of Firebug allows to switch between different CSS sources using the CSS Location Menu. The Style Editor has a for this purpose.

Edit a style sheet

Firebug’s CSS panel offers three different ways for editing style sheets. The default one is to edit them inline like within the Style side panel. Furthermore it has a , which allow to edit the selected style sheet like within a text editor. The Style Editor of the DevTools only has one way to edit style sheets, which corresponds to Firebug’s Live Edit mode.

Try out CSS selectors

Firebug’s Selectors side panel provides a way to validate a CSS selector. It lists all elements matching the entered selector. The DevTools don’t have this feature yet, but it’s requested in bug 1323746.

Searching within the style sheets

Firebug allows to search within the style sheets via the search field. The Style Editor in the DevTools also provides a way to search within a style sheet, though there is currently no option to search within multiple sheets (see bug 889571) and also not via a regular expression (see bug 1362030.

Описание

Firebug – отладчик web-приложений, используется как отдельное расширение для браузера Mozilla Firefox, являющееся консолью, отладчиком, и DOM-инспектором JavaScript, DHTML, CSS, XMLHttpRequest.

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

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

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

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

Включить панель FireBug можно нажатием кнопки F12. По умолчанию она появляется в нижней части экрана. Положение панели можно изменить. Для этого зайдите в опции (иконка жука в левом углу панели) и выберете пункт Положение окна.

Основной закладкой является «HTML». Именно в ней предстоит нам работать большую часть времени. Окно разбито на две части:

  • Слева представлен исходный код страницы;
  • Справа — стили css.

Если навести курсор мышки на какой-нибудь html тэг в левом поле, то он будет выделен цветом на странице. При этом:

  • голубой цвет показывает ширину элемента;
  • темно синий — поля (padding);
  • светло желтый — отступы (margin).

Картинка ниже кликабельна.

При выборе тэга, нажатием левой клавиши мыши, в правом окне отобразятся его css стили. В самом верху будут указаны стили именно этого html тега, ниже пойдут унаследованные стили. Если какой-то атрибут зачеркнут, значит он не работает (переопределен). Кроме этого, указывается файл css и номер строки в нем, где тот или иной стиль определен.

Для удобства поиска предусмотрена опция анализа структуры страницы курсором мыши. Включается она кнопкой в левом верхнем углу, рядом с иконкой жука, выглядит как прямоугольник и курсор мыши. Фактически, мы идем от противного — если раньше выбирали html тег и видели его на странице, то теперь выбираем его курсором мыши прямо на странице и видим его характеристики в окне FireBug. Пользоваться этой опцией придется постоянно, ибо она значительно упрощает и ускоряет поиск того или иного элемента.

А теперь самая главная фишка FireBug, за которую его так любят: вы можете менять структуру страницу и ее стили на лету! Практически никаких ограничений — можете взять тэг и переименовать его, изменить содержание заголовка или абзаца, отредактировать, отключить или добавить атрибут стиля, а можете просто удалить пол страницы. Результат будет тут же отображаться на экране! Только помните: все изменения происходят в самом FireBug, так что после перезагрузки страницы, она вернется к первоначальному состоянию. Таким образом навредить никак нельзя.

FireBug — это большая песочница для экспериментов. Когда вы нашли правильный вариант, просто перенесите его в ручную в файлы html и css.

Что еще есть интересного:

  • На закладке «Консоль» можно посмотреть ошибки JavaScript, HTML и CSS — полезная информация для отладки.
  • На вкладке «Сеть» имеется информация по запросом: статус, размер, удаленный IP и время исполнения.
  • Вкладка «Page Speed» позволяет протестировать скорость загрузки страницы. Оценка ставится по 100 бальной шкале. Кроме этого, даются полезные совету, которые позволят улучшить данную характеристику.

Как найти необходимые файлы шаблона?

Один из методов поиска файлов шаблона с искомым кодом состоит в использовании Total Commander. В нем есть функция поиска файлов по содержимому («Команды» — «Поиск файлов» или Alt+F7). Скачайте архив с  файлами сайта на свой компьютер через FTP-соединение. В этом может помочь статья об архивации файлов на сервере.

Теперь в коде, который отвечает за элемент, измененный вами в FireBug, найдите по возможности редко встречающуюся часть. Это может быть участок кода, помещенный в теги div или id.

Например, мне нужно найти такой участок:

Он должен быть относительно уникален, иначе, может быть найдено слишком много файлов с одинаковыми частями кода.

Перехожу в скачанную папку с файлами WordPress и нажимаю поиск в Total Commander.

Нужно поставить галочку в графе «С текстом» и вписать туда искомое значение, по которому мы хотим определить нужный нам файл. Нажимаем поиск. Если файлов оказалось чересчур много, поищите другую часть кода в FireBug, которая будет более уникальной. Если же файлов несколько, открывайте их по одному и в редакторе (например, Notepad ++) и при помощи поиска ищите заданный текст (у меня «zar»). Проверьте, насколько весь блок соответствует тем значениям, которые вы видите с помощью дополнения FireBug. Если все сходится, вносите изменения в код файла и загружайте его на сервер.

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

P.S. А я по традиции после Хибин поехала на свою малую родину, в Североморск. Тут зима в самом разгаре, мороз, метель и сугробы. Бегаю на лыжах и наслаждаюсь зимой, которой так не хватало жителям СПб в этом году.

Редактирование стилей CSS

В левой панели расширения Firebug по умолчанию отображается HTML — код, а в правой CSS-стиль выбранного элемента. Эти CSS свойства определяют внешний вид выбранного HTML блока. В панели CSS отображаются селекторы, которые относятся к выбранному элементу, название CSS-файла и номер строки, в которой эти селекторы описаны

CSS-свойство одного и того же элемента может быть прописано несколько раз с разными значениями, тогда браузер учитывает только CSS-свойство с более высоким приоритетом – !important. . Если какая-то строка зачёркнута, значит у данного селектора специфичность ниже, чем у селектора с более высоким приоритетом. На рисунке видно, что у селектора .uk-article-title приоритет выше, чем у селекторов h1, .uk-h1 и h1, .uk-h1, поэтому свойства font-size:40px и color: #444444 не применяются.Любое CSS-свойство отключается и включается вновь простым щелчком по пустому полю перед свойством. Вы можете подвести курсор мыши к стилевому правилу, рядом с этим свойством появится красный перечеркнутый кружочек. Щелкнув по нему мышью можно отключить это CSS- свойство и посмотреть на веб-страницу без него. Отключенные свойства отображаются серым цветом, рядом с ними выводится серый перечеркнутый кружочек.

Все значения и названия свойств можно легко изменять. Для этого достаточно щёлкнуть по свойству, и оно станет редактируемым. Очень удобно и то, что в плагине Firebug, как и в Notepad++, есть автодополнения.

Перемещаться в панели  CSS по свойствам и их значениям, а также вставить пустую строку для добавления нового CSS-свойства можно с помощью клавиши Enter. Щелчком правой клавишей мышки в панели CSS открывается контекстное меню.

  • Через контекстное меню можно скопировать объявление свойства, имя свойства или значение свойства в буфер обмена, а затем вставить в CSS-файл Вашего сайта.
  • Редактировать стиль элемента — установить встроенный стиль для элемента (устанавливается через атрибут style).
  • Добавить правило – добавить правило к данному элементу.
  • Новое свойство — добавить новое свойство и его значение текущему правилу.
  • Редактировать, удалить или выключить – действия с текущим свойством.
  • Обновить – обновить экран панели.
  • Инспектировать во вкладке CSS — перейти во вкладку CSS для изучения объекта там.
  • Инспектировать во вкладке DOM — перейти во вкладку DOM для изучения объекта там.

Во вкладке CSS доступен предосмотр цвета и изображений при наведении на свойство курсора

Все действия со стилями сразу же отображаются на веб-странице. Если же страницу обновить, то все ваши действия в Firebug отменяются. Благодаря этому можно экспериментировать с разными стилями, не опасаясь за целостность исходного CSS –файла. Для внесения понравившихся изменений в Ваш сайт нужно открыть CSS –файл и найти подсказанную плагином строку. В случае с CSS-стилями все намного проще, чем с внесением изменений в HTML код страницы.

Переводчик

Часто в Сети попадаются страницы на языках, которые мы не знаем. У Google Chrome, например, есть встроенный переводчик. Но он переводит страницы целиком и не умеет обрабатывать отдельные слова и фразы. В Firefox, Opera и прочих браузерах такого инструмента нет, и ситуацию исправят специальные расширения.

Google Переводчик

Разработчик:

translate.google.com

Цена:
0

Google Translator for Firefox от nobzol

Разработчик:
Разработчик

Цена:
Бесплатно

Translator

Разработчик:

sailormax

Цена:
Бесплатно

Translator for Microsoft Edge

Разработчик:
Разработчик

Цена:
Бесплатно

9. Разблокировка сайтов

Если ваш любимый сайт случайно заблокировали, открыть его можно будет с помощью VPN-расширений. Например, Hotspot VPN.

Hotspot Shield Free VPN Proxy — Unlimited VPN

Разработчик:

www.hotspotshield.com

Цена:
0

ZenMate VPN

Разработчик:

zenguard

Цена:
Бесплатно

VPN-сервисов довольно много. Лучшие из них — в нашей статье.

10. Сохранение оперативной памяти

Если у вас открыта куча вкладок и браузер начал тормозить, воспользуйтесь One Tab. Это расширение закроет все вкладки, перенеся ссылки на них на отдельную страницу, и сбережёт оперативку.

OneTab

Разработчик:

one-tab.com

Цена:
0

OneTab от OneTab Team

Разработчик:
Разработчик

Цена:
Бесплатно

Ещё одно расширение, которое пригодится обладателям устройств с небольшим количеством оперативной памяти, — The Great Suspender. Оно автоматически выгружает из памяти вкладки, которые вы долго не просматривали, но не закрывает их.

The Great Suspender

Разработчик:

Сайт

Цена:
0

Tab Suspender от Michalewicz Piotr

Разработчик:
Разработчик

Цена:
Бесплатно

Tab Suspender (Tab Unloader)

Разработчик:

rneomy

Цена:
Бесплатно

Все браузеры без расширений довольно унылы. Так что сразу после завершения установки нового веб-обозревателя откройте в нём этот пост и поставьте все необходимые дополнения. Кстати, пользователи Opera и Vivaldi, не забывайте, что вы можете устанавливать расширения от Google Chrome. Vivaldi умеет делать это без дополнительных телодвижений, а в Opera сначала придётся установить Install Chrome Extensions.

Install Chrome Extensions

Разработчик:

Opera Software

Цена:
Бесплатно

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий