Не работает Mozilla Firefox: Решение проблемы

Здравствуйте, уважаемые читатели! Сегодня речь пойдет об очень важном инструменте верстальщика — бесплатном дополнении . Лозунг на сайте разработчиков гласит — «Эволюция web-разработки». Не верьте этому! Firebug -это настоящая революция web-разработки. После знакомства с Firebug вы будете недоумевать, как обходились без него раньше.

До того, как я связался с web технологиями, моим любимым браузером была Opera. Быстрая, легкая, удобная. И все-то меня в ней устраивало, но чем дальше я погружался в изучение html и css, тем чаще встречал упоминания о бесплатном дополнении Firebug для FireFox. «Подумаешь, какое-то дополнение! Неужели ради него стоит менять браузер?!» — думал я тогда. Практика показала, что стоит. Попробовав один раз в действии Firebug, я уже не мог работать без него. Это действительно очень важный инструмент веб-мастера. Без него, как без рук. Скоро Вы в этом сами убедитесь.

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

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

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

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

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

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

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

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

Основной закладкой является «HTML». Именно в ней предстоит нам работать большую часть времени. Окно разбито на две части:

  • Слева представлен исходный код страницы;
  • Справа — стили css.

Если навести курсор мышки на какой-нибудь html тэг в левом поле, то он будет выделен цветом на странице. При этом:

  • голубой цвет показывает ширину элемента;
  • темно синий — поля (padding);
  • светло желтый — отступы (margin).

Картинка ниже кликабельна.

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

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

А теперь самая главная фишка FireBug, за которую его так любят: вы можете менять структуру страницу и ее стили на лету! Практически никаких ограничений — можете взять тэг и переименовать его, изменить содержание заголовка или абзаца, отредактировать, отключить или добавить атрибут стиля, а можете просто удалить пол страницы. Результат будет тут же отображаться на экране! Только помните: все изменения происходят в самом FireBug , так что после перезагрузки страницы, она вернется к первоначальному состоянию. Таким образом навредить никак нельзя.

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

Что еще есть интересного:

  • На закладке «Консоль» можно посмотреть ошибки JavaScript, HTML и CSS — полезная информация для отладки.
  • На вкладке «Сеть» имеется информация по запросом: статус, размер, удаленный IP и время исполнения.
  • Вкладка «Page Speed» позволяет протестировать скорость загрузки страницы. Оценка ставится по 100 бальной шкале. Кроме этого, даются полезные совету, которые позволят улучшить данную характеристику.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На этом на сегодня все. Спасибо а внимание и до новых встреч.

Здравствуйте, уважаемые читатели.

Сегодня я проведу экскурс по одному из практических методов изучения html-разметки и css-стилей. А объектом нашего внимания в данном разрезе станет расширение FireBug. Изначально оно было создано для браузера Mozilla Firefox. На сегодняшний день Фаербаг также можно использовать в Opera, Google Chrome. Мы разберем его основные функции на конкретных примерах.

На моем блоге большой популярностью пользуются статьи, в которых я учу читателей стилизовать элементы блога с помощью css:

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

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

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

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

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

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

Замечу, что в Google Chrome есть собственный встроенный аналог FireBug.

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

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

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

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

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

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

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

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

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

Работа с HTML

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

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

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

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

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

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

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

Работа с CSS

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

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

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

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

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

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

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

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

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

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

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

Если у вас появились вопросы, задавайте их в комментариях к статье. Смотрим видео:

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

В совершенно любой, даже самой идеальной программе иногда случаются сбои. Связаны они могут быть с разными причинами. И Мозилла не является исключением из правил. В ней тоже могут случаться перебои, появляться ошибки и баги. Пользователей постоянно мучает вопрос – “Так как же устранить эти ошибки?”. На него мы и постараемся максимально четко и ясно ответить.

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

Не работает, или не запускается Mozilla: Что делать?

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

При нажатии на ярлык, браузер не открывается

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

Попробуем устранить эту проблему:

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

Вариант 2. Можно попробовать сделать откат данных к более ранней версии (данная возможность доступна на Windows 7 и более поздних версиях). В большинстве случается это оказывается эффективно и помогает при подобной ошибке. Как это сделать :


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

Вариант 3. Антивирус блокирует работу обозревателя. Попробуйте на время отключить вашу систему безопасности и запустить браузер. Если он запускается, значит надо будет отключить систему сканирования сети, чтобы Мозилла работала нормально. Но примите во внимание, что это может увеличить риск заражения вашего компьютера вредоносными программами.

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

Браузер не отвечает

Наверное, самая распространённая ошибка, которая может возникать у пользователей. Очень часто может быть так, что при использовании программы, она вдруг зависает и не реагирует ни на что, а в заголовке браузера пишет: «Не отвечает». Давайте разберемся, как устранить данную ошибку.

Здесь нам поможет диспетчер задач:


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

Если Firefox по-прежнему не отвечает:

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


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

Очень сильно тормозит при работе

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

  1. В первом случае все понятно. Нужно либо обзавестись более мощной вычислительной машиной, либо же минимизировать количество потребляемой оперативной и процессорной памяти, за счет сокращения работающих процессов. Простыми словами, просто удалить все ненужные и почти ненужные программы, которые берут слишком много RAM-памяти.
  2. Во втором случае, браузер Мозилла может глючить, если вы запустили слишком много вкладок и разных программ. Причем такое может случится даже на компьютере, напичканном крутыми комплектующими. Что нужно сделать в этом случае:

— Закройте все программы, потребляющие много “оперативки”.

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

— Почистите реестр и временные файлы, используя программу CCleaner.

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

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

Ошибка профиля в Mozilla Firefox

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

Как это сделать :


Самый универсальный способ – переустановка;)

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

Есть две возможных причины такой ошибки. Первая - это что, что Вы не установили DOM Inspector. Если это так, то нужно переустановить Firefox и выбрать DOM Inspector в опциях установщика.

Некоторые пользователи, у которых уже есть DOM Inspector, сталкиваются с этой проблемой при обновлении Firefox с 1.5 до 2.0. Я пока не уверен, почему, но важный компонент, от которого зависит Firefox, отсутствует в системах этих пользователей. Пожалуйста, почитайте эту тему (англ.)c в Firebug Discussion Group, где многие пользователи нашли решение этой проблемы.

Я хочу использовать "console.log()", но оно не работает в Internet Explorer и других браузерах. Что делать?

Вы наверняка захотите попробовать Firebug Lite , javascript-библиотеку, которая включает в себя упрощенную версию Firebug консоли. Это позволит всем вызовам функций объекта console работать в других браузерах.

Firebug крэшится, как только я открываю его.

Скорее всего, это из-за расширения Sothink SWF Catcher . Если у Вас поставлено это расширение, отключите его и Firebug будет работать как полагается.

SWF Catcher не совместим с Firefox 2.0 и крэшит некоторые расширения вроде Firebug. Пожалуйста, свяжитесь с Sothink и попросите их поправить своё расширение.

Почему Firebug не работает под Linux?

На самом деле Firebug работает под Linux, но некоторые дистрибутивы неправильно компилируют Mozilla, и в нем нет компонентов, от которых зависит Firebug. Еще более часто - отдельные пользователи неправильно компилируют свой Firefox.

Если Вы сами компилируете Firefox, пожалуйста прочитайте эту тему (англ.) в Firebug Discussion group на предмет информации о том, как сделать билд, совместимый с Firebug.

Почему запросы XMLHttpRequest не работают после использования permissions manager"а для включения привелегий?

К сожалению, это ошибка Firebug, которая не дает enablePrivilege разрешить запросы XMLHttpRequests к внешним доменам.

Чтобы обойти проблему, выберите "Disable Network Monitoring" из меню Options menu во вкладке Net.

В Firebug 0.4 была вкладка "Events", но я не могу найти ее в Firebug 1.0.

Вкладка "Events" была заменена возможностью логировать события с помощью вкладки "Console". Кликните правой кнопкой на элементе, и Вы увидите пункт меню "Log Events". Отметьте его, и сможете просматривать события на консоли.

Доброго времени суток, уважаемые читатели сайт!

— один из самых полезных инструментов для веб-мастера. С его помощью можно решать множество задач, например, можно посмотреть структура сайта (исходник смотреть сложно, а с этой программой можно посмотреть структуру исходных элементов -какой элемент что выводит- сразу видно наглядно) или править веб-страницы прямо в реальном времени. Firebug для Firefox позволяет прямо в браузере мы изменять (html, CSS и т.д.), и сразу смотреть результат наших действий, хотя реально сам код на сервере и не изменялся. Ещё проще: например, нужно изменить размер шрифта в заголовке поста. Используя Firebug, просто выделяем мышкой нужный нам текст, высвечивается соответствующий элемент и можно сразу вносить изменения в размер шрифта и сразу смотреть результат. Посмотрели, как выглядит веб-страница и потом уже вносим изменения в соответствующий код. Удобно? Не то слово!

Этот плагин, как дополнение есть в разных вариантах. Так его можно установить в браузер Chrome (как установить Хром, написано в статье , настроить и работать. Как установить этот плагин для chrome -читайте ), а можно и в рассмотрим этот вариант.

Как установить плагин firebug для firefox

Открываем Mozilla Firefox (он естественно уже установлен на нашем компьютере), скачать firebug для firefox можно по

Нажимаем зеленую кнопку +Добавить в Firefox .

Обратите внимание, что кнопка Установить не активна. Чтобы она стала активной — кликните мышкой по записи (указано стрелкой) и затем кликаем Установить.

Всё. приложение установлено. В правом верхнем углу видим серенького жучка.

А серенький потому, что он неактивный, т.е. не включён. Если расширение установили, то следующий раздел не читаем — смотрите как пользоваться.

________________________________________________________________________

Вариант, если браузер Firefox ещё НЕ УСТАНОВЛЕН на компьютере . Сначала закачиваем расширение Firebug с браузера Chrome, а затем устанавливаем сам Firefox.

Для начала заходим на сайт дополнений . Открывается страница загрузки.

Нажимаем кнопку Загрузить сейчас . Открывается окно.

Хотите узнать больше про Фаефокс? нажмите соответствующую кнопку. Но мы нажмём ссылку всё равно загрузить . Производится загрузка дополнения.

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

——————————————————————————

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

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

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

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

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

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

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

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

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

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

Программа для чтения PDF- файлов — Stduviewer

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

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

}

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

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

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