Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Полезные расширения для браузеров Firefox и Opera | Часть 1: Firebug для Firefox

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

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

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

К моему величайшему удовольствию, такой плагин имеется и для Opera тоже. Причем он мне даже нравится больше, чем его аналог для Firefox. Но, как говорится, на вкус и цвет... В общем, расскажу об обоих плагинах, а вы сами решите что из них выбрать, а может быть будете, как и я, пользоваться и тем и другим, в зависимости от того, в каком браузере вы сейчас работаете. Если уж речь зашла о браузерах, то мне очень понравился новый Google Chrome — быстрый, даже в сравнение с Opera, удобный и красивый, но пока я еще не разобрался есть ли к нему расширения подобные тем, что я опишу ниже.

Firebug — то, ради чего стоит переходить на Firefox

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

Установка Firebug

По приведенной выше ссылке вы попадете на страницу закачки Furebug, где вам нужно будет нажать на зеленую кнопку «Add to Firefox» напротив той версии Firebug, которую вы намерены установить (очевидно, что выбирать стоит последнюю версию). При этом, если вы проделали это находясь в браузере Firefox, то сразу же начнется установка плагина, а затем вам предложат перезагрузить браузер для активации плагина. Если же вы щелкнули по этой кнопке в каком-либо другом браузере, то откроется стандартный диалог загрузки, в котором вы сохраните этот плагин на своем жестком диске. Затем вам нужно будет зайти в браузер Firefox, из верхнего меню выбрать «Файл» — «Открыть файл» и найти на вашем жестком диске только что сохраненный плагин. В результате опять же начнется описанный выше процесс установки плагина.

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

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

Методы работы с Firebug

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

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

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

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

Я советую цепляться за классы или ID тех или иных элементов кода. Допустим, в контейнере (контейнером называют участок кода, заключенный в теги DIV, c прописанными классами или ID), в котором находится код нужного вам элемента страницы, прописан какой-то класс или ID (например, так <div class="toolbox">). Теперь вам нужно осуществить поиск по содержимому файлов вашего сайта в поисках тех файлов, в которых присутствует упоминание данного класса. Правда, таких файлов может оказаться слишком много и тогда для сужения области поиска, придется зацепиться еще за что-нибудь, но для начала нужно понять: а как собственно можно вести поиск по содержимому файлов нашего сайта.

Поиск по содержимому файлов сайта при помощи Total commander

А очень просто: нужно, во-первых, скачать все файлы сайта на свой компьютер, подключившись к серверу хостера по FTP (Как настроить доступ к сайту по FTP с помощью программы FileZilla) и воспользоваться возможностью искать по содержимому файлов, такой замечательной программы как Total commander (ссылку на скачивание не привожу, т.к. программа платная, но это, я думаю, не будет проблемой). Вы открываете папку со всеми файлами вашего сайта в тотале и выбираете из верхнего меню программы «Инструменты» — «Поиск файлов» или просто нажимаете Alt+F7 на клавиатуре.

В открывшемся окне вы ставите галочку в поле «С текстом», убеждаетесь, что в поле «Место» указано правильное месторасположение ваших файлов сайта, а поле «Искать» не должно быть заполненным. В результате, Total commander выдаст вам список всех файлов, в которых встретился нужный нам класс. Если файлов не слишком много, то можно открыть их все по очереди в Notepadd++ и, при помощи его встроенного поиска, найти места, где встречается данный класс. Если файлов слишком много, то нужно искать другой ключ для поиска. Если же все сложилось удачно и вы не только нашли, но и исправили нужный участок, то вам нужно будет загрузить этот исправленный файл обратно на сервер в ту папку, где он и должен лежать, заменив существующий на сервере. Или же, как делаю я, сразу открыть нужный файл с сервера на редактирование и вносить изменения сразу в него (Как открыть файл вашего сайта на редактирование с помощью программы FileZilla).

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

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

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

Постовой (обмен постовыми): Сколько можно заработать на Liex?