Как пользоваться дополнением Firebug для Firefox? Браузер Mozilla Firefox не запускается: основные способы устранения проблемы

Достаточно частая ситуация: вы дважды щелкнули по ярлыку Mozilla Firefox на рабочем столе или открыли данное приложение из панели задач, но столкнулись с тем, что браузер отказывается запускаться.

К сожалению, проблема, когда браузера Mozilla Firefox отказывается запускаться, достаточно нередкая, и на ее появление могут влиять разнообразные причины. Сегодня мы рассмотрим основные причины, а также способы устранения проблем с запуском Mozilla Firefox.

Вариант 1: «Firefox запущен и не отвечает»

Одна из наиболее частых ситуаций неработоспособности Firefox, когда вы пытаетесь запустить браузер, но вместо этого получаете сообщение «Firefox запущен и не отвечает» .

Как правило, подобная проблема появляется после предыдущего некорректного закрытия браузера, когда он продолжает выполнять свои процессы, таким образом, не давая начать новую сессию.

Прежде всего, нам потребуется завершить все процессы Firefox. Для этого нажмите сочетание клавиш Ctrl+Shift+Esc , чтобы открыть «Диспетчер задач» .

В открывшемся окне вам потребуется перейти ко вкладке «Процессы» . Найдите процесс «Firefox» («firefox.exe»), щелкните по нему правой кнопкой мыши и в отобразившемся контекстном меню выберите пункт «Снять задачу» .

Если найдете и другие процессы, связанные с Firefox, их также потребуется завершить.

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

Если Mozilla Firefox так и не запустился, по-прежнему выдавая ошибку «Firefox запущен и не отвечает», то в некоторых случаях это может говорить о том, что у вас отсутствуют необходимые права доступа.

Чтобы проверить это, вам потребуется попасть в папку профиля. Сделать это, конечно, проще с помощью самого Firefox, но учитывая, что браузер не запускается, будем использовать другой способ.

Нажмите на клавиатуре одновременное сочетание клавиш Win+R . На экране отобразится окно «Выполнить», в котором потребуется ввести нижеприведенную команду и нажать клавишу Enter:

%APPDATA%\Mozilla\Firefox\Profiles\

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

Щелкните правой кнопкой мыши по профилю Firefox и в отобразившемся контекстном меню перейдите к пункту «Свойства» .

На экране отобразится окно, в котором вам потребуется перейти ко вкладке «Общие» . В нижней области окна убедитесь, что у вас отмечен пункт «Только для чтения» . Если галочка (точка) около данного пункта отсутствует, ее необходимо выставить самостоятельно, а затем сохранить настройки.

Вариант 2: «Ошибка считывания конфигурационного файла»

Если на экране после попытки запуска Firefox отображается сообщение «Ошибка считывания конфигурационного файла» , то это означает, что возникли проблемы с файлами Firefox, и самый простой способ решить проблему – переустановить Mozilla Firefox.

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

Откройте проводник Windows и удалите следующие папки:

C:\Program Files\Mozilla Firefox

C:\Program Files (x86)\Mozilla Firefox

И только после того, как вы завершите удаление Firefox, можно приступать к загрузке новой версии с официального сайта разработчика.

Вариант 3: «Ошибка открытия файла для записи»

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

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

Просто щелкните по ярлыку Firefox на рабочем столе правой кнопкой мыши и в отобразившемся контекстном меню щелкните по пункту «Запуск от имени администратора» .

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

Вариант 4: «Ваш профиль Firefox не может быть загружен. Он может быть поврежден или недоступен»

Подобная ошибка нам явно намекает, что существуют проблемы с профилем, например, он недоступен или вовсе отсутствует на компьютере.

Как правило, подобная проблема возникает в том случае, если вы переименовывали, перемещали или вовсе удаляли папку с профилем Firefox.

Исходя из этого, у вас есть несколько способов решения проблемы:

1. Переместите профиль на прежнее место, если вы его до этого перемещали;

2. Если вы переименовывали профиль, то ему необходимо задать прежнее имя;

3. Если вы не можете использовать первые два способа, то вам потребуется создать новый профиль. Следует учитывать, что создав новый профиль, вы получите чистый Firefox.

Для того, чтобы приступить к созданию нового профиля, откройте окно «Выполнить» сочетанием клавиш Win+R . В данном окошке вам потребуется провести следующую команду:

firefox.exe -P

На экране отобразится окно управления профилями Firefox. Нам потребуется прибегнуть к созданию нового профиля, поэтому жмем по кнопке «Создать» .

Введите имя для профиля, а также, при необходимости, в этом же окне укажите месторасположение на компьютере, где и будет храниться папка с профилем. Завершите создание профиля.

На экране снова отобразится окно управления профилями Firefox, в котором вам потребуется выделить новый профиль, а затем щелкнуть по кнопке «Запуск Firefox» .

Вариант 5: ошибка, сообщающая о падении Firefox

Подобная проблема проявляется, когда вы запускаете браузер. У вас даже может появиться его окно, но резко приложение закрывается, и на экране отображается сообщение о падении Firefox.

В данном случае падение Firefox могут вызывать различные факторы: вирусы, установленные дополнения, темы и т.д.

Прежде всего, в данном случае вам потребуется выполнить сканирование с помощью вашего антивируса или специальной лечащей утилиты, например, Dr.Web CureIt .

После выполнения сканирования обязательно перезагрузите компьютер, а затем проверьте работоспособность браузера.

Если проблема осталась, то стоит попробовать выполнить полную переустановку браузера, предварительно полностью удалив веб-обозреватель с компьютера.

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

Вариант 6: «Ошибка XULRunner»

Если при попытке запуска Firefox на вашем экране отображается ошибка «Ошибка XULRunner», то это может говорить о том, что на вашем компьютере установлена неактуальная версия Firefox.

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

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

Вариант 7: не открывается Мозила, но при этом не выдает ошибки

1) Если прежде браузер работа нормально, но в какой-то момент перестал запускаться, самый действенный способ устранить проблему – это выполнить восстановление системы.

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

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

В открывшемся окне выберите пункт «Запуск восстановления системы» и подождите несколько мгновений.

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

2) На возникновение проблем с работой Firefox могут влиять некоторые антивирусные продукты. Попробуйте приостановить их работу и проверить работоспособность Firefox.

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

3) Попробуйте запустить Firefox в безопасном режиме. Для этого зажмите клавишу Shift и щелкните по ярлыку браузера.

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

Для начала отключите работу всех дополнения браузера. Для этого щелкните в правом верхнем углу по кнопке меню, а затем в отобразившемся окне перейдите к разделу «Дополнения» .

В левой области перейдите ко вкладке «Расширения» , а затем отключите работу всех расширений. Будет нелишним, если вы их и вовсе удалите из браузера.

Если у вас установлены сторонние темы для Firefox, попробуйте вернуться к стандартной теме. Для этого перейдите ко вкладке «Внешний вид» и сделайте тему «Стандартная» темой по умолчанию.

И, наконец, попробуйте отключить аппаратное ускорение. Для этого откройте меню браузера и перейдите к разделу «Настройки» .

В левой области окна перейдите ко вкладке «Дополнительные» , а затем откройте подвкладку «Общие» . Здесь вам потребуется снять галочку с пункта «По возможности использовать аппаратное ускорение» .

После выполнения всех действий откройте меню браузера и в нижней области окна щелкните по иконке «Выход» . Попробуйте запустить браузер в обычном режиме.

4) Выполните переустановку браузера и создание нового профиля. О том, как данную задачу осуществить, уже рассказывалось выше.

И небольшое заключение. Сегодня мы рассмотрели основные способы устранения проблем с запуском браузера Mozilla Firefox. Если у вас есть свой метод устранения проблемы, поделитесь о нем в комментариях.

Сам я являюсь давним поклонником Opera, еще с тех времен, когда она была платной. По моему мнению, для серфинга по сети не найти.

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

Плагины для браузеров, помогающие вебмастерам

Файрбаг изначально являлся расширением только для и он позволял существенно снизить время на нахождение и исправление нужного фрагмента в Html коде, а если вы начинающий вебмастер или структура файлов движка CMS (системы управления контентом) вам совершенно незнакома, то я вообще не представляю, как можно обойтись без него.

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

Вот и приходилось мне раньше жить на два дома. В Opera я бродил по интернету, а в Firefox — работал над своими проектами, постоянно используя возможности расширения, о котором сегодня пойдет речь.

Но кроме верстальных дополнений для браузеров вам, наверняка, при работе с вашими проектами могут понадобиться и SEO расширения, позволяющие оперативно отследить PR и ТИЦ открываемых в обозревателе страниц, посмотреть закрыты или нет для индексации поисковиками внешние ссылки на этих страницах (особенно это интересно при комментировании блогов и поиске так называемых Dofollow блогов) и многое другое (ссылки на них смотрите в самом начале статьи).

Если уж речь зашла о браузерах, то мне очень понравился новый — быстрый, даже в сравнение с Opera, удобный и красивый, но пока я еще не разобрался, есть ли к нему , что я опишу ниже.

Firebug — это не просто дополнение, добавляющее какой либо расширенный функционал вашему Фаерфоксу. Очень верно про это написано на странице разработчиков — это эволюция web-разработки.

Да, это именно так. Эволюция — это когда вы переходите от палки-копалки к экскаватору. Эффект потрясающий и вы это сразу почувствуете, начав использовать этот плагин. Ну, пожалуй, хватит петь дифирамбы, пора рассказать про его возможности. Скачать Фаербаг вы можете со страницы аддонов . На данный момент актуальной версией является 1.11.4.

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

Затем вам нужно будет зайти в Мазилу, из верхнего меню выбрать «Файл» — «Открыть файл» и найти на вашем жестком диске скачанный файл. В результате опять же начнется процесс установки.

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

Бывает, что вам нужно что-то поменять, доделать, исправить, просто посмотреть как это реализовано и работает на своем или чужом ресурсе. Да, да, вы не ослышались, именно на чужом ресурсе. Понравилось вам то или иное решение вебмастера и вы хотите сделать у себя так же — Фаербаг вам поможет.

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

Как пользоваться Firebug при верстании сайта

А он предлагает вам щелкнуть по интересующему месту вебстраницы, опять же правой кнопкой, и выбрать из контекстного меню — «Анализировать элемент» (в англоязычной версии плагина это будет “Inspect”). И вам, о чудо, откроется в его окне только тот участок кода страницы, который отвечает за формирование именно того элемента, который вам интересен. Удобно?

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

Так же обратите внимание на подчеркнутую мною на рисунке красной линией строку, начинающуюся с слова «Редактировать» в окне Фаербага. Если вы щелкните по этому слову, то сможете внести изменения в выделенный фрагмент Html кода, которые тут же отобразятся на странице.

Измените, например, в окне плагина url картинки на намерено несуществующий и картинка исчезнет с вебстраницы, вернете все обратно и картинка появится. Но обратите внимание — эти изменения никак не отразятся на вашем ресурсе, все изменения увидите только вы и только на этой вебстранице, подчиненной всемогущему огненному жуку. Как только вы обновите страницу, то все внесенные плагином изменения исчезнут.

С помощью Firebug можно смоделировать то, что может произойти при изменении Html или CSS кода вебстраницы. Вы можете таким образом, с помощью его возможностей, посмотреть (не тратя времени на поиск файла движка вашей CMS, отвечающего за вывод этого участка) разные варианты и выбрать нужный, или же вообще отказаться от изменения, если текущий вариант окажется не так уж и плох.

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

Проблема поиска нужного участка кода в файлах движка

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

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

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

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

При осуществлении поиска по содержимому файлов в Тотал Коммандере, может возникнуть проблема с русскими словами, а точнее их кодировкой. Если Total commander ничего не нашел по вашему запросу на русском, поставьте галочку напротив «UTF-8» в окне поиска и все найдется.

Возможности и принципы использования Firebug

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

Кроме описанного чуть выше способа (щелкнуть по интересующему месту вебстраницы правой кнопкой и выбрать из контекстного меню - «Анализировать элемент») это расширение можно вызвать к жизни и простым нажатием на иконку паучка в правом нижнем углу окна браузера или же с помощь клавиши F12. Повторное нажатие по этой клавиши приведет к закрытию окна Фаербага.

Если вы хотите, чтобы плагин открылся в отдельном окне, то щелкайте по паучку удерживая Shift на клавиатуре или используйте сочетание клавиш Ctrl+F12. Вы сами выберите наиболее удобный для вас вариант вызова к жизни этого шедевра инженерной мысли. Окно его будет выглядеть у вас примерно так:

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

Как использовать Фаербаг для изучения HTML

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

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

Для осуществления всего того, что я только что описал, нам понадобится информация, отображаемая в левой половине окна плагина, где отображаются теги данной вебстраницы открытой в браузере. Там Вы можете наглядно видеть вложенность друг в друга тех или иных тегов, например, контейнеров DIV.

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

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

Как видно из приведенного выше скриншота, контейнер

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

Все это будет динамично отображать в окне данного расширения в соответствии с перемещением мыши по вебстранице. Очень наглядный и удобный способ использования огненного жука для изучения особенностей построения своего или чужого веб проекта.

Для реализации этого способа нужно будет только активировать соответствующий режим, нажав на показанную на рисунке кнопку панели:

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

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

При этом, естественно, никаких изменений в реальных файлах движка сайта производиться не будет. Но зато, вы сможете в реальном времени промоделировать различные варианты построения дизайна вебстраницы. Если же новый, смоделированный с помощью Firebug вариант вас устроит, то придется вносить изменения уже в реальные файлы движка, найти которые вы сможете,используя описанный чуть выше способ с участием Total commander.

Как использовать Firebug для работы с CSS

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

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

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

Расположенные в правой части свойства можно редактировать точно так же, как мы редактировали теги в левой части окна этого расширения. Все внесенные изменения в свойства из правой области будут тут же отображаться на открытой в Мазиле вебстранице, но ни как не повлияют на реальные свойства CSS, прописанные в файле таблиц каскадных стилей, имя которого вы можете видеть над данным блоком:

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

Как измерить скорость загрузки сайта в Фаербаге

Ну и напоследок, хотел бы рассказать о том, как с помощью этого расширения измерять скорость сайта (не путайте с ).

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

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

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

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

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

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

Плагин этот называется и имеет просто огромное количество всевозможных инструментов, позволяющих упростить работу по верстке или корректировки шаблона вашего веб ресурса. Ну, а дальше мы перейдем к рассмотрению SEO плагинов для FireFox и Opera.

Можете также посмотреть видео по теме, которое лишним уж, наверняка, не будет:

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на

Вам может быть интересно

Web Developer для Firefox - установка и возможности плагина для верстальщиков и вебмастеров
SEObar - удобный и информативный SEO плагин для Оперы Как вести поиск по содержимому файлов в Total Commander
Расширения и темы для Google Chrome

9 ответов

Мне удалось снова запустить Firebug, так что вот что я сделал.

Всем известно, что Firebug не разрабатывается и не поддерживается больше, потому что он не может работать с e10s, так что вот мое обходное решение:

Загрузите версию для разработчиков Firefox , чтобы вы могли разрешить установку XPI.
firefox-53.0a2.en-US.win64.installer.exe или firefox-53.0a2.en-US.win32.installer.exe

Запустите версию разработчика Firefox после установки и перейдите в about: config (введите строку url)
Найдите xpinstall.signatures.required (установите значение false )
Найти browser.tabs.remote.autostart
( установить все в false: browser.tabs.remote.autostart.1 и browser.tabs.remote.autostart.2)

ПРИМЕЧАНИЕ. Архитектура с несколькими процессами улучшает стабильность, производительность и безопасность браузера, разделяя задачи на процессы, отключая их на себя.

После этого вам нужно перезапустить браузер.

• Теперь вы можете пойти в репозиторий Firebug и установить желаемую версию

Я выбрал последний firebug-2.0b8.xpi, и он отлично работает.

P.S. Вы можете отключить обновления для версии Firefox Developer.
Надеюсь, что это поможет.

Обновление 2

У меня была такая же проблема, когда я обновлял Firefox. Я был настолько зависим от firebug, но я перешел к версии разработчика Firefox - https://www.mozilla.org/en-US/firefox/developer/

Он также имеет тему firebug, которая напоминает интерфейс Firebug и его эффективность. Просто установите FDE и активируйте тему firebug, как показано на рисунке ниже:

Эта страница говорит, что [внимание мое]:

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

Тот факт, что Firebug фактически не работает в многопроцессорном Firefox, будет учитывать разные люди, имеющие различный опыт работы с Firebug или не работающими в определенной версии Firefox. Firefox, автоматически включающий многопроцессорный режим, будет зависеть от нескольких факторов, в том числе от того, какие другие надстройки установлены в профиле.

Использование Firebug в новых версиях Firefox

Таким образом, чтобы использовать Firebug в более новых версиях Firefox, вам нужно отключить Firefox от входа в режим многопроцессорности . Это можно сделать со страницы about:preferences (также доступной из Tools➞Options). Этот параметр находится под вкладкой "Общие" как "Включить многопроцессорный Firefox...". Если многопроцессор недоступен, этот параметр не будет отображаться. Эта опция также может быть изменена путем настройки предпочтения browser.tabs.remote.autostart от about:config . [Примечание: browser.tabs.remote.autostart.2 и browser.tabs.remote.autostart.1 также отображаются для обозначения состояний по умолчанию, поэтому я предлагаю использовать страницу about:preferences для изменения этой опции.]

Вы можете определить, работает ли ваш Firefox в многопроцессорном режиме, просмотрев about:support . В строке "Многопроцессорные окна" в разделе "Основы приложения" указывается, включен ли или отключен многопроцессор.

Настроить профили явно для тестирования

Лично у меня есть разные профили, настроенные для каждого из многопроцессорных явственно отключенных и многопроцессор явно включен (установите browser.tabs.remote.force-enable в true), поэтому я могу выполнять тестирование в обоих условиях, причем состояние многопроцесса, которое включено/отключено, известно заранее.

У меня был такой же неожиданный сюрприз, когда ubuntu обновил FFX, и вдруг такие вещи, как панель script, перестали работать. Поскольку я был в середине работы над чем-то с коротким сроком, я не собирался иметь роскошь изучать набор инструментов разработчика firefox и отчаянно нуждался в том, чтобы работать с firebug. Исправление, которое, наконец, работало для меня, заключалось в том, чтобы установить предпочтения Firefox не обновляться. Затем загрузите v 49.0.2

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

Первым делом Firebug

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

Firebug создан программистом Джо Хевиттом и, как мы уже говорили, предназначен для инспекции ошибок веб-страниц - разметки HTML, стилей CSS, сценариев JavaScript. Также при помощи этого расширения можно оценить проблемные места при загрузке страницы в браузер.

Firebug (getfirebug.com) устанавливается как расширение для Firefox. После установки в правом нижнем углу браузера появится иконка жука, кликнув на который, внизу обозревателя откроется специальное окно. В зависимости от режима работы, с правой стороны может появляться второе дополнительное окно. Firebug может запускаться и как самостоятельное приложение, что удобно для обладателей двух мониторов.

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

Рассмотрим работу в каждом из режимов подробнее.

Отладка HTML. Инспектировать HTML-страницу при помощи Fireburg - одно удовольствие. Нажимаем в главном меню иконку со стрелочкой, наводим курсор на элемент веб-страницы, и тут же в окне HTML появится подсвеченный код этого элемента. И уже не нужно мучительно долго искать глубоко скрытый в коде проблемный элемент. Также в правом вспомогательном окошке появятся дополнительные сведения о стиле, расположении элемента и его свойствах DOM.

Содержимое подсвеченного элемента лёгким движением руки можно тут же отредактировать и сразу же увидеть произведённые изменения.

Поддерживается сворачивание ("фолдинг") кода. Также "Огнежук" позволяет активно использовать кнопки Tab и "вверх-вниз". Tab используется для перемещения по атрибутам элемента при редактировании. А при помощи клавиш "вверх", "вниз" можно переключать значение атрибутов. То есть Firebug увеличит или уменьшит значение числового атрибута на 1, если нажать, соответственно, "вверх", "вниз".

Важным является специальная вкладка в дополнительном вторичном окне под названием "Макет". Каждый элемент веб-страницы содержится в последовательно вложенных контейнерах margin, border, padding. Вкладка "Макет" отражает в виде символических разноцветных прямоугольников сами эти контейнеры. Изменять их значения можно точно так же, как и значения других элементов html, и тут же видеть, как меняется при этом вид страницы.

Редактирование CSS. Ремонтировать стили CSS можно как во вторичном окне режима HTML, так и в отдельном собственном режиме. Редактирование CSS тоже очень удобное: здесь можно и нужно пользоваться клавишами "вверх- вниз". Это позволяет изменять не только значения селекторов CSS, но и сами селекторы, так как Firebug содержит полный словарь ключевых слов каскадных таблиц стилей.

Любое свойство CSS можно быстро отключить и обратно включить, нажимая появляющуюся слева при наведении курсора на CSS-свойство серенькую кнопку.

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

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

"Огнежук" демонстрирует график загрузки по каждому файлу. На графиках разными цветами будет отображаться время http-запроса, время получения данных, время ожидания данных.

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

Отладчик JavaScript. Firebug - это мощный отладчик для сценариев JavaScript. Для этой отладки существует специальный отдельный режим "Сценарии". Здесь имеется возможность устанавливать брейкпоинты одним кликом на номере строки кода. Причём брейкпоинты могут быть условные, то есть, например, срабатывать только при нажатии кнопки на странице.

При отладке во время точек останова в дополнительном окне будет демонстрироваться стек вызовов функций, что ждут возврата. А во вкладке "Наблюдения" дополнительного окна отобразятся значения объектов DOM.

Консоль. Очень классная вещь. Консоль Fireburg - это практически как bash в Linux. Представляет собой командную строку. Здесь можно набирать и выполнять команды JavaScript как по отдельности, так и целыми сценариями.

Причём консоль Firebug имеет собственные специальные команды. Например, имеется команда console.log, что похожа на printf в "си":

>>> console.log("Hello, world!") Hello, world!

В консоли есть очень важная функция - профилировщик. Этот инструмент помогает измерить производительность сценария. В режиме консоли нужно просто кликнуть на соответствующей кнопке, и, перезагрузив страницу, кликнуть на кнопке "Профилировать" ещё раз. В результате будет выведен детальный отчёт о времени работы каждой функции вашего js-сценария.

Режим DOM (Document Object Model). Объектная модель документа - это то, во что браузер внутри себя превращает загруженную веб-страницу. DOM - это программный интерфейс, позволяющий сценариям JavaScript производить изменения в видимом окне браузера. Окно этого режима Firebug содержит иерархию объектов веб-страницы и позволяет ими манипулировать в реальном времени на лету, не прибегая к услугам той же консоли.

И ещё одной главной фишкой Firebug являются расширения, которым стоит посвятить отдельную статью. Как и сам браузер Firefox, "Огненный жук" может увеличивать свои возможности за счёт дополнительных расширений, начиная с подсветки синтаксиса и заканчивая встроенным справочником HTML. Эта возможность расширений и делает на текущий момент Firebug беспрекословным лидером, по сравнению с другими браузерами.

Альтернатива

Конечно же, конкуренты Firefox тоже не сидят сложа руки, активно работают в этом направлении и предлагают в своих браузерах аналогичную Firebug функциональность. Эта функциональность постоянно совершенствуется, так что приведённые ниже описания, возможно, уже устареют даже на момент выхода этого номера газеты. Поэтому буду краток и обойдёмся без холиварных сравнений.

MS Internet Explorer 8. Аналог Firebug в IE 8 по своему функционалу повторяет большую часть режимов расширения Firefox . Имеется режим HTML с фолдингом и CSS, позволяющий одним кликом выбрать нужный для редактирования элемент на странице, а также наблюдать за изменениями в реальном времени. Имеется дополнительная раскладка - аналог вкладки "Макет". Однако "юниксовые" клавиши tab "вверх-вниз" не задействованы.

Для отладки JavaScript есть соответствующие режимы "Сценарий" и "Профиль". Консоль тоже присутствует скромненько в дополнительной вкладочке. Однако команды console.log не поддерживаются. Возможно, пока не поддерживаются. И весьма досадно, нет режима "Сеть", позволяющего оценить скорость загрузки веб-страницы. Также нет удобного инструмента для инспекции DOM.

Однако есть в средстве разработки IE 8 переключение режимов обозревателя между движком IE 7 и IE 8. Для многих веб-дизайнеров это важная функция.

Apple Safari. Браузер Safari также может похвастать средством, аналогичным Firebug, причём более стильным по дизайну, чем неказистый IE 8. Имеется просмотр HTML, CSS, "Макета элементов". Но навигация и поиск нужного элемента исключительно внутри html-кода. Редактирование атрибутов найденного элемента тоже весьма примитивное без клавиш tab "вверх-вниз". Но имеется при этом просмотр и изменения свойств DOM элемента.

Режим "Сеть" присутствует. Присутствует отладка и профилирование JavaScript. И имеет место быть продвинутая консоль с автодополнением, а также командой console.log.

Google Chrome. Средство разработки в "Хромом" практически аналогично по внешнему виду аналогу из Apple Safari. В третьей версии "гуглобраузера" данная функциональность сильно урезана. Есть только просмотр кода, режим "Сеть" и консоль. Но можно сказать, что средства отладки Google Chrome и Apple Safari будут полностью идентичны и внешне, и внутренне, так как используют один и тот же движок WebKit.

Opera Dragonfly. "Стрекозоид" браузера Opera практически повторяет интерфейс "Огненного жука" с главным и дополнительным окном. Просмотр html-кода и стилей осуществляется в единой закладке DOM. Присутствует "фолдинг" кода. При этом в дополнительном окне присутствует и функциональность, обеспечиваемая клавишами tab и "вверх-вниз", как и в Firebug. Вкладка "Контейнер" носит только информационный характер.

Консоль присутствует и содержит командную строку, что позволяет выполнять сценарии JavaScript в интерактивном режиме. Имеется отладчик и логирование выполнения сценария. Однако отсутствует фича console.log.

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

Таким образом, альтернативы уступают в функциональности и удобстве Firefbug, но, как говорится в таких случаях, вполне сойдут для сельской местности. Первое же знакомство со встроенными в браузеры средствами отладки стоит однозначно на данный момент начинать с Firebug для Firefox.

Михаил АСТАПЧИК

Firebug – бесплатный плагин для браузера Mozilla Firefox, одной из функций которого является работа с исходным кодом веб-страницы. С помощью расширения FireBug можно просматривать код страницы, редактировать или удалять элементы и атрибуты "на лету", при этом Вы можете просматривать результаты изменений на веб-странице в реальном времени. Т.е. при внесении изменения в код, страница браузера немедленно обновляется, отображая эти изменения в окне браузера. Бывает, что вам понравилось то или иное решение веб-мастера на чужом ресурсе, FireBug вам поможет подсмотреть как это работает и реализовать эти стили на своем сайте.

Установка расширения FireBug

Щелкните левой клавишей мышки в браузере Mozilla Firefox значок "Инструменты" и в выпадающем окне выберите "Дополнения", затем в поисковом окошке введите "FireBug" и нажмите клавишу "Enter". Найдите в появившемся списке расширений плагин Firebug и кликните большую зеленую кнопку "Add to Firefox".
После установки плагина Firebug в верхнем углу браузера Mozilla Firefox появится значок в виде жучка, а это значит, что данное дополнение успешно установилось.

Как запустить Firebug

Если щелкнуть правой кнопкой мышки по интересующему месту веб-страницы и выбрать из контекстного меню "Инспектировать элемент с помощью Firebug", то перед вами откроется участок кода страницы, который отвечает за формирование того элемента, который Вы выбрали.

Код интересующего нас элемента будет виден в открывшемся внизу страницы окне, при этом участок кода, который отвечает за выбранный элемент веб-страницы, будет подсвечен синим цветом.
Запустить Firebug можно также с помощью комбинации клавиш "Ctrl" + "F12" либо щелкнув по жучку в правом верхнем углу экрана. А если нажать клавишу "F12" , то Firebug откроется в новом окне браузера.

Редактирование HTML- кода

В левой половине окна плагина FireBug отображаются HTML - теги открытой в браузере веб-страницы. Здесь можно просматривать вложенность друг в друга тех или иных контейнеров, для открытия содержимого контейнера нужно нажать на плюсик рядом с ним, а также можно свернуть его, щёлкнув ещё раз. Для удобства перемещения по элементам можно использовать стрелки навигации на клавиатуре (смещает синее выделение элемента).

Если Вы подведете мышку к div- контейнеру в левой части окна Firebug, то сможете видеть, какие элементы открытой веб-страницы входят в этот div-контейнер.

Если кликнуть правой клавишей мыши по элементу в панели HTML, то в выпадающем окне вы можете выбрать то действие, которое хотите с ним произвести: удалить элемент, добавить новый атрибут, редактировать HTML и др. Внесенные изменения в выделенный фрагмент HTML -кода, тут же отобразятся на веб-странице.

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

Хочу обратить Ваше внимание на то, что когда Вы кликаете мышкой по элементу в панели HTML-кода, то во второй строке сверху панели плагина отображается порядок вложения элементов HTML. По этой строке можно прослеживать наследование CSS-свойств.

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

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

Внимание! Firebug выводит в панель HTML не только тот код, который хранится у Вас на сайте в HTML - файлах, но также и сгенерированный php-код.

Дело в том, что в отличие от обычного исходного HTML- кода, плагин Firebug учитывает все изменения в коде после его преобразования через JavaScript. Вероятнее всего, искомый Вами файл будет иметь расширение "php", и этот участок в нем может выглядеть совсем не так, как в исходном коде веб-страницы. Как же найти в каком файле формируется нужный нам фрагмент веб-страницы? Внимательно изучив нужный участок веб-страницы с помощью плагина Firebug, подищите какой-нибудь ID или CSS-класс, которые прописаны в контейнере с требуемым элементом веб-страницы. А далее с помощью программы Total commander осуществите поиск тех файлов, в которых присутствует данный класс или ID. Возможно Вам сразу не удастся найти нужный участок HTML- кода, тогда повторите поиск взяв за основу какой-нибудь другой маячок для поиска.

Редактирование стилей CSS

В левой панели расширения Firebug по умолчанию отображается HTML - код, а в правой CSS-стиль выбранного элемента. Эти CSS свойства определяют внешний вид выбранного HTML блока. В панели CSS отображаются селекторы, которые относятся к выбранному элементу, название CSS-файла и номер строки, в которой эти селекторы описаны

CSS-свойство одного и того же элемента может быть прописано несколько раз с разными значениями, тогда браузер учитывает только CSS-свойство с более высоким приоритетом – !important. . Если какая-то строка зачёркнута, значит у данного селектора специфичность ниже, чем у селектора с более высоким приоритетом. На рисунке видно, что у селектора .uk-article-title приоритет выше, чем у селекторов h1, .uk-h1 и h1, .uk-h1 , поэтому свойства font-size:40px и color: #444444 не применяются.
Любое CSS-свойство отключается и включается вновь простым щелчком по пустому полю перед свойством. Вы можете подвести курсор мыши к стилевому правилу, рядом с этим свойством появится красный перечеркнутый кружочек. Щелкнув по нему мышью можно отключить это CSS- свойство и посмотреть на веб-страницу без него. Отключенные свойства отображаются серым цветом, рядом с ними выводится серый перечеркнутый кружочек.

Все значения и названия свойств можно легко изменять. Для этого достаточно щёлкнуть по свойству, и оно станет редактируемым. Очень удобно и то, что в плагине Firebug, как и в Notepad++ , есть автодополнения.

Перемещаться в панели CSS по свойствам и их значениям, а также вставить пустую строку для добавления нового CSS-свойства можно с помощью клавиши Enter. Щелчком правой клавишей мышки в панели CSS открывается контекстное меню.

• Через контекстное меню можно скопировать объявление свойства , имя свойства или значение свойства в буфер обмена, а затем вставить в CSS-файл Вашего сайта.
• Редактировать стиль элемента - установить встроенный стиль для элемента (устанавливается через атрибут style).
• Добавить правило – добавить правило к данному элементу.
• Новое свойство - добавить новое свойство и его значение текущему правилу.
• Редактировать, удалить или выключить – действия с текущим свойством.
• Обновить – обновить экран панели.
• Инспектировать во вкладке CSS - перейти во вкладку CSS для изучения объекта там.
• Инспектировать во вкладке DOM - перейти во вкладку DOM для изучения объекта там.

Во вкладке CSS доступен предосмотр цвета и изображений при наведении на свойство курсора

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

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

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

Вкладка "Макет"|Редактирование размеров в FireBug

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

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

После изменения числового значения к выделенному элементу автоматически добавляется тег "style", а при открытии вкладки "Стиль" появится селектор "element.style". К нему можно добавлять другие свойства CSS и менять их значения, как и для любых других селекторов.

Вкладка "DOM" (Document Object Model - объектная модель документа) используется JavaScript-разработчиками.

Вкладка "DOM" показывает список всех методов и свойств выбранного на данный момент элемента. При необходимости можно просматривать свойства объекта или изменять их, одновременно просматривая результаты таких изменений на веб-странице.

Вкладка "Сценарий" (Script)|Отладчик JavaScript

Вкладка "Сценарий" – это мощный отладчик JavaScript, который позволяет запускать скрипты, в любое время приостановить их выполнение и посмотреть, как выглядела каждая переменная в момент останова. В основном окне мы устанавливаем (и удаляем) точки останова, а также проверяем код Javascript.

1. Кнопка с помощью которой можно выбрать файл скрипта, который вы хотите отладить. Вы также можете ввести фильтрацию для списка.
2. Функции отладки: Продолжить (F8), Шаг с заходом (F11), Шаг с обходом (F10), Шаг с выходом (Shift+F11) . Фунции действуют лишь тогда, когда выполнение кода достигает точки останова.
3. Вкладка "Наблюдение" даёт возможность просматривать переменные Javascript в текущем стеке.
4. Вкладка "Стек вызовов" показывает содержимое стека функций в реальном времени.
5. Вкладка "Точки останова" показывает список активных на данный момент точек останова. Отсюда можно только удалить точку останова.
Firebug позволяет устанавливать точки останова, которые сообщают отладчику о необходимости приостановить выполнение скрипта, когда он достигает определенной строки. Во время паузы, вы можете посмотреть значение любой переменной и обследовать объекты.
Для того чтобы установить точки останова, нажмите на любой номер строки и появится красная точка останова. Нажмите на красную точку ещё раз, чтобы её удалить.
После установки точки останова в нужном месте обновите страницу (F5) для срабатывания точки останова.

Для пошаговой отладки скрипта используйте кнопки на панели инструментов Firebug:
- продолжить выполнение до следующей точки останова (F8);
- зайти внутрь блока или функции (Шаг с заходом)(F11);
- перейти к следующему оператору без захода внутрь блока (Шаг с обходом) (F10);
- выйти из блока или функции (Шаг с выходом) (Shift+F11).

Измерение скорости загрузки сайта с помощью Firebug

Интересует сколько времени заняла загрузка вашей страницы? Вкладка "Сеть" для каждого файла покажет процесс загрузки в виде полосок от начала и до окончания. На диаграммах загрузки четко видно, что javascript-файлы загружаются по очереди, и никогда - параллельно. Данный факт поможет Вам оптимизировать порядок загрузки файлов на странице, чтобы пользователь не проводил много времени в ожидании загрузки страницы. Жмем вкладку "Сеть" в окне Firebug и обновляем (F5) веб-страницу.

В нижний строке списка запросов представлен обобщенный подсчет: количество запросов, объем информации в MB, сколько из них закешировано и суммарное время выполнения всех запросов.
На второй строке Firebug можно включить фильтрацию этой информации, то есть, если Вас интересует конкретный тип файлов, например javascript, HTML запросы, CSS файлы или изображения - нажимайте кнопки в в меню плагина, чтобы фильтровать список по типам. Благодаря фильтрации можно вычислять общий размер и время загрузки для конкретного типа файлов.
Некоторые сетевые запросы загружаются из кеша браузера, а не из сети. Плагин выделяет запросы из кеша полосками светло-серого оттенка, благодаря чему Вы можете легко определить насколько эффективно Ваш сайт использует кеш для оптимизации времени загрузки веб-страницы.

Для каждого загружаемого элемента есть подробное описание, которое расположено в свернутом списке. Кликните по плюсику, чтобы развернуть список и перед вами откроется вся информация о загружаемом файле: заголовки, ответ, кэш, cookie.

На этом все. Надеюсь, урок для Вас был интересен и полезен. Удачи Вам!