Главная » CSS, Веб-разработка, Статьи и переводы

Все, что вы хотели знать о FireBug

8 Июнь 2008 просмотров 12,012 комментариев 52


FireBug

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

Спонсор статьи: Сервисный центр Стаханов предлагает ремонт ноутбуков и ремонт мониторов по доступным ценам.

Основная задача аддона – тестирование и отладка, а также вывод информации о запрашиваемом элементе страницы. Если в процессе разработки сайта вы столкнулись с проблемой верстки, JS или CSS, то кнопка “Inspect” поможет вам найти причину ошибки. Просто наведите курсором на нужный элемент страницы и аддон выведет о нем массу информации. Вы увидите как располагается этот элемент в вашем XHTML коде, отображая все вложенные слои. Также, вы увидите какие CSS правила относятся к данному элементу и не «переписываются» ли они другими правилами.

firebug

FireBug позволяет одновременно тестировать и редактировать CSS, XHTML, и даже JavaScript. Это безусловно ускорит процесс исправления ошибок на сайте. Если после нажатия кнопки Inspect вы обнаружили проблемы в коде, то достаточно просто установить окно с ошибками поверх остальных закладок, чтобы отладить код «визуально», т.е. наблюдать как меняется элемент пока вы вносите изменения в код.

firebug

Еще одна замечательная опция FireBug – это вкладка Net. Если ваша страница загружается слишком медленно, просто откройте вкладку Net и взгляните, какие еще элементы загружаются помимо самой страницы (скрипты, картинки, css-код, flash). Вы увидите размер каждого элемента и как долго он загружается по времени. Внизу вы найдете общее количество обращений к вашему сайту, т.е. общее количество KB, и время на сборку всех элементов в единое целое.

firebug

Однако, FireBug несовершенен. Иногда он слишком медленно обрабатывает страницы, особенно если они открыты в фоновом режиме, и постоянно идет обращение к серверу. Так, страницы, использующие AJAX технологии или страницы, которые слишком часто обновляют содержание, могут загружаться очень долго, если вы используете FireBug. Но вы можете просто отключить загрузку аддона при открытии отдельных страниц. Просто зайдите на нужный сайт и нажмите в меню аддона: Tools -> Firebug -> Disable Firebug for [здесь адрес сайта]. Больше аддон не будет обрабатывать эти страницы.

firebug

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

Хотите знать больше? Тогда заходите на сайт разработчиков FireBug.

Комментариев 52 »

  • ]]>maxt3r пишет: ]]>

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

    Цитировать

  • ]]>Юра пишет: ]]>

    печально что этот незаменимый плагин не работает в Firefox3rc1…  

    Цитировать

  • ]]>maxt3r пишет: ]]>

    У меня работает в RC2, ставьте 1.1 beta  

    Цитировать

  • ]]>Юра пишет: ]]>

    спасибо  

    Цитировать

  • ]]>Punka пишет: ]]>

    а фишку – постоянного обращения к серверу лучше просто отрубать;) в Firefox все работает.  

    Цитировать

  • ]]>Перфектомания пишет: ]]>
  • ]]>Сергей пишет: ]]>

    Да, плагин очень полезный, но меня интересует следующий вопрос: можно ли через firebug редактировать страницы? Просто после обновления страницы все изменения пропадают…подскажите пожалуйста.  

    Цитировать

  • ]]>Автор пишет: ]]>

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

    Цитировать

  • ]]>Dofin пишет: ]]>

    А вы попробуйте распаковать плагин и прописать версию вручную. Помню так заставлял работать старые версии плагинов для firefox 2.0.6.

    И просьба к админу сайта. Я пару раз обращался на ФТП по wp, но разобраться так и не смог. Делаю интернет магазин (http://mobispb.ru). Грузится оочень долго. Были проделаны несколько действий благодаря чему сайт стал загружаться в несколько раз бысрее (не знаю почему именно, но и сейчас время загрузки оставляет желать лучшего).
    1. Отключил wp-supercache
    2. Удалил все файлы (из папки cache)
    3. Удалил из темы подключаемы js
    Тема hamakasi. Если не вас не затруднит, просмотрите и сообщите есть ли какие идеи по оптимизации?  

    Цитировать

  • ]]>Автор пишет: ]]>

    Способов оптимизировать сайт довольно много. Я рекомендую вам пройти тест на сайте http://webo.in/ и вам покажут что и как можно еще ужать.
    Лично я советую сжать все CSS файлы здесь
    и запаковать JS файлы с помощью JS packer. И от кеширования вы зря отказались – это только увеличит загрузку, ведь лучше если сайт один раз загрузиться, а в остальные разы будет подгрузаться из кеша. Думаю на том сайте по оптимизации загрузки вы найдете много полезного.  

    Цитировать

  • ]]>Автор пишет: ]]>

    И еще заметила, что у вас keywords генеряться 2 раза – simple tags и platinum seo pack.  

    Цитировать

  • ]]>ieroglif пишет: ]]>

    Файрбаг – незаменимая штука.
    (открываю файрбаг и пишу используемые вкладки)
    1. Console
    незаменимо при поиске ошибок на странице (вот на эту страницу мне уже 6 ошибок отобразило). сразу описывается коротко сама ошибка, и пишется имя файла и номер строки, вызвавшие ошибку.
    незаменимо при отладке аякса. именно в консоли отображаются все аяксовые запросы, их заголовки, ответы, пост и гет данные, а так же ответ сервера на запрос. таким образом отладка аякса сводится к приятному программирования, без заморочек о лог файлах.
    так же на этой вкладке расположена консоль яваскриптов. напишите там alert(1); и нажмине Run – всё сразу поймёте. консоль использует все текущие глобальные переменные и объекты страницы.
    2. Вкладка HTML, она же активируется при Insect-е страницы. отображается весь хтмл код страницы, слева сразу видны все DOM парамерты, на Layout вкладке сразу видна вся бокс-модель с парамертами margins, padding, border и самим содержимым. при возюканье по ним мышкой сразу на самой странице подсвечивается текущий бокс. безумно удобно при вопросах типа “почему у меня элемент уехал на Х пикселей?”. а вкладка style – весь CSS, который применяется к этому элементу, с указанием файла и номера строки, наследования и парамеров. там же можно эти параметры включать/выключать/изменять для лучшего понимания ситуации. шикааарно (с)Картман.
    ну и кроме того, прямо тут можно самому менять хтмл для проверки. супер.
    3. Вкладка CSS. лично мной используется редко, в связи с наличием предыдущего пункта. однако любители есть да и всё бывает.. бывает и туда лезу.
    4. вкладка Script.
    вот это просто магия! именно в этой вкладке находится 50% силы файрбага. ибо это полноценный отладчик яваскриптов вашей страницы. просмотор всех яваскритов из загружаемых файлов, установка брейкпоинтов и последующий трейскинг, просмотр текущих переменных – о большем и мечтать же нельзя! да и о чём тут ещё мечтать? =)
    в настройках вкладки – автоматическая остановка при любой яваскрипт ошибке с последующей отладкой – разработчикам плагина репект!
    5. вкладкой DOM я никогда не пользовался – всегда хватало предыдущих =)
    6. вкладка NET – уже расписано автором. что? откуда? сколько весит? заголовки, ответы – всё, что загружает ваш сайт тут можно найти и по наглядным полосочкам разной длины понять – что же именно делает сайт медленным?
    7. в последнюю вкладку FBTrace я сколько не залезал – так и не дошли руки разобраться – что же это за чудо там =( но пока и предыдущего хватает, хотя может я и упускаю много нового и удобного.

    З.Ы. Автор – отдельное тебе уважение, как девушке, ведущей блог для веб-разработчиков. буду внимательно сделить за rss =)  

    Цитировать

  • ]]>Катя пишет: ]]>

    У меня версия плагина 1.2.1 ФФ3. Отстутсвуют пункты в менюшке, отвечающие за отключение плагина для сайтов! Что делать?  

    Цитировать

  • ]]>Автор пишет: ]]>

    Не совсем поняла вопроса. FireBug по умолчанию отключен и работает только тогда, когда вы непосредственно работаете с ним на каком-то сайте.
      

    Цитировать

  • ]]>Автор пишет: ]]>

    Если вы хотите его совсем отключить для конкретного сайта, откройте вкладку Console и выберите Sites, там можно добавить сайт.  

    Цитировать

  • ]]>Катя пишет: ]]>

    Спасибо, уже разобралась :). Только я через вкладку Net; всё же новый firebug имеет другое меню, в этом произошла путаница для меня. Вот тут нашла решение: http://www.softwareishard.com/blog/firebug/how-to-enable-and-disable-firebug-12/  

    Цитировать

  • ]]>Marat пишет: ]]>

    Спасибо! Намного облигчилась работа с css  

    Цитировать

  • ]]>Даль пишет: ]]>

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

    Цитировать

  • ]]>Lavr пишет: ]]>

    Первый день тестю firebug, не поятно только как сохранить изменения после редактирования HTML-кода , когда что то изменяю в коде видно это видно на странице, но вот как сохранить изменения не понятно: делаю так – view->обновить Ctrl+R , затем обновляю и страницу но изменений которые вносил не сохраняются . Подскажите пожалуйста как сохранить изменения.Спасибо.  

    Цитировать

  • ]]>Автор пишет: ]]>

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

    Цитировать

  • ]]>Lavr пишет: ]]>

    Может я не правильно сформулировал . Ну хорошо… спрошу по другому , что бы и самому было понятно :-)
    Как сохранить исправленное???   

    Цитировать

  • ]]>Автор пишет: ]]>

    Никак :) Говорю же, сохранение изменений не предусмотрено.Если это ваш сайт – проделайте все необходимые операции в фаирбаге, а затем тоже самое в реальном коде.  

    Цитировать

  • ]]>Lavr пишет: ]]>

    Спасибо , понял.  

    Цитировать

  • ]]>Anstak пишет: ]]>

    Уже давным давно юзаю Firebug, и кстати не знал про закладку Net. Юзал webo.in для проверки скорости. Теперь буду знать, спасибо!  

    Цитировать

  • ]]>Web-мастер пишет: ]]>

    А у меня что то этот Firebug начал жутко тормозить, практически невозможно работать.  

    Цитировать

  • ]]>Egor пишет: ]]>

    Не могу скачать Firebug скажем с сайта getfirebug. com пишет что “ошибка при установлении защищенного соединения” у меня стоит версия фокса 1.9.0.3105.
    я ниразу не устанавливал на него плагины(и вообще страницы не редактировал раньше). Подскажите может что не так делаю, или может версия firefox не подходит.  

    Цитировать

  • ]]>Автор пишет: ]]>

    Думаю вам пора обновить браузер….  

    Цитировать

  • ]]>Egor пишет: ]]>

    я ошибся с версией)) у меня стоит 3.0.1 (просто сначала посмотрел в Program Files, куда у меня установлен фокс, там стоит: версия файла 1.9.0.3105.)   

    Цитировать

  • ]]>Egor пишет: ]]>

    вот что он мне дословно пишет когда хочу скачать FireBug:Ошибка при установлении защищённого соединения
    При соединении с addons.mozilla.org произошла ошибка.Не удалось установить защищённое соединение, так как была отключена поддержка протокола SSL.(Код ошибки: ssl_error_ssl_disabled)
      

    Цитировать

  • ]]>Автор пишет: ]]>

    Попробуйте прямую ссылку https://addons.mozilla.org/ru/firefox/downloads/latest/1843/addon-1843-latest.xpi

    Если будет ругаться на ssl, скачайте просто из другого браузера, а затем перетащите мышкой в FF и плагин установится.  

    Цитировать

  • ]]>Egor пишет: ]]>

    Спасибо за ответы!!!! Но правда я в Google ввел эту ошибку, а он мне выдал ответ (правда на английском языке). Короче требовалось удалить профиль FireFox. но т.к. я этого делать не умею, взял его удалил вместе с профилем и установил заново. И все ОК!!!! Нормально заходит и скачивает плагины!
    У меня теперь другая проблема, на FTP сервере, не получается в некоторые папки зайти, там папки которые имеют адрес типа ftp://10.53.9.2/Software/CD_DVD/ в них заходит нормально, а некоторые адреса толи с гиперссылками (не знаю как называются), такого типа: ftp://10.53.9.2/Software/%C8%ED%F2%E5%F0%ED%E5%F2/. В них не заходит и выдает ошибку :550 /Software/???????µ?????µ??: No such file or directory.Тоесть я думаю что фокс не понимает в имени адреса символы, например %, а тот же explorer нормально с этими адресами работает, почему так, мож кто знает…?  

    Цитировать

  • ]]>Автор пишет: ]]>

    FF по умолчанию кодирует все ссылки в UTF-8, поэтому русские символы не читабельны. Честно говоря не сталкивалась с этим (не пользуюсь фтп через FF), вот что нашла по теме, почитайте http://forum.mozilla-russia.org/viewtopic.php?pid=184616

      

    Цитировать

  • ]]>Egor пишет: ]]>

    Спасибо прочитал, правда ответа там нет. все способы решения, предложенные на форуме, не помогают))) но все равно спс!  

    Цитировать

  • ]]>Кин100нTEEN пишет: ]]>

    Все достоинства Firebug перечёркиваются двойной линией из-за отсутствия возможности вносить изменения в файлы…
    Крайне неудобно ковырять в Firebug 180кб стиль а затем вспоминать в блокнотике что да где править…
    Или я чего-то не знаю?  

    Цитировать

  • ]]>Кин100нTEEN пишет: ]]>

    * РЕШЕНО!Сохранять изменения можно…
    http://habrahabr.ru/blogs/webdev/58102/ – собственно..– ps: Админ закрой дыру в двиге. Легко подделать время сообщения (см. моё сообщение выше)  

    Цитировать

  • ]]>Dolph пишет: ]]>

    А для оперы есть похожие плагины, уж больно с нее слазить не охото)  

    Цитировать

  • ]]>Adrianoff пишет: ]]>

    Какая связка версий Firefox+Firebug наиболее стабильна? Ставлю самые последние версии — ничего не работает. То есть значок внизу браузера не реагирует…  

    Цитировать

  • ]]>Блог для вебмастеров пишет: ]]>

    Adrianoff:

    Какая связка версий Firefox+Firebug наиболее стабильна? Ставлю самые последние версии — ничего не работает. То есть значок внизу браузера не реагирует…

    у меня все версии всегда работали. Думаю дело в пользовательских настройках FF. Удалите полностью FF и установите новый в другое место. Новый Firebug должен работать с последней версии.  

    Цитировать

  • ]]>Adrianoff пишет: ]]>

    Вся беда в том, что не работают… жучок внизу справа не активен:( Сносил FF…  

    Цитировать

  • ]]>Блог для вебмастеров пишет: ]]>

    Adrianoff:

    Вся беда в том, что не работают… жучок внизу справа не активен:( Сносил FF…

    у меня стоит FF 3.5.1 и Firebug 1.4.1
    Откройте пункт меню Инструменты -> Firebug -> Открыть Firebug
    или просто нажмите F12 в FF

    Жучок серый, но открывается при нажатии.  

    Цитировать

  • ]]>Adrianoff пишет: ]]>

    Поставил версии 3.5.1 и 1.4.1 — все равно не активен. даже если открывать через Инструменты. Может какие-нибудь настройки?  

    Цитировать

  • ]]>Блог для вебмастеров пишет: ]]>

    Adrianoff:

    Поставил версии 3.5.1 и 1.4.1 — все равно не активен. даже если открывать через Инструменты. Может какие-нибудь настройки?

    Не активен – всмысле не открывается панелька файрбага снизу?
    Я никаких дополнительных настроек не делала. Попробуй полазить по опциям файрбага через Инструменты, там вроде есть “Сбросить настройки”  

    Цитировать

  • ]]>Adrianoff пишет: ]]>

    В том то и самый большой прикол: настройки не активны! то есть если лезть через Инструменты то вкладка Firebug просто не активна, не нажимается. Панелька снизу также не открывается :(  

    Цитировать

  • ]]>Блог для вебмастеров пишет: ]]>

    @Adrianoff,
    даже не знаю что пожсказать :( Попробуй написать в саппорт им
    http://groups.google.com/group/firebug  

    Цитировать

  • ]]>Мария пишет: ]]>

    Adrianoff, у меня такая же проблема!
    Не работает этот Firebug, хоть ты тресни! :(
    вот именно в Инструментах менюшка справа не открывается и внизу значек серого жучка не кликабелен! Переставляла Firefox версий от 3.0 до 3.5.4 и нигде не работает. Пыталась отключать все плагины в настройках, заходила в сейф-моде, не знаю в чем проблема и нигде не могу найти ответа!  

    Цитировать

  • ]]>Adrianoff пишет: ]]>

    Я так и не понял в чем причина!  

    Цитировать

  • ]]>ugfrdf пишет: ]]>

    Класно! Нашел, наконец толковый блог на просторах интернета) Ура!  

    Цитировать

  • ]]>Ринат пишет: ]]>

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

    а скажите пожалуйста как там после всех изменений сохранять всё это дело ?  

    Цитировать

  • ]]>Травин пишет: ]]>

    У вас конечно много чего упрощено, в отличии от реалий…  

    Цитировать

  • ]]>Jean-Claude Van Damme пишет: ]]>

    Довольно, ожидаемая статья  

    Цитировать

  • ]]>acaccmlzda пишет: ]]>

    Не поспоришь, глубокая заметка  

    Цитировать

Комментарии

Добавьте ваш комментарий, или трекбэк с сайта. Вы также можете подписаться на комментарии к этой статье через RSS.

Вы можете использовать теги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Чтобы получить аватарку, зарегистрируйтесь на Gravatar.