Firebug для firefox

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

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

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

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

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

Для чего нужен FireBug?

В первую очередь ФайерБаг – это инструмент для просмотра исходного кода страницы или ее элемента. Этот код будет отличаться от кода в ваших файлах php шаблона WordPress. Однако изучение исходного кода дает понимание того, какие его части отвечают за те или иные элементы страницы.

Кроме того, FireBug позволяет править код прямо в браузере и следить за изменениями элементов. Эти изменения увидите только вы, после обновления страницы все станет как прежде. Если вы решите оставить внесенные вами правки, потребуется искать файлы шаблона, которые отвечают за выбранную вами часть страницы. В идеале, вы должны хорошо знать свой шаблон и за что отвечают все его файлы. Для начала изучите статью про структуру шаблона WordPress. Но если вы все же не можете найти, куда вносить изменения, ниже я расскажу про один из способов поиска необходимых файлов.

Reference

Это дополнительная панель, которая генерируется аддоном CodeBurner для Firebug. С помощью этой панели Вы получаете быстрый доступ к HTML и CSS коду.

1. Секция поиска и фильтрации.
2. Здесь выводится результат поиска. В нашем примере — один.
3. Панель совместимости с последними версиями основных используемых браузеров. Chrome отсутствует в списке, но он использует тот же движок, что и Safari (Webkit), то есть совместимость с Safari означает совместимость с Chrome.
4. Если информации недостаточно, то с помощью данной ссылки Вы сможете найти дополнительные сведения: примеры, описания и так далее.

Why The Built-in Tools?

The Web owes a lot to Firebug. For a long time, Firebug was the best game in town. It introduced the world to visual highlighting of the DOM, inplace editing of styles, and the console API.

Before the release of Firefox 4 we decided that Firefox needed a set of high-quality built-in tools. Baking them into the browser let us take advantage of the existing Mozilla community and infrastructure, and building in mozilla-central makes a huge difference when working with Gecko and Spidermonkey developers. We had ambitious platform changes planned: The JSD API that Firebug uses to debug Javascript had aged badly, and we wanted to co-evolve the tools alongside a new Spidermonkey Debugger API.

We thought long and hard about including Firebug wholesale and considered several approaches to integrating it. An early prototype of the Inspector even included a significant portion of Firebug. Ultimately, integration proved to be too challenging and would have required rewrites that would have been equivalent to starting over.

Сеть

Хотите знать, сколько времени загружается Ваша страница? Или нужно определить какой скрипт выполняется дольше всего? Все это можно определить с помощью панели Сеть.

1. Запросы могут быть отфильтрованы в соответствии с их типом.
2. Каждый запрос отображается в данной секции. В конце списка запросов подводится итог: количество запросов, размер, сколько уже помещено в кэш и общее время выполнения.
3. Можно получить более детальное описание: заголовки HTTP, ответы и кэш.

Выполнение тестирования

Нужно протестировать производительность определенной функции или цикла? Используйте свойство Firebug “timer”.

Три шага. Вызываем “console.time”. Затем вставляем наш код. В завершении вызываем “console.timeEnd”.

Installing Firebug on IE, Safari, Chrome or Opera

Firebug Lite makes it possible to install Firebug into any web browser! You should be able to use Firebug with Internet Explorer, Opera, Safari, Chrome, and any other browser that supports JavaScript. Firebug Lite is written in JavaScript, so you can include it on a webpage with the following code:

<script type='text/javascript'

     src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Or even better you can use this bookmarklet:

Firebug Lite provides you with the same inspections capability that regular Firebug does. You can click the Inspect button and hover over sections of the page to view the computed style and DOM properties for the tag selected.

Advertisement

The Inspect button functionality does seem to have some issues, so another way to inspect elements is to navigate the HTML tree. To do that, click the + signs on the tree view to expand the HTML, and when you see the element you want to inspect, click on the line of code for it in the HTML. On the right side, you can view the computed style and the DOM (Document Object Model) properties for the element.

Firebug Lite also has the JavaScript console, which allows you to execute JavaScript. You can write one line at a time, or in the expanded view you can write many lines at once and then run the code.

Although you cannot edit the CSS for the highlighted element, Firebug Lite does provide a mechanism for editing CSS. It is somewhat of a “CSS console” for lack of a better term, where you can write your own CSS code and see what the results will look like.

Advertisement

Of course, with a name like Firebug Lite you can’t expect it to have all of the features of Firebug. Unfortunately, it does not include any JavaScript debugging (I can’t even imagine how difficult it would be to write a JavaScript debugger in Javascript). Unfortunately, you’re still stuck with whatever JavaScript debugging tools you can find for your browser. It does at least provide you with the convenience of being able to easily view the code for script files that were loaded in the page.

Firebug Lite also lacks the layout features in regular Firebug, where it shows you the coordinates for the element being inspected, as well as the padding, border size, and margins.

All in all it is better to have Firebug Lite for other browsers than no Firebug at all. If you are trying to debug layout and viewing issues in other browsers, it is definitely a nice tool to try out.

Advertisement

What’s Next for Firefox Developer Tools?

We have more exciting stuff coming down the pipe. Some of this will be new feature work, including great performance analysis and WebGL tools. Much of it will be responding to feedback, especially from developers giving the tools a first try.

We also want to find out what you can add to the tools. Recently the Ember.js Chrome Extension was ported to Firefox Developer Tools as a Sunday hack, but we know there are more ideas out there. Like most Firefox code you can usually find a way to do what you want, but we’re also working to define and publish a Developer Tools API. We want to help developers build high quality, performant developer tools extensions. We’d love to hear from developers writing extensions for Firebug or Chrome Devtools about how to best go about that.

Otherwise, keep following the Hacks blog to learn more about how the Firefox Developer Tools are evolving. Join in at the , the @FirefoxDevTools Twitter account, or #devtools on irc.mozilla.org.

Файрбаг

Речь идет о плагине Firebug, или как его еще называют по-русски «Файрбаг», «Фаербаг», что в переводе с английского означает «огненный жук».

Плагин Firebug – это встроенный в браузер программный продукт, который предназначен для просмотра и редактирования структуры страниц веб-сайта (html-кода, стилей CSS, скриптов и др.). Инструмент этот совершенно не интересен обычным пользователям всемирной паутины, но для тех, кто пробует себя в создании сайтов – вещь совершенно незаменимая.

Общепризнано, что самый удобный и как следствие, самый популярный Firebug — у браузера Mozilla Firefox. Вообще, строго говоря, само название Firebug — это бренд от Mozilla. Но так уж сложилось, что аналогичные продукты других производителей во всем мире тоже стали называть файрбагами.

Какие браузеры поддерживают Firebug

Кроме «Огненной лисы» Firebug есть и у браузера Google Chrome.

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

Есть Firebug и в браузере Opera, но им пользуются намного меньшее число людей.

Пользование плагином Firebug кажется сложным только на первый взгляд. После того, как вы более-менее разберетесь с этим инструментом, вопросов будет возникать все меньше.

Вызывается Firebug во всех браузерах стандартно – нажатием кнопки F12, либо правой кнопкой мыши, где из контекстного меню необходимо в зависимости от вашего браузера выбрать пункт «исследовать элемент» или «инспектировать элемент».

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

А теперь, собственно говоря, поговорим для чего все это нужно.

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

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

5 последних уроков рубрики «Разное»

• Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

• Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

  Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

• Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

• Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Как пользоваться 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 бальной шкале. Кроме этого, даются полезные совету, которые позволят улучшить данную характеристику.

6 ответы

Хром

This can be achieved by three different approaches (see my blog
article here for more details):

• Search in panel like below
• Execute and in
  panel, as shown in Lawrence’s answer
• Third party extensions (not really necessary in most of the
  cases, could be an overkill)

Вот как вы просматриваете XPath в панели
:

1. Press F12 to open Хром Developer Tool
2. In «Elements» panel, press Ctrl+F
3. In the search box, type in XPath or CSS
   Selector, if elements are found, they will be highlighted in
   yellow.

Fire Fox

1. Either select «Web Console» from the Web Developer submenu in
   the Fire Fox Menu (or Tools menu if you display the menu bar or are
   on Mac OS X)
   or press the Ctrl+Shift+K
   (Command+Option+K on OS X)
   keyboard shortcut.

2. In the command line at the bottom use the following:

   • : Returns the first element that matches.
     Equivalent to or calls the
     function in the page, if it exists.

   • : Returns an array of DOM nodes that match.
     This is like for , but
     returns an array instead of a .

   • : Evaluates an XPath expression and returns an
     array of matching nodes.

Fire Fox (prior version 49)

1. Install Firebug
2. Install Firepath
3. Press F12 to open Firebug
4. Switch to panel
5. In dropdown, select XPathor CSS
6. Type in to locate

276

Вы можете открыть консоль в Chrome и Firefox и проверить XPath,
введя . Это вернет массив
согласованных значений. Если он пуст, вы знаете, что на странице
нет совпадений.

Например:

Update (March 2016):
A new screenshot from Chromium v48:

*

32

By using chrome or Opera

без каких-либо плагинов, не записывая ни одного
синтаксического символа XPath

1. right click the required element, then «inspect»
2. right click on highlighted element tag, choose copy>Copy
   Xpath.

😉

13

Другой способ проверить xpath — использовать selenium
IDE.

1. Установить Firefox Selenium IDE
2. Откройте приложение в FireFox и откройте IDE
3. В среде IDE на новой строке вставьте свой xpath в цель и
   нажмите Найти. Соответствующий элемент будет выделен в вашем
   приложение

1

Вот расширение ChroPath для Chrome, у которого есть много
дополнительных функций, сравниваемых с FirePath- Следуйте
инструкциям ниже: 1) Откройте панель devtools. 2) Щелкните правой
кнопкой мыши в любом месте веб-страницы. 3) Нажмите «Осмотр». 4) В
правой части вкладки «Элементы» перейдите на вкладку «ChroPath».
Здесь вы получите XPath/CSS, и вы также можете отредактировать и
оценить его.

Ссылка для скачивания addon-

1

Я проверяю селектора XPath и Css, используя расширение Natu WebSync для Chrome
.

Оно может:

• разделить селектор на части и проверить их отдельно.
• показать цветом, сколько элементов найдено для каждой части
  селектора. 0 — красный, 1 — зеленый, несколько — желтый
• выделить элементы на странице, когда я нахожу селекторную
  часть
• перейдите к элементу выбора на вкладке Элементы, когда я
  нажимаю селекторную часть

Это может быть очень полезно для тех, кто должен писать и
проверять сложные селекторы.

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

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

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

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

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

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

How is Firebug Doing?

Firebug isn’t standing still. The Firebug Working Group continues to improve it, as you can see in their latest 1.12 release. Firebug is working hard to move from JSD to the new Debugger API, to reap the performance and stability benefits we added for the Firefox Developer Tools.

After that? Jan Odvarko, the Firebug project leader, had this to say:

Everyone wants to figure out the best way for Firebug’s community of users, developers, and extension authors to shape and complement the Firefox Developer Tools. The Firebug team is actively discussing their strategy here, but hasn’t decided how they want to accomplish that.

Follow the Firebug blog and @firebugnews account to get involved.

Консоль

Первое, что Вы должны заметить, открывая Firebug (либо из строки статуса, либо с использованием сочетание клавиш ctrl+F12) — это панель Console (Консоль). С первого взгляда может показаться, что это очередная версия консоли ошибок (Ctrl+Shift+J). У них есть две общие функции:

• отображение ошибок, предупреждений и сообщений
• способность выполнять код Javascript

Но Firebug расширяет функциональность Firefox:

• отображение ошибок для Javascript, CSS, XML, XMLHttpRequest (AJAX) и Chrome (внутри Firefox)
• выполнение кода Javascript для текущей страницы
• размещение дополнительного объекта Javascript

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

Выполнение кода генерирует следующий вывод:

Ключевые особенности и функции

• только удобным для вас способом…

  Вы можете открыть FireBug в отдельном окне или в виде панели внизу браузера. FireBug предоставляет многофункциональный «точечный» контроль над сайтом;

• изучение и редактирование HTML документов.
  
  FireBug позволяет легко находить HTML элементы, находящиеся в середине больших документов. Как только вы нашли то, что искали FireBug дает вам расширенную информацию об элементе и вы можете редактировать его вживую;
• отшлифовка CSS до идеала.
  
  СSS таблицы FireBug дают вам всю информацию о стилях в вашей веб-странице, и если вас что-то не устраивает, вы можете это изменить и просмотреть эффект мгновенно;
• визуализация CSS измерений.
  
  Если CSS блоки не становятся корректно, бывает сложно понять почему это происходит. Разрешите FireBug быть вашими глазами, и он измерит и отобразит все смещения, отступы, границы, заполнения, и все размеры;
• монитор сетевой активности.
  
  Ваши страницы долго грузятся, но почему? Написали очень много скриптов? Забыли сжать изображения и они много весят? FireBug поможет разобраться и исправить все эти проблемы;
• отладка JavaScript.
  
  FireBug содержит мощный отладчик для JavaScript, который позволить остановить выполнение в любой момент, разобраться и отшлифовать скрипт. Если вы чувствуете что ваш код медленный, воспользуйтесь профилировщиком JavaScript для измерения производительности и найдите слабые места;
• быстрый поиск ошибок.
  
  Когда что-то идет не так, FireBug сообщит об этом немедленно и даст максимум информации об ошибках в коде JavaScript, CSS, и XML;
• исследование DOM.
  
  Document Object Model – это большая иерархия объектов и функций, которые ждут своего использования скриптами Java. FireBug поможет быстро найти нужные объекты DOM и потом отредактировать их «на лету»;
• выполнение JavaScript «на лету».
  
  Командная строка – это один из самых старых инструментов в пакете FireBug, однако есть и такая возможность;

• логирование информации JavaScript.

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