Все, что вы хотели знать о FireBug
Если вы еще не работали с FireBug, то эта статья непременно для вас.
FireBug – один из аддонов браузера Firefox, который просто необходим для работы вебмастеру, и я могу гарантировать, что используя FireBug, вы намного упростите разработку и тестирование веб-сайтов.
Спонсор статьи: Сервисный центр Стаханов предлагает ремонт ноутбуков и ремонт мониторов по доступным ценам.
Хотите стать спонсором?
Основная задача аддона – тестирование и отладка, а также вывод информации о запрашиваемом элементе страницы. Если в процессе разработки сайта вы столкнулись с проблемой верстки, JS или CSS, то кнопка “Inspect” поможет вам найти причину ошибки. Просто наведите курсором на нужный элемент страницы и аддон выведет о нем массу информации. Вы увидите как располагается этот элемент в вашем XHTML коде, отображая все вложенные слои. Также, вы увидите какие CSS правила относятся к данному элементу и не «переписываются» ли они другими правилами.
FireBug позволяет одновременно тестировать и редактировать CSS, XHTML, и даже JavaScript. Это безусловно ускорит процесс исправления ошибок на сайте. Если после нажатия кнопки Inspect вы обнаружили проблемы в коде, то достаточно просто установить окно с ошибками поверх остальных закладок, чтобы отладить код «визуально», т.е. наблюдать как меняется элемент пока вы вносите изменения в код.
Еще одна замечательная опция FireBug – это вкладка Net. Если ваша страница загружается слишком медленно, просто откройте вкладку Net и взгляните, какие еще элементы загружаются помимо самой страницы (скрипты, картинки, css-код, flash). Вы увидите размер каждого элемента и как долго он загружается по времени. Внизу вы найдете общее количество обращений к вашему сайту, т.е. общее количество KB, и время на сборку всех элементов в единое целое.
Однако, FireBug несовершенен. Иногда он слишком медленно обрабатывает страницы, особенно если они открыты в фоновом режиме, и постоянно идет обращение к серверу. Так, страницы, использующие AJAX технологии или страницы, которые слишком часто обновляют содержание, могут загружаться очень долго, если вы используете FireBug. Но вы можете просто отключить загрузку аддона при открытии отдельных страниц. Просто зайдите на нужный сайт и нажмите в меню аддона: Tools -> Firebug -> Disable Firebug for [здесь адрес сайта]. Больше аддон не будет обрабатывать эти страницы.
Одним словом, Firebug – мощный инструмент для отладки веб-страниц и очень нужный помощник каждому вебмастеру. Это также замечательный инструмент для исследования структуры сторонних сайтов: просто введите адрес любого сайта и проследите как построена страница.
Хотите знать больше? Тогда заходите на .
Dmoz
На мой взгляд Firebug удобнее всего использовать как раз для отладки джаваскриптов и AJAX-запросов. Но и для верстки он незаменим. Вообщем не знаю, что бы я без него делал
maxt3rЦитировать
печально что этот незаменимый плагин не работает в Firefox3rc1…
ЮраЦитировать
У меня работает в RC2, ставьте
maxt3rЦитировать
спасибо
ЮраЦитировать
а фишку – постоянного обращения к серверу лучше просто отрубать;) в Firefox все работает.
PunkaЦитировать
Да, плагин очень полезный, но меня интересует следующий вопрос: можно ли через firebug редактировать страницы? Просто после обновления страницы все изменения пропадают…подскажите пожалуйста.
СергейЦитировать
Редактировать страницы можно, но для этого не нужно их обновлять, изменение на странице происходит сразу после редактирования.
АвторЦитировать
А вы попробуйте распаковать плагин и прописать версию вручную. Помню так заставлял работать старые версии плагинов для firefox 2.0.6.
И просьба к админу сайта. Я пару раз обращался на ФТП по wp, но разобраться так и не смог. Делаю интернет магазин (). Грузится оочень долго. Были проделаны несколько действий благодаря чему сайт стал загружаться в несколько раз бысрее (не знаю почему именно, но и сейчас время загрузки оставляет желать лучшего).
1. Отключил wp-supercache
2. Удалил все файлы (из папки cache)
3. Удалил из темы подключаемы js
Тема hamakasi. Если не вас не затруднит, просмотрите и сообщите есть ли какие идеи по оптимизации?
DofinЦитировать
Способов оптимизировать сайт довольно много. Я рекомендую вам пройти тест на сайте и вам покажут что и как можно еще ужать.
Лично я советую сжать все CSS файлы
и запаковать JS файлы с помощью . И от кеширования вы зря отказались – это только увеличит загрузку, ведь лучше если сайт один раз загрузиться, а в остальные разы будет подгрузаться из кеша. Думаю на том сайте по оптимизации загрузки вы найдете много полезного.
АвторЦитировать
И еще заметила, что у вас keywords генеряться 2 раза – simple tags и platinum seo pack.
АвторЦитировать
Файрбаг – незаменимая штука.
(открываю файрбаг и пишу используемые вкладки)
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 =)
ieroglifЦитировать
У меня версия плагина 1.2.1 ФФ3. Отстутсвуют пункты в менюшке, отвечающие за отключение плагина для сайтов! Что делать?
КатяЦитировать
Не совсем поняла вопроса. FireBug по умолчанию отключен и работает только тогда, когда вы непосредственно работаете с ним на каком-то сайте.
АвторЦитировать
Если вы хотите его совсем отключить для конкретного сайта, откройте вкладку Console и выберите Sites, там можно добавить сайт.
АвторЦитировать
Спасибо, уже разобралась :). Только я через вкладку Net; всё же новый firebug имеет другое меню, в этом произошла путаница для меня. Вот тут нашла решение:
КатяЦитировать
Спасибо! Намного облигчилась работа с css
MaratЦитировать
Постоянно пользуюсь при отладке но иногда хочется чтото более удобное . особенно когда паришся с асинхронными событиями
ДальЦитировать
Первый день тестю firebug, не поятно только как сохранить изменения после редактирования HTML-кода , когда что то изменяю в коде видно это видно на странице, но вот как сохранить изменения не понятно: делаю так – view->обновить Ctrl+R , затем обновляю и страницу но изменений которые вносил не сохраняются . Подскажите пожалуйста как сохранить изменения.Спасибо.
LavrЦитировать
Сохранение изменений не предусмотрено, можно только править при просмотре. Обновление страницы естественно приведет к потере всех исправлений. А зачем вообще обновлять, когда вы правите?
АвторЦитировать
Может я не правильно сформулировал . Ну хорошо… спрошу по другому , что бы и самому было понятно :-)
Как сохранить исправленное???
LavrЦитировать
Никак :) Говорю же, сохранение изменений не предусмотрено.Если это ваш сайт – проделайте все необходимые операции в фаирбаге, а затем тоже самое в реальном коде.
АвторЦитировать
Спасибо , понял.
LavrЦитировать
Уже давным давно юзаю Firebug, и кстати не знал про закладку Net. Юзал webo.in для проверки скорости. Теперь буду знать, спасибо!
AnstakЦитировать
А у меня что то этот Firebug начал жутко тормозить, практически невозможно работать.
Web-мастерЦитировать
Не могу скачать 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)
EgorЦитировать
Попробуйте прямую ссылку
Если будет ругаться на ssl, скачайте просто из другого браузера, а затем перетащите мышкой в FF и плагин установится.
АвторЦитировать
Спасибо за ответы!!!! Но правда я в Google ввел эту ошибку, а он мне выдал ответ (правда на английском языке). Короче требовалось удалить профиль FireFox. но т.к. я этого делать не умею, взял его удалил вместе с профилем и установил заново. И все ОК!!!! Нормально заходит и скачивает плагины!
У меня теперь другая проблема, на FTP сервере, не получается в некоторые папки зайти, там папки которые имеют адрес типа в них заходит нормально, а некоторые адреса толи с гиперссылками (не знаю как называются), такого типа: . В них не заходит и выдает ошибку :550 /Software/???????µ?????µ??: No such file or directory.Тоесть я думаю что фокс не понимает в имени адреса символы, например %, а тот же explorer нормально с этими адресами работает, почему так, мож кто знает…?
EgorЦитировать
FF по умолчанию кодирует все ссылки в UTF-8, поэтому русские символы не читабельны. Честно говоря не сталкивалась с этим (не пользуюсь фтп через FF), вот что нашла по теме, почитайте
АвторЦитировать
Спасибо прочитал, правда ответа там нет. все способы решения, предложенные на форуме, не помогают))) но все равно спс!
EgorЦитировать
Все достоинства Firebug перечёркиваются двойной линией из-за отсутствия возможности вносить изменения в файлы…
Крайне неудобно ковырять в Firebug 180кб стиль а затем вспоминать в блокнотике что да где править…
Или я чего-то не знаю?
Кин100нTEENЦитировать
* РЕШЕНО!Сохранять изменения можно…
– собственно..– ps: Админ закрой дыру в двиге. Легко подделать время сообщения (см. моё сообщение выше)
Кин100нTEENЦитировать
А для оперы есть похожие плагины, уж больно с нее слазить не охото)
DolphЦитировать
посмотрите тут
АвторЦитировать
Какая связка версий Firefox+Firebug наиболее стабильна? Ставлю самые последние версии — ничего не работает. То есть значок внизу браузера не реагирует…
AdrianoffЦитировать
у меня все версии всегда работали. Думаю дело в пользовательских настройках FF. Удалите полностью FF и установите новый в другое место. Новый Firebug должен работать с последней версии.
Блог для вебмастеровЦитировать
Вся беда в том, что не работают… жучок внизу справа не активен:( Сносил FF…
AdrianoffЦитировать
у меня стоит FF 3.5.1 и Firebug 1.4.1
Откройте пункт меню Инструменты -> Firebug -> Открыть Firebug
или просто нажмите F12 в FF
Жучок серый, но открывается при нажатии.
Блог для вебмастеровЦитировать
Поставил версии 3.5.1 и 1.4.1 — все равно не активен. даже если открывать через Инструменты. Может какие-нибудь настройки?
AdrianoffЦитировать
Не активен – всмысле не открывается панелька файрбага снизу?
Я никаких дополнительных настроек не делала. Попробуй полазить по опциям файрбага через Инструменты, там вроде есть “Сбросить настройки”
Блог для вебмастеровЦитировать
В том то и самый большой прикол: настройки не активны! то есть если лезть через Инструменты то вкладка Firebug просто не активна, не нажимается. Панелька снизу также не открывается :(
AdrianoffЦитировать
@Adrianoff,
даже не знаю что пожсказать :( Попробуй написать в саппорт им
Блог для вебмастеровЦитировать
Adrianoff, у меня такая же проблема!
Не работает этот Firebug, хоть ты тресни! :(
вот именно в Инструментах менюшка справа не открывается и внизу значек серого жучка не кликабелен! Переставляла Firefox версий от 3.0 до 3.5.4 и нигде не работает. Пыталась отключать все плагины в настройках, заходила в сейф-моде, не знаю в чем проблема и нигде не могу найти ответа!
МарияЦитировать
Я так и не понял в чем причина!
AdrianoffЦитировать
Класно! Нашел, наконец толковый блог на просторах интернета) Ура!
ugfrdfЦитировать
а скажите пожалуйста как там после всех изменений сохранять всё это дело ?
РинатЦитировать
У вас конечно много чего упрощено, в отличии от реалий…
ТравинЦитировать
Довольно, ожидаемая статья
Jean-Claude Van DammeЦитировать
Не поспоришь, глубокая заметка
acaccmlzdaЦитировать
В принципе, написавший качественно накропал.
AdminЦитировать
Установил сегодня впервые эту прогу.
Очень понравилась.
Если со стилями все понятно. Они возникают справа и там же показан файл с номером строки, в котором это всё дело править.
А как быть если мне нужно поменять допустим не стиль, а убрать в cms какой нибудь мне не нужный блок? Код его программа показывает, а вот название файла в котором это править не ясно. Как тут быть ?
OboPoTEHbЦитировать
Только начал пользоваться Файрбагом, (одновременно с джумлой xD)
Подскажите плс, можно ли узнать в каком файле хранится просмотриваемый код.
Например: нажимаю на логотип своего сайта, файрбаг показывает мне код, я меняю её, но, изменения не вступают в силу, как мне узнать, в каком файле хранится код данного логотипа? Заранее спасибо
J.AЦитировать
все изменения происходят динамически и не хранятся. Изменения происходят не на сайте, а просто в режиме просмотра страницы. Чтобы увидеть новый код на сайте, вы и править должны на сайте. FB только для тестов.
Блог для вебмастеровЦитировать
Как мне узнать, в каком файле хранится код данного логотипа (ТЕКСТА)? Заранее спасибо!
ОлегЦитировать