Все, что вы хотели знать о 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-запросов. Но и для верстки он незаменим. Вообщем не знаю, что бы я без него делал
Цитировать
печально что этот незаменимый плагин не работает в Firefox3rc1…
Цитировать
У меня работает в RC2, ставьте
Цитировать
спасибо
Цитировать
а фишку – постоянного обращения к серверу лучше просто отрубать;) в Firefox все работает.
Цитировать
Да, плагин очень полезный, но меня интересует следующий вопрос: можно ли через firebug редактировать страницы? Просто после обновления страницы все изменения пропадают…подскажите пожалуйста.
Цитировать
Редактировать страницы можно, но для этого не нужно их обновлять, изменение на странице происходит сразу после редактирования.
Цитировать
А вы попробуйте распаковать плагин и прописать версию вручную. Помню так заставлял работать старые версии плагинов для firefox 2.0.6.
И просьба к админу сайта. Я пару раз обращался на ФТП по wp, но разобраться так и не смог. Делаю интернет магазин (). Грузится оочень долго. Были проделаны несколько действий благодаря чему сайт стал загружаться в несколько раз бысрее (не знаю почему именно, но и сейчас время загрузки оставляет желать лучшего).
1. Отключил wp-supercache
2. Удалил все файлы (из папки cache)
3. Удалил из темы подключаемы js
Тема hamakasi. Если не вас не затруднит, просмотрите и сообщите есть ли какие идеи по оптимизации?
Цитировать
Способов оптимизировать сайт довольно много. Я рекомендую вам пройти тест на сайте и вам покажут что и как можно еще ужать.
Лично я советую сжать все 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 =)
Цитировать
У меня версия плагина 1.2.1 ФФ3. Отстутсвуют пункты в менюшке, отвечающие за отключение плагина для сайтов! Что делать?
Цитировать
Не совсем поняла вопроса. FireBug по умолчанию отключен и работает только тогда, когда вы непосредственно работаете с ним на каком-то сайте.
Цитировать
Если вы хотите его совсем отключить для конкретного сайта, откройте вкладку Console и выберите Sites, там можно добавить сайт.
Цитировать
Спасибо, уже разобралась :). Только я через вкладку Net; всё же новый firebug имеет другое меню, в этом произошла путаница для меня. Вот тут нашла решение:
Цитировать
Спасибо! Намного облигчилась работа с css
Цитировать
Постоянно пользуюсь при отладке но иногда хочется чтото более удобное . особенно когда паришся с асинхронными событиями
Цитировать
Первый день тестю firebug, не поятно только как сохранить изменения после редактирования HTML-кода , когда что то изменяю в коде видно это видно на странице, но вот как сохранить изменения не понятно: делаю так – view->обновить Ctrl+R , затем обновляю и страницу но изменений которые вносил не сохраняются . Подскажите пожалуйста как сохранить изменения.Спасибо.
Цитировать
Сохранение изменений не предусмотрено, можно только править при просмотре. Обновление страницы естественно приведет к потере всех исправлений. А зачем вообще обновлять, когда вы правите?
Цитировать
Может я не правильно сформулировал . Ну хорошо… спрошу по другому , что бы и самому было понятно :-)
Как сохранить исправленное???
Цитировать
Никак :) Говорю же, сохранение изменений не предусмотрено.Если это ваш сайт – проделайте все необходимые операции в фаирбаге, а затем тоже самое в реальном коде.
Цитировать
Спасибо , понял.
Цитировать
Уже давным давно юзаю Firebug, и кстати не знал про закладку Net. Юзал webo.in для проверки скорости. Теперь буду знать, спасибо!
Цитировать
А у меня что то этот Firebug начал жутко тормозить, практически невозможно работать.
Цитировать
Не могу скачать Firebug скажем с сайта getfirebug. com пишет что “ошибка при установлении защищенного соединения” у меня стоит версия фокса 1.9.0.3105.
я ниразу не устанавливал на него плагины(и вообще страницы не редактировал раньше). Подскажите может что не так делаю, или может версия firefox не подходит.
Цитировать
Думаю вам пора обновить браузер….
Цитировать
я ошибся с версией)) у меня стоит 3.0.1 (просто сначала посмотрел в Program Files, куда у меня установлен фокс, там стоит: версия файла 1.9.0.3105.)
Цитировать
вот что он мне дословно пишет когда хочу скачать FireBug:Ошибка при установлении защищённого соединения
При соединении с addons.mozilla.org произошла ошибка.Не удалось установить защищённое соединение, так как была отключена поддержка протокола SSL.(Код ошибки: ssl_error_ssl_disabled)
Цитировать
Попробуйте прямую ссылку
Если будет ругаться на ssl, скачайте просто из другого браузера, а затем перетащите мышкой в FF и плагин установится.
Цитировать
Спасибо за ответы!!!! Но правда я в Google ввел эту ошибку, а он мне выдал ответ (правда на английском языке). Короче требовалось удалить профиль FireFox. но т.к. я этого делать не умею, взял его удалил вместе с профилем и установил заново. И все ОК!!!! Нормально заходит и скачивает плагины!
У меня теперь другая проблема, на FTP сервере, не получается в некоторые папки зайти, там папки которые имеют адрес типа в них заходит нормально, а некоторые адреса толи с гиперссылками (не знаю как называются), такого типа: . В них не заходит и выдает ошибку :550 /Software/???????µ?????µ??: No such file or directory.Тоесть я думаю что фокс не понимает в имени адреса символы, например %, а тот же explorer нормально с этими адресами работает, почему так, мож кто знает…?
Цитировать
FF по умолчанию кодирует все ссылки в UTF-8, поэтому русские символы не читабельны. Честно говоря не сталкивалась с этим (не пользуюсь фтп через FF), вот что нашла по теме, почитайте
Цитировать
Спасибо прочитал, правда ответа там нет. все способы решения, предложенные на форуме, не помогают))) но все равно спс!
Цитировать
Все достоинства Firebug перечёркиваются двойной линией из-за отсутствия возможности вносить изменения в файлы…
Крайне неудобно ковырять в Firebug 180кб стиль а затем вспоминать в блокнотике что да где править…
Или я чего-то не знаю?
Цитировать
* РЕШЕНО!Сохранять изменения можно…
– собственно..– ps: Админ закрой дыру в двиге. Легко подделать время сообщения (см. моё сообщение выше)
Цитировать
А для оперы есть похожие плагины, уж больно с нее слазить не охото)
Цитировать
посмотрите тут
Цитировать
Какая связка версий Firefox+Firebug наиболее стабильна? Ставлю самые последние версии — ничего не работает. То есть значок внизу браузера не реагирует…
Цитировать
у меня все версии всегда работали. Думаю дело в пользовательских настройках FF. Удалите полностью FF и установите новый в другое место. Новый Firebug должен работать с последней версии.
Цитировать
Вся беда в том, что не работают… жучок внизу справа не активен:( Сносил FF…
Цитировать
у меня стоит FF 3.5.1 и Firebug 1.4.1
Откройте пункт меню Инструменты -> Firebug -> Открыть Firebug
или просто нажмите F12 в FF
Жучок серый, но открывается при нажатии.
Цитировать
Поставил версии 3.5.1 и 1.4.1 — все равно не активен. даже если открывать через Инструменты. Может какие-нибудь настройки?
Цитировать
Не активен – всмысле не открывается панелька файрбага снизу?
Я никаких дополнительных настроек не делала. Попробуй полазить по опциям файрбага через Инструменты, там вроде есть “Сбросить настройки”
Цитировать
В том то и самый большой прикол: настройки не активны! то есть если лезть через Инструменты то вкладка Firebug просто не активна, не нажимается. Панелька снизу также не открывается :(
Цитировать
@Adrianoff,
даже не знаю что пожсказать :( Попробуй написать в саппорт им
Цитировать
Adrianoff, у меня такая же проблема!
Не работает этот Firebug, хоть ты тресни! :(
вот именно в Инструментах менюшка справа не открывается и внизу значек серого жучка не кликабелен! Переставляла Firefox версий от 3.0 до 3.5.4 и нигде не работает. Пыталась отключать все плагины в настройках, заходила в сейф-моде, не знаю в чем проблема и нигде не могу найти ответа!
Цитировать
Я так и не понял в чем причина!
Цитировать
Класно! Нашел, наконец толковый блог на просторах интернета) Ура!
Цитировать
а скажите пожалуйста как там после всех изменений сохранять всё это дело ?
Цитировать
У вас конечно много чего упрощено, в отличии от реалий…
Цитировать
Довольно, ожидаемая статья
Цитировать
Не поспоришь, глубокая заметка
Цитировать