Отладка кода с помощью firebug

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

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

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

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

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

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

Пример практического использования FireBug

Теперь рассмотрим пример из практики. На моем блоге есть статья, посвященная плагину Mingle Forum для WordPress. В ней рассказывается, как вывести форум на отдельной странице. Ради удобства для нее создается отдельный шаблон, в котором удаляется сайдбар. Подразумевается, что форум займет всю ширину страницу.

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

Ко мне время от времени обращаются люди за помощью. Благодаря FireBug найти злосчастный элемент и его стили несложно.

Последний раз я интегрировал форум в тему . Рассмотрим порядок действий.

1. По инструкции, описанной в той статье, создаем отдельный шаблон pageforum.php, в котором удаляем строчку кода, отвечающую за вывод сайдбара справа. Создав страницу с форумом, получаем следующий результат.

Как видите, сайдбар исчез, но осталось пустое место. Его то и следует убрать.

2. Включаем наш инструмент нажатием кнопки F12.

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

4. Следующей нашей целью будет элемент, который отвечает за вывод содержания страницы. Главным критерием поиска является заданная в стилях ширина (width). Именно она не позволяет форуму расползтись. Не забывайте про возможность анализировать структуру страницы с помощью мыши. Данная функция значительно упростит поиск. Картинка кликабельна.

В данном случае я нашел тэг div с классом span-16. Заметьте, что стили прописаны не в стандартном файле style.css, который находится в корневом каталоге темы, а в файле screen.css, расположенном в папке css. Так что будьте внимательнее, чтобы не пришлось искать стили там, где их нет.

5. Открыть файл screen.css, найти класс span-16 и поменять параметр width легко, но это будет ошибкой. Другие страницы WP тоже используют div с классом span-16, так что они после таких изменений просто расползутся. Следует открыть шаблон pageforum.php и переименовать класс span-16. Дайте ему новое, нигде не задействованное имя. Для этого нового класса пропишите параметр width в файле со стилями. Таким образом, изменения будут внесены только в страницу для форума.

Вот так быстро и просто FireBug позволяет находить нужные html тэги и их стили.

Напоследок хочу сказать, что FireBug становится абсолютно бесполезным в том случае, если вы не знаете хотя бы основ html и css. Изучить их несложно, нужно только захотеть. Если вы ведете блог или сайт, то рано или поздно эти знания вам понадобятся. Лично я получил их из бесплатного мануала «Самоучитель HTML и CSS» за авторством Влада Мержевича. Конечно, этот мануал не сделает из вас профессионального верстальщика, но базовые знания вы точно получите.

На этом на сегодня все

Спасибо а внимание и до новых встреч

Лучший способ выразить благодарность автору — поделиться с друзьями!

Storage Inspector

The Cookies panel in Firebug displays information related to the cookies created by a page and allows to manipulate the information they store. Within the DevTools this functionality is located within the Storage Inspector. In contrast to Firebug the Storage Inspector not only allows to inspect cookies but also other kinds of storages like the local and session storage, the cache and IndexedDB databases.

All cookies related to a website are listed inside the Cookies panel in Firebug. Inside the DevTools, the cookies are grouped by domain under the Cookies section within the Storage Inspector. Both show pretty much the same information per cookie, i.e. the name, value, domain, path, expiration date and whether the cookie is HTTP-only.

The DevTools don’t show by default whether a cookie is secure, but this can be enabled by right-clicking the table header and checking Secure from the context menu. Additionally, the DevTools allow to display the creation date of a cookie as well as when it was last accessed and whether it is host-only.

To edit a cookie in Firebug you have to right-click the cookie and choose Edit from the context menu. Then a dialog pops up allowing you to edit the data of the cookie and save it. Inside the Storage Inspector you just have to double-click the data you want to edit. Then an inline editor allows you to edit the value.

Firebug’s Cookies panel allows you to delete all cookies of a website via the menu option Cookies > Remove Cookies or by pressing Ctrl+Shift+O. It also allows you to only remove session cookies via Cookies > Remove Session Cookies and to remove single cookies by right-clicking them and choosing Delete. The DevTools Storage Inspector allows to remove all cookies and a single one by right-clicking on a cookie and choosing Delete All resp. Delete «<cookie name>». Additionally, it allows to delete all cookies from a specific domain via the context menu option Delete All From «<domain name>». It currently does not allow to only delete session cookies (see bug 1336934).

Reference

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

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

Файрбаг

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

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

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

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

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

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

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

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

Стиль

Firebug открывается в нижней части браузера и его окно состоит из двух основных панелей и меню. В левой панели по умолчанию отображается HTML, а в правой стиль выбранного элемента (рис. 7.37).

Рис. 7.37. Интерфейс Firebug

Код HTML выводится в виде иерархической структуры, если элемент содержит дочерние элементы, рядом с ним выводится плюсик. На плюс можно щёлкнуть и раскрыть содержимое контейнера, а также свернуть его, щёлкнув ещё раз. При выборе элемента в правой части отображается его стиль (рис. 7.38). Любой элемент можно выбрать не только через код HTML, но и непосредственно на странице с помощью инструмента либо через меню Анализировать элемент (Ctrl+Shift+C).

Рис. 7.38. Стиль выбранного элемента

В списке отображаются селекторы, имеющие отношение к выбранному элементу, название CSS-файла и строка, в которой эти селекторы описаны. Если какая-то строка зачёркнута, значит, на неё действуют правила каскадирования и у данного селектора специфичность ниже, чем у селектора выше. На рисунке видно, что у селектора .front .info специфичность выше, чем у селектора .info, поэтому свойства background и font-size не применяются. Учтите также, отображаемый стиль не соответствует стилю в CSS-файле, поэтому вы можете обнаружить значения вроде transparent, которые не вводили в стиль.

Любое свойство легко отключается и включается вновь простым щелчком по пустому полю перед свойством. Отключенные свойства отображаются серым цветом, рядом с ними выводится красный перечёркнутый кружок, как показано на рис. 7.38. Кроме отключения любых свойств их можно изменять. Для этого достаточно щёлкнуть по свойству, и оно станет редактируемым (рис. 7.39).

Рис. 7.39. Изменение стилевого свойства

Аналогичное действие производится и со значениями, только в этом случае требуется щёлкнуть уже по нему (рис. 7.40).

Рис. 7.40. Изменение значения

Добавление нового свойства, а также редактирование существующих происходит через контекстное меню (рис. 7.41).

Рис. 7.41. Контекстное меню

Анализировать во вкладке DOM

Перейти во вкладку DOM.

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

История версий

Версия 2.0

Firebug 2.0 представил много новых функций для расширения Firebug, включая подсветку синтаксиса JavaScript , красивую печать для минифицированного кода JavaScript и инспектор событий DOM для обработки всех обработчиков событий на веб-странице. Кроме того, пользователи могут искать элементы страницы с помощью селекторов CSS в строке поиска. Инструмент отладки теперь позволяет пользователям проверять выражения JavaScript по мере их оценки. Более того, пользователи могут проверять значения, возвращаемые функциями JavaScript. Он также добавляет возможность создавать новые атрибуты HTML для существующих элементов HTML.

Версия 3.0

10 ноября 2014 года было объявлено о выпуске Firebug 3.0, и альфа-версия стала общедоступной. Эта версия должна была включать новую тему и была сосредоточена на пользовательском опыте.

General

Firebug’s activation is URL based respecting the same origin policy. That means that when you open a page on the same origin in a different tab, Firebug gets opened automatically. And when you open a page of a different origin in the same tab, it closes automatically. The DevTools’ activation on the other hand is tab based. That means, that when you open the DevTools in a tab, they stay open even when you switch between different websites. When you switch to another tab, though, they’re closed.

Firebug can be opened by pressing F12. To open it to inspect an element it is possible to press Ctrl+Shift+C / Cmd+Opt+C. The DevTools share the same shortcuts, but also provide . E.g. the Network Monitor can be opened via Ctrl+Shift+Q / Cmd+Opt+Q, the Web Console via Ctrl+Shift+K / Cmd+Opt+K and the Debugger via Ctrl+Shift+S / Cmd+Opt+S.

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

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

Скачать для Google Chrome.

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

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

Скачать Firebug для Opera.

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

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

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

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

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

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

Debugger

What’s the Script panel in Firebug, is the Debugger panel in the DevTools. Both allow you to debug JavaScript code executed on a website.

Firebug has a Script Location Menu listing all JavaScript sources related to the website. Those sources can be static, i.e. files, or they can be dynamically generated (i.e. scripts executed via event handlers, , , etc.). In the DevTools’ Debugger panel the scripts are listed at the left side within the . Dynamically generated scripts are only listed there when they are named via a comment.

In Firebug you can set different types of breakpoints, which are all listed within the Breakpoints side panel. In the DevTools the breakpoints are shown below each script source within the . Those panels allow you to enable and disable single or all breakpoints and to remove single breakpoints or all of them at once. They do currently only allow to set script breakpoints. XHR, DOM, Cookie and Error breakpoints are not supported yet (see bug 821610, bug 1004678, bug 895893 and bug 1165010). While there are no breakpoints for single JavaScript errors, there is a setting Pause on Exceptions within the Debugger panel options.

Once the script execution is stopped, you can step through the code using the Continue (F8), Step Over (F10), Step Into (F11) and Step Out (Shift+F11) options. They work the same in both tools.

When the script execution is paused, Firebug displays the function call stack within its Stack side panel. In there the functions are listed together with their call parameters. In the DevTools the function call stack is shown within the . To see the call parameters in the DevTools, you need to have a look at the .

The Watch side panel in Firebug displays the object (the global scope) by default. With the script execution halted it shows the different variable scopes available within the current call stack frame. Furthermore, it allows you to add and manipulate watch expressions. The DevTools have a Variables side panel, which works basically the same. The main difference is that it is empty when the script execution is not stopped, i.e. it doesn’t display the object. Though you can inspect that object either via the DOM property viewer or via the Web Console.

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

Итак, после того, как вы скачали и установили плагин FireBug для Firefox, справа в верхней панели браузера у вас появится значок с жуком.

Чтобы его активировать вы можете кликнуть правой кнопкой мыши и выбрать «Инспектировать элемент с помощью FireBug». Либо выбрать в раскрывающемся списке под жучком опцию «Включить на всех страницах». Внизу экрана появится такое окно:

Это и есть рабочая область для просмотра и редактирования элементов страницы.

Для того чтоб понять, как пользоваться плагином FireBug для начала нужно разобраться с основным набором его инструментов

В этом уроке мы уделим внимание закладкам HTML и CSS

Работа с HTML

Для того чтобы выделить определенный элемент страницы, нажмите на иконку с курсором (стрелочка слева в панели). Теперь наводя мышку на отдельные участки страницы, вы сможете увидеть, какой код за них отвечает.

Вот, к примеру, я выделяю картинку с ноутбуком и внизу вижу ее соответствие в коде.

Работает и обратная последовательность: просматривая код в окне Фаербага, на странице будут автоматически выделяться соответствующие ему элементы.

Теперь, если вы хотите поменять, к примеру, размер картинки и посмотреть, как это будет выглядеть, нажмите кнопку «Редактировать».

Здесь вы можете менять любые параметры и сразу же видеть результаты этих изменений.

Например, уменьшим размер картинки вдвое:

Но помните, что стоит обновить страницу и все вернется к исходному виду. Как же сохранить изменения из FireBug? Для этого нужно найти файл шаблона, который отвечает за данный элемент. В моем случае, картинка просто находится в тексте статьи. Но вы, возможно, захотите изменить элемент из шапки или сайдбара, тогда и искать его нужно будет в файлах header.php и sidebar.php соответственно. Затем скопировать измененный в Файрбаге код и заменить соответствующие строки файла.

Работа с CSS

Теперь перейдем к стилям. Возьмем для примера социальные кнопки под статьей.

Нужный нам блок будет подсвечен голубой заливкой:

Здесь мы можем поменять толщину, цвет и стиль верхней и нижней границы элемента (border-bottom, border-top), его высоту (height), величину отступа от нижнего края (margin-bottom),ширину полей (padding), позицию элемента относительно окна браузера (position). Кроме того, сюда можно добавлять дополнительные параметры стиля. Значения перечисленных показателей можно увидеть наглядно, если перейти на вкладку «Макет».

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

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

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

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

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 происходит аналогично другим расширениям. Перейдите по адресу

и нажмите на кнопку «Добавить в Firefox» (рис. 7.34).

Рис. 7.34. Добавление расширения

После этого появится окно с предупреждением (рис. 7.35), в котором надо нажать «Установить».

Рис. 7.35. Установка программного обеспечения

Вызов Firebug происходит несколькими способами:

• через меню Инструменты > Firebug;
• через горячую клавишу F12;
• щелчком по картинке жука в правом углу браузера Firefox (рис. 7.36); картинка доступна только при включенной строке состояния (Вид > Строка состояния).

Рис. 7.36. Значок Firebug

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

Сначала его нужно активировать. Делается это так:

— кликнуть левой кнопкой мыши по иконке жучка в правом верхнем углу браузера: либо

— использовать горячие клавиши вызова F12.

Открывается рабочая область  (обведена красным).

Начинаем анализ сайта (пример delajblog.ru). Сначала нажимаем на значок  в рабочей области (находится справа от жучка).

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

Пример использования плагина Firebug

Разберём конкретный пример -посмотрим код заголовка статьи и изменим его цвет  в реальном времени. Открываем веб-страницу и видим статью названную Программа для чтения PDF- файлов — Stduviewer. Запустили программу (нажали F12) и подвели мышку к этому заголовку

 В рабочей области внизу видим, что за вывод этого элемента отвечает код:

<h1>Программа для чтения PDF- файлов &mdash; Stduviewer</h1>

И в этой же рабочей области справа видим СSS:

a, a:link, a:visited, #sidebar a, #sidebar ul, .post-title, .page-title, .post-title a:link, .post-title a:visited, #slideshow .post-title a {

    color: #265076;

}

Видно, что заголовок статьи выводится с цветом #265076. Попробуем, а как будет смотреться заголовок с таким цветом  #00FFFF? Для этого в рабочей области выделяем #265076 и вместо этого цвета прописываем #00FFFF и видим результат.

Цвет заголовка изменился. Но дело в том, что на сервере сам код не изменился и необходимо вручную ввести правку в код CSS.

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

Software Review

A tool for web developers to edit and debug sites

Firebug is a handy tool for web developers to use as they browse the internet. Among the things that you can do with this program are debug, edit, and monitor CSS, JavaScript, and HTML in whatever page or pages you wish. Screen shots are available at http://getfirebug.com, and there is a forum in which you can ask questions at https://groups.google.com/forum/#!forum/firebug. To let the developers know about a bug, you can go to http://code.google.com/p/fbug/issues/list.

Download

Comparison of Alternative Programs:

	Learn German Language	Need Tips on Toilet Training Toddlers	Best Anti Snoring Device	Berlin Swing + Latin Jazz
Description	Learn German Easy toolbar for Firefox.	Toilet training toddler’s toolbar for IE.	Best Anti Snoring Device For IE	Get the latest news about Jazz and music from your toolbar.
Rating
Downloads	878	169	147	203
Price	$ 0	$ 0	$ 0	$ 0
File Size	0.68 MB	2.00 MB	1.05 MB	1.56 MB
	Download	Download	Download	Download

Users who downloaded Firebug for FireFox also downloaded:

We are happy to recommend you programs like Firebug for FireFox that other users liked. Software similar to Firebug for FireFox:

English Spanish 
1.0

English Spanish Search Engine.

Download
Internet Tools

User rating

IntelliWebSearch 
3.2.0.5

Assists translators to find the information they need

Download
Internet Tools

User rating

SearchMax 
3.0

Advanced search mode mastered

Download
Internet Tools

User rating

Who is Extractor 
2.8

Get extensive information on about any domain owner

Download
Internet Tools

User rating

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

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

  Вы можете открыть 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 дает вам набор мощных функций логирования, которые помогаю найти решения проблем.

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

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

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

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

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

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

Описание редакции

скачать

Сравнение альтернативных программ:

	Learn German Language	Need Tips on Toilet Training Toddlers	Best Anti Snoring Device	Berlin Swing + Latin Jazz
Описание	Скачать Learn German Language, версия 1.0	Скачать Need Tips on Toilet Training Toddlers, версия 1.0	Скачать Best Anti Snoring Device, версия 1.2	Узнавайте последние новости джаза с помощью панели инструментов
Рейтингу
Загрузки	1,397	500	535	31
Цена	$ 0	$ 0	$ 0	$ 0
Размер файла	0.68 MB	2.00 MB	1.05 MB	1.56 MB
	Download	Download	Download	Download

Пользователи, которые скачивали Firebug for FireFox, также скачивали:

Мы рады посоветовать вам программы которые понравились другим пользователям Firebug for FireFox. Вот список программ, аналогичных Firebug for FireFox:

English Spanish 
1.0

Скачать English Spanish, версия 1.0

скачать
Интернет инструменты

Рейтинг пользователей

IntelliWebSearch 
3.2.0.5

Помогает переводчикам находить нужную информацию

скачать
Интернет инструменты

Рейтинг пользователей

SearchMax 
3.0

Скачать SearchMax, версия 3.0

скачать
Интернет инструменты

Рейтинг пользователей

Who is Extractor 
2.8

Получите подробную информацию о владельцах домена

скачать
Интернет инструменты

Рейтинг пользователей

Сеть

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

Editörün Yorumu

Alternatif Programların Karşılaştırması:

	Learn German Language	Need Tips on Toilet Training Toddlers	Best Anti Snoring Device	Berlin Swing + Latin Jazz
Açıklama	Learn German Language, sürüm 1.0 yazılımını İndirin	Need Tips on Toilet Training Toddlers, sürüm 1.0 yazılımını İndirin	Best Anti Snoring Device, sürüm 1.2 yazılımını İndirin	Jazz ve müzik hakkında son haberleri araç çubuğunuzdan alın
Değerlendirme
İndirmeler	409	110	19	11
Ücret	$ 0	$ 0	$ 0	$ 0
Dosya Boyutu	0.68 MB	2.00 MB	1.05 MB	1.56 MB
	Download	Download	Download	Download

Firebug for FireFox yazılımını indirenler bunları da indirdiler:

Diğer kullanıcıların hoşlandığı Firebug for FireFox gibi programları tavsiye etmekten mutluluk duyarız. Firebug for FireFox benzeri yazılımlar:

English Spanish 
1.0

English Spanish, sürüm 1.0 yazılımını İndirin

İndir
İnterenet Araçları

Kullanıcı değerlendirmesi

IntelliWebSearch 
3.2.0.5

Çevirmenlere aradıkları bilgiyi bulmalarında yardım

İndir
İnterenet Araçları

Kullanıcı değerlendirmesi

SearchMax 
3.0

SearchMax, sürüm 3.0 yazılımını İndirin

İndir
İnterenet Araçları

Kullanıcı değerlendirmesi

Who is Extractor 
2.8

Herhangi bir alan adı sahibi hakkında ayrıntılı bilgi alın

İndir
İnterenet Araçları

Kullanıcı değerlendirmesi

Скомпилированный стиль

Для каждого элемента документа браузер автоматически формирует свой стиль, основываясь на внутренних значениях браузера и стиле родительских элементов. Во вкладке «Скомпилированный стиль» показанной на рис. 7.42 приведены свойства и их значения, которые явно не задаются через стили.

Рис. 7.42. Скомпилированный стиль

Для примера, значение font-family наследуется от селектора body, размер шрифта заданный в em переводится для font-family в пикселы, значение font-weight браузер по умолчанию считает за 400.

Скомпилированный стиль нельзя изменить, и он приведён лишь для информации.