Firebug — как пользоваться лучшим плагином для вебмастеров. Хром фаербаг
А вы готовы перейти на Google Chrome? — 30 незаменимых расширений для Хрома / Хабр
На протяжении уже 5-6 лет я использую только Firefox и никогда не думал, что захочу выбрать что-то другое. Firefox — отличный браузер, а делают его таковым все те тысячи расширений, которые каждый может скачать бесплатно. Можно найти расширение для чего угодно. Есть лишь один существенный недостаток — Firefox значительно медленнее, чем Chrome и сжирает больше ресурсов компьютера, чем остальные браузеры.Один мой знакомый в очередной раз предложил попробовать Хром и я решил, что стоит рискнуть. На этот раз моя цель — проверить достаточно ли хороших и качественных расширений у Хрома, чтобы перейти на него окончательно.
В этой статье я попытаюсь ответить на вопрос — могут ли дизайнеры, веб-разработчики, SMO-шники, SEO-оптимизаторы безболезненно перейти на Chrome. Есть ли расширения, которые могут послужить равноценной заменой на Хроме таким вещам как: Firebug, Webdeveloper, Color Picker, SEO для Firefox, Alexa Ranks, средства для отладки?
1. Aviary Screen Capture
Это расширение делает скриншот видимой части любой веб-страницы, затем открывает его в редакторе, в котором можно обрезать или повернуть изображение, добавить текст и указатели, получить информацию о цветовой схеме. Вы легко можете сохранить скриншот на рабочем столе или разместить его в Интернете. Также расширение поможет вам быстро запустить любое веб-приложение для дизайна от Aviary.
2. Xmarks Bookmarks Sync
Резервное копирование и синхронизация ваших закладок между компьютерами и браузерами. Xmarks также доступен для Firefox, Safari и IE. Так как для работы я использую компьютер и ноутбук, то мне нравится этот инструмент, который автоматически синхронизирует мои закладки и позволяет мне не беспокоиться об этом, а уделять больше времени другим вещам.
3. AdThwart
Блокирует рекламу на веб-сайтах. Может использовать EasyList и многие другие списки рекламных фильтров.
4. Evernote Web Clipper
Расширение Web's Evernote Clipper поможет вам сохранить интересный материал, встреченный вами в сети.
5. LastPass
LastPass это бесплатный онлайн менеджер паролей и автоматический заполнитель форм, который делает перемещение по Интернету более удобным и безопасным.
6. RSS Subscription
Это расширение автоматически ищет RSS-каналы на странице, которую вы читаете и после их нахождения в адресной строке будет отображаться значок RSS, что позволяет нажать на него, чтобы просмотреть содержание канала и подписаться. Очень удобное расширение для ежедневного чтения блогов.
7. Chrome Gestures
Это расширение позволяет выполнять часто используемые команды (например, перейти на страницу вперёд/назад, закрыть вкладку/новая вкладка) жестами мыши прямо на веб-странице, не используя панель инструментов или клавиатуру.Если вы не знаете, как этим пользоваться, то можете посмотреть это видео.
8. Google Similar Pages beta
Находит похожие веб-страницы для просматриваемых в данный момент. Насколько я понял, это расширение работает, примерно, как StumbleUpon, но результат более объективен, т.к. основан на поисковой выдаче Google.
Здесь я испытывал его на своём сайте и в результате получил 4 очень популярных блога про дизайн — первое испытание прошло успешно, но надо ещё тестировать.
9. Feedly
Стартовая страница в виде журнала. Быстрый и удобный способ получать информацию с ваших любимых сайтов и сервисов. Обеспечивает очень тесную интеграция с Google Reader, Twitter, Delicious, YouTube и Amazon.
10. Delicious Chrome Extension
Очень простенькое расширение для Delicious, которое позволит легко делать закладки. Это расширение просто добавит одну кнопочку, а не целый набор сервисов закладок.
11. Google Quick Scroll
Google Quick Scroll — это расширение, которое поможет вам найти то, что вы ищите, быстрее. После щелчка по результату поиска в Google Quick Scroll появится в правом нижнем углу страницы, показывая один или несколько кусков текста, которые наиболее релевантны вашему запросу. Кликнув по нужному куску, вы переместитесь к нужной части страницы.
12. Google Mail Checker
Отображает количество непрочитанных сообщений в Google Mail. Вы также можете нажать на иконку, чтобы открыть почту, очень удобный инструмент для ежедневного использования.
13. Chromed Bird
Chromed Bird является расширением для Twitter, которое позволяет вам следить за вашей лентой и взаимодействовать с вашей учетной записью Twitter.
14. Facebook for Google Chrome
Расширение позволяет читать новостную ленту и вашу стену на Facebook. Также вы можете обновлять свой статус.
15. StumbleUpon Extension
Простой StumbleUpon-тулбар для Хрома.
16. goo.gl url shortener
goo.gl url shortener — это расширение, с помощью которого вы сможете сокращать ваши ссылки, используя новый сервис от Google, goo.gl.
17. Lorem Ipsum Generator
Многие похожие расширения, на других браузерах, слишком усложняют задачу (большое количество кода, XHR, и т.д.). Главная отличие этого — использовать меньше кода (следовательно, меньше памяти) и помочь разработчику/юзеру выполнить работу.Отличное и простое классическое расширение Lipsum, необходимое в каждой дизайнерской панели инструментов.
18. Firebug Lite
Firebug Lite — инструмент для веб-разработчиков, который позволяет просматривать, редактировать и отлаживать CSS, HTML и JavaScript любой страницы на ходу.
19. META SEO inspector
Расширение нужно для просмотра мета-данных, которые, как правило, не видны при обычном просмотре.
20. Pastebin
Позволяет вставить и подцветить исходный код (C, Python, Ruby, HTML, CSS, …). Это может быть полезным, если нужно выложить код на форумах, IRC или социальных сетях (типа Twitter).
21. Speed Tracer
Даёт информацию о производительности веб-приложений.
22. Resolution Test
Расширение для разработчиков для тестирования веб-страниц при различных разрешениях экрана, с возможностью выбора любых разрешений.
23. Copy Without Formatting
Предоставляет различные способы (настраиваемые сочетания клавиш, плавающая кнопка или автоматическое копирование) для копирования выделенного содержимого без форматирования.
24. IE Tab
Позволяет использовать движок Internet Explorer для отображения веб-страниц в Хроме. Некоторые сайты могут правильно отображаться только в IE, и с этим расширением теперь вы можете посещать эти сайты, не переставая использовать Chrome. Отличное расширение для веб-разработчиков, которые хотят протестировать движок рендеринга IE; пользователей, которые посещают сайты с элементами ActiveX; и пользователей, которые хотят использовать IE для локальных файлов (например, file://URL).
25. Chrome SEO
Я не могу представить браузер без SEO инструментов, с помощью которых, я могу просмотреть статистику страницы, на которой я нахожусь. Это расширение ещё находится в стадии разработки, но уже на данном этапе оно очень лёгкое, быстрое и функциональное.«Расширение Google Chrome SEO обеспечивает доступ к SEO-инструментам, которые могут помочь вам с анализом конкурентов, подбором ключевых слов, проверкой обратных ссылок и другими повседневными задачами поисковой оптимизации.»
26. PageRank
Очень простое и лёгкое расширение, единственной задачей которого, является отображение PageRank'a у текущей страницы. Для подробной информации я использую Google Chrome SEO, но для быстрого просмотра это расширение мне больше нравится.
27. SitezMeter
SitezMeter отображает графики посещаемости из Google Trends и Alexa и сравнивает их друг с другом. Это расширение очень удобно для веб-мастеров, владельцев сайтов и SEO/SEM специалистов.
28. Chrome Flags
Chrome Flags отображает флаг страны, где физически расположен веб-сайт, который вы посетили. Расширение также предоставляет доступ к подробной информации о сервере веб-сайта, владельце, посещаемости и безопасности.
29. Eye Dropper
Расширения Eye Dropper и Color Picker позволяют узнать цвет любой части веб-страницы или выбрать его из расширенной палитры цветов. Вы также можете включить опцию, которая будет автоматически копировать выбранный HEX код цвета в буфер обмена. Этот инструмент даже удобнее аналогичного Color Picker'a от Firefox, т.к. там копировать/вставлять код нужно вручную.
30. MeasureIt!
Линейка, которая поможет вам измерить параметры любого элемента на странице.Теперь это популярное расширение для дизайнеров доступно и на Хроме!
Функция «проверить элемент» работает также, как в Firebug. Просто выберите элемент на странице или текст, щёлкните правой кнопкой мыши и нажмите «проверить элемент» — и сразу получите нужный результат! Очень удобно!
Узнать больше о встроенных инструментах для разработчиков можно в этом руководстве от Google.
Я жалею, что так долго не мог взяться протестировать расширения в Хроме. Я думал, что не может быть ничего лучше, чем Firefox с его тысячами расширений и, что Chrome не сможет когда-либо конкурировать с ним наравне.
Разумеется, стоит отметить, что у Хрома доступных расширений, пока, намного меньше, но многие уже работают быстро и стабильно.
Дизайнерам и разработчикам я бы посоветовал обратить внимание на Chrome и попробовать в деле нужные им расширения. Их не так много, но зато они удобны и быстры в работе, чего часто не хватает в случае с Firefox.
А для ежедневного просмотра веб-страниц, Твиттера, электронной почты, ведения блога — я предлагаю попробовать Хром. Попользуйтесь в течение 3-4 дней, установите несколько любимых расширений из этого списка, и я уверен, вы не захотите вернуться к прежнему браузеру. Это чисто моё мнение, но мне кажется, если до вчерашнего дня я был ярым поклонником Firefox, а сегодня легко перешёл на Хром, то значит, что в этом браузере определённо есть что-то стоящее! =)
Скачать последнюю версию Хрома вы можете здесь.
P.S. Статья не ради холивара Firefox VS Chrome, а лишь для того, чтобы поделиться полезными расширениями.
habr.com
javascript - Firebug для Chrome
Инструменты разработчика Chrome за последний год прошли долгий путь. Потребовалось немного, чтобы настроить, и я продолжал запутываться, поэтому я разработал тестовую страницу на моем ящике, и я установил их бок о бок, firebug на моем левом мониторе и инструменты для разработчиков справа от меня.
Я прошел и понял, как они отличаются. Я понял немного позже, что Chrome имеет то же самое, что Firebug просто организовал немного по-другому. Оказывается, мне нравятся инструменты Dev больше, чем firebug после того, как я привык к этому.
-
У меня было много жалоб на раздел элементов инструментов Dev, но теперь он работает почти точно так же, как Firebug. Я могу быстро щелкнуть, чтобы проверить элементы, и он правильно расширяет узлы, отведя меня к node, я хочу.
-
Вкладка "Ресурсы" в инструментах "dev" удаляет вкладку net в firebug из воды. Я думаю, что это лучше организовано. Вы получаете предварительный просмотр изображений в списке ресурсов, и вы можете увидеть, какие элементы прозрачны, потому что хром помещает шахматную табличку за изображение (вы получаете предварительный просмотр изображения в firebug, но только при зависании над запросом node, вид раздражает). Кроме того, вы можете дважды щелкнуть по ресурсам, а хром выведет их на новую вкладку. ОЧЕНЬ приятно, когда я отлаживаю вызовы AJAX и вам нужно увидеть отформатированную ошибку исключения в браузере, не набирая вручную мои URL-адреса ajax.
-
Номера строк. Найти номера строк в firebug очень сложно, и вы не можете сделать это для некоторого контента. Каждый раз, когда вы просматриваете DOM, CSS, script и т.д., Вы всегда получаете полное правило номера строки слева. Это единственный пункт firebug, который находится в разделе script.
-
Оба средства firebug и dev имеют полный отладчик javascript. Однако способность деактивировать точки останова без их удаления в инструментах dev очень полезна, и я постоянно ее использую. Вы можете сделать это в firebug, но вы должны отменить коробку для КАЖДОЙ точки останова, раздражая.
-
Мне нравится, что JSONObjects просто появляются как ресурсы вместе со всем остальным, а не имеют свой собственный раздел. Это позволяет легко увидеть, что происходит с быстрым взглядом.
Насколько я могу сказать, все остальное похоже на одно и то же. Я действительно не мог найти ничего, что мог сделать firebug, чем инструменты dev. Обычно, когда я думал, что у инструментов dev отсутствует функция firebug, оказалось, что это было просто в другом месте или реализовано по-другому. Оба имеют обширный дисплей консоли. Обе поддержки появляются в отдельном окне. Оба поддерживают несколько экземпляров для нескольких вкладок. У Chrome даже есть дополнительные функции поверх них. Возможность проверки хранилища, такого как кеш, файлы cookie и т.д. Инструменты Dev, похоже, выиграют для меня.
Я очень рекомендую ознакомиться с инструментами dev над использованием расширений, если вы хотите отличного хром-отладчика.
Извините, мой ответ был таким долгим. Я могу написать блог, когда-либо сделавший более полное сравнение.
ответ дан Chev 05 нояб. '10 в 21:21 источник поделитьсяqaru.site
Firebug — как пользоваться лучшим плагином для вебмастеров
Обновлено: 13 июля 2018
В рамках этой рубрики хочу сегодня поговорить о расширениях для Firefox и дополнениях для Opera, помогающих при верстании сайта, а так же при работе по его продвижению в поисковых системах.
Сам я являюсь давним поклонником Opera, еще с тех времен, когда она была платной. По моему мнению, лучшего браузера для серфинга по сети не найти.
Но для работы над сайтом Opera подходит гораздо меньше, чем всем известный браузер Firefox. Оперу, конечно же, тоже можно заточить под верстку сайтов, но у нее, как ни крути, нет такой штуки, как Firebug, а это для начинающего верстальщика ой как важно. Хотя время летит и с момента написания этой статьи разработчики браузеров, видимо меня услышав, добавили во все свои творения базовые возможности героя сегодняшней статьи, но оригинал то все равно остается лучшим из лучших. ИМХО.
Плагины для браузеров, помогающие вебмастерам
Файрбаг изначально являлся расширением только для Mozilla Firefox и он позволял существенно снизить время на нахождение и исправление нужного фрагмента в Html коде, а если вы начинающий вебмастер или структура файлов движка CMS (системы управления контентом) вам совершенно незнакома, то я вообще не представляю, как можно обойтись без него.
Да, конечно, можно открывать исходный код нужной страницы и искать так нужное место, но это время и рутина, которую легко и непринужденно позволяет избежать наш герой. Удобная и незаменимая вещь, при чем аналога ему раньше даже и не было.
Вот и приходилось мне раньше жить на два дома. В Opera я бродил по интернету, а в Firefox — работал над своими проектами, постоянно используя возможности расширения, о котором сегодня пойдет речь.
Но кроме верстальных дополнений для браузеров вам, наверняка, при работе с вашими проектами могут понадобиться и SEO расширения, позволяющие оперативно отследить PR и ТИЦ открываемых в обозревателе страниц, посмотреть закрыты или нет для индексации поисковиками внешние ссылки на этих страницах (особенно это интересно при комментировании блогов и поиске так называемых Dofollow блогов) и многое другое (ссылки на них смотрите в самом начале статьи).
Если уж речь зашла о браузерах, то мне очень понравился новый Google Chrome — быстрый, даже в сравнение с Opera, удобный и красивый, но пока я еще не разобрался, есть ли к нему расширения подобные тем, что я опишу ниже.
Firebug — это не просто дополнение, добавляющее какой либо расширенный функционал вашему Фаерфоксу. Очень верно про это написано на странице разработчиков — это эволюция web-разработки.
Да, это именно так. Эволюция — это когда вы переходите от палки-копалки к экскаватору. Эффект потрясающий и вы это сразу почувствуете, начав использовать этот плагин. Ну, пожалуй, хватит петь дифирамбы, пора рассказать про его возможности. Скачать Фаербаг вы можете со страницы аддонов. На данный момент актуальной версией является 1.11.4.
Естественно, что устанавливать это расширение нужно, находясь именно в Фаерфоксе, ибо там будет намного проще. Если же вы щелкнули по кнопке скачивания данного расширения в каком-либо другом браузере, то откроется стандартный диалог загрузки, в котором вы сохраните этот дистрибутив на своем жестком диске.
Затем вам нужно будет зайти в Мазилу, из верхнего меню выбрать «Файл» — «Открыть файл» и найти на вашем жестком диске скачанный файл. В результате опять же начнется процесс установки.
После перезагрузки браузера вы увидите в правом нижнем углу окна значок Firebug в виде жука — это значит, что данное дополнение успешно установилось и ждет ваших приказаний. Сначала рассмотрю те его возможности, которые использую сам при работе с сайтами, а затем вкратце расскажу о том, что еще вы можете делать с помощью него вообще.
Бывает, что вам нужно что-то поменять, доделать, исправить, просто посмотреть как это реализовано и работает на своем или чужом ресурсе. Да, да, вы не ослышались, именно на чужом ресурсе. Понравилось вам то или иное решение вебмастера и вы хотите сделать у себя так же — Фаербаг вам поможет.
В принципе, я уже говорил, что посмотреть исходный код страницы можно и без этого расширения (щелкаете правой кнопкой мыши по странице в любом обозревателе и выбираете из контекстного меню что-то вроде «Исходный код страницы» или «Исходный код»), но этого кода будет много, а для того, чтобы найти нужное место, потребуется время. Что нам предлагает в этом случае огненный жук?
Как пользоваться Firebug при верстании сайта
А он предлагает вам щелкнуть по интересующему месту вебстраницы, опять же правой кнопкой, и выбрать из контекстного меню — «Анализировать элемент» (в англоязычной версии плагина это будет “Inspect”). И вам, о чудо, откроется в его окне только тот участок кода страницы, который отвечает за формирование именно того элемента, который вам интересен. Удобно?
Безусловно. Только за одно это следует полюбить данный плагин. Но ведь он может много чего еще. Код нужного вам элемента вы увидите в открывшемся внизу страницы окне этого дополнения, показанном на рисунке выше. Тот участок кода, который отвечает за интересующий вас элемент веб страницы, будет подсвечен синим.
Так же обратите внимание на подчеркнутую мною на рисунке красной линией строку, начинающуюся с слова «Редактировать» в окне Фаербага. Если вы щелкните по этому слову, то сможете внести изменения в выделенный фрагмент Html кода, которые тут же отобразятся на странице.
Измените, например, в окне плагина url картинки на намерено несуществующий и картинка исчезнет с вебстраницы, вернете все обратно и картинка появится. Но обратите внимание — эти изменения никак не отразятся на вашем ресурсе, все изменения увидите только вы и только на этой вебстранице, подчиненной всемогущему огненному жуку. Как только вы обновите страницу, то все внесенные плагином изменения исчезнут.
С помощью Firebug можно смоделировать то, что может произойти при изменении Html или CSS кода вебстраницы. Вы можете таким образом, с помощью его возможностей, посмотреть (не тратя времени на поиск файла движка вашей CMS, отвечающего за вывод этого участка) разные варианты и выбрать нужный, или же вообще отказаться от изменения, если текущий вариант окажется не так уж и плох.
Но вот если вы все же поняли, что изменения в Html код вносить нужно и они приведут к улучшению вида вашей вебстраницы, то вот тут и наступает тот сложный момент, в котором вам, к сожалению, не поможет разобраться даже огненный жук (он, к сожалению, не всесилен).
Проблема поиска нужного участка кода в файлах движка
Вам придется самостоятельно отыскивать тот файл в движке вашего сайта, форума или блога, который генерирует данный участок Html кода. Файл этот, скорей всего, будет с расширением .php, т.е. написанным на языке серверного программирования PHP и, соответственно, этот участок в нем может выглядеть совсем непохоже на то, что вы видите в исходном коде вебстраницы.
В этом, на мой взгляд, и состоит основная сложность редактирования внешнего вида и содержания страниц вебсайтов, построенных на каком-либо движке (CMS). Если вы начинающий вебмастер или никогда не сталкивались с таким движком, то с ходу определить в каком файле формируется интересный вам фрагмент вебстраницы вряд ли сможете.
Потом, со временем, набравшись опыта, для вас это не будет составлять труда, а пока я предлагаю вам действовать по следующей схеме. Палю тему, как любят говорить на SEO форумах и блогах — шутка, никакого секрета тут, конечно же, нет.
Вам нужно будет для начала за что-то зацепиться в том коде, который открыл для вас любезный Firebug. Найти что-то уникальное или редко встречающееся, что, наверняка, должно выглядеть так же и в PHP файле вашего движка.
Я советую цепляться за CSS классы или ID тех или иных Html тегов. Допустим, в контейнере (контейнером называют участок кода, заключенный в теги DIV, c прописанными классами или ID), в котором находится тег нужного вам элемента вебстраницы, прописан какой-то CSS класс или ID (например, так div).
Теперь вам нужно осуществить поиск по содержимому файлов движка вашего сайта в поисках тех файлов, в которых присутствует упоминание данного класса. Правда, таких файлов может оказаться слишком много и тогда для сужения области поиска придется зацепиться еще за что-нибудь, но для начала нужно понять: а как, собственно, можно вести поиск по содержимому файлов движка.
Поиск по содержимому файлов движка при помощи Total commander
А все очень просто: нужно скачать все файлы движка на свой компьютер, подключившись к серверу хостинга по FTP, и воспользоваться возможностью искать по содержимому файлов такой замечательной программы, как файловый менеджер Total commander. Вы открываете папку со всеми файлами движка в Тотал Коммандере и выбираете из верхнего меню программы «Инструменты» — «Поиск файлов» или просто нажимаете Alt+F7 на клавиатуре.
В открывшемся окне вы ставите галочку в поле «С текстом», убеждаетесь, что в поле «Место» указано правильное месторасположение ваших файлов движка вебсайта, а поле «Искать» не должно быть заполненным. В результате, Total commander выдаст вам список всех файлов движка, в которых встретился нужный нам CSS класс. Этот класс или ID вы выбрали раньше в качестве маячка при просмотре фрагмента вебстраницы через Firebug.
Если файлов, в которых встречается данный CSS класс не слишком много, то можно открыть их все по очереди в лучшем Html редакторе Notepad и, при помощи его поиска, найти места, где встречается данный класс.
Если файлов движка, где встречается искомый маячок слишком много, то нужно взять другой ключ (маячок) для поиска, изучив повнимательнее нужное место вебстраницы с помощью все того же Фаербага. Если же все сложилось удачно и вы не только нашли, но и исправили нужный участок Html кода, то вам нужно будет загрузить этот исправленный файл движка обратно на сервер в ту папку, где он и должен лежать, заменив существующий на сервере.
Или же, как делаю я, сразу открыть нужный файл с сервера на редактирование и вносить изменения сразу в него с помощью программы Файлзила.
При осуществлении поиска по содержимому файлов в Тотал Коммандере, может возникнуть проблема с русскими словами, а точнее их кодировкой. Если Total commander ничего не нашел по вашему запросу на русском, поставьте галочку напротив «UTF-8» в окне поиска и все найдется.
Возможности и принципы использования Firebug
Давайте продолжим рассмотрение возможностей огненного жука, которое начали в этой статье. Мы уже в общих чертах коснулись его работы, а именно того, как можно использовать этот плагин для определения фрагмента вебстраницы, отвечающего за тот или иной элемент дизайна.
Кроме описанного чуть выше способа (щелкнуть по интересующему месту вебстраницы правой кнопкой и выбрать из контекстного меню — «Анализировать элемент») это расширение можно вызвать к жизни и простым нажатием на иконку паучка в правом нижнем углу окна браузера или же с помощь клавиши F12. Повторное нажатие по этой клавиши приведет к закрытию окна Фаербага.
Если вы хотите, чтобы плагин открылся в отдельном окне, то щелкайте по паучку удерживая Shift на клавиатуре или используйте сочетание клавиш Ctrl+F12. Вы сами выберите наиболее удобный для вас вариант вызова к жизни этого шедевра инженерной мысли. Окно его будет выглядеть у вас примерно так:
Сверху будут расположены кнопки панели управления, а основная часть окна будет разделена на левую и правую половину. В левой половине вы можете наблюдать структуру HTML кода открытой в браузере страницы, а в правой половине — стили CSS, которые используются для задания того или иного вида этого веб документа.
Как я уже говорил ранее, в тсовременной блочной верстке принято использовать HTML лишь для задания наполнения страниц контентом, а для задания нужного внешнего вида этого наполнения используются свойства таблицы стилей CSS.
Как использовать Фаербаг для изучения HTML
Firebug же позволяет реализовать две очень интересные возможности, помогающие разобраться с устройством кода открытой в браузере страницы. Можно водить мышью по самому HTML тегу в окне этого плагина, а на вебстраничке будут выделяться те элементы, за формирование которых этот тег отвечает (щелкаете, например, по Div контейнерам и тут же увидите вверху подсветку этого контейнера в дизайне вебстраницы).
А можно, наоборот, активировать такой хитрый режим в этом расширении, что при этом, мышью вы будете водить по самой вебстраничке, а HTML код, соответствующий тегам (находящимся под курсором мыши), будет в реальном времени показываться в окне Фаербага. Просто незаменимая вещь при изучении устройства того или иного веб ресурса, особливо для начинающих.
Для осуществления всего того, что я только что описал, нам понадобится информация, отображаемая в левой половине окна плагина, где отображаются теги данной вебстраницы открытой в браузере. Там Вы можете наглядно видеть вложенность друг в друга тех или иных тегов, например, контейнеров DIV.
Для раскрытия содержимого тега можно нажать на плюсик рядом с ним. Подводя мышку к тому или иному контейнеру DIV в левой части окна Firebug вы можете наблюдать, какие элементы вебстраницы входят в данный DIV-контейнер.
Содержимое DIV-контейнера плагином будет закрашено синим муаром на вебстранице, через который вы сможете видеть, какие именно из элементов дизайна находятся в этом DIV контейнере. Правда открытая вами вебстраница может быть очень большой и тогда придется использовать прокрутку для поиска выделенного синим муаром фрагмента дизайна.
Как видно из приведенного выше скриншота, контейнер <div></div> отвечает за вывод блока с заголовком и описанием моего WordPress блога.
Но можно пойти от обратного для получения через Firebug информации о том, какой тег за вывод какого блока на данной вебстранице отвечает. В этом случае, мы будем подводить мышь не к DIV блокам с кодом, а напрямую к интересующим нас элементам открытой в браузере вебстранице. При этом в окне плагина, в области для показа HTML кода, синим фоном будут подсвечиваться те теги (например, DIV контейнеры), которые отвечают за формирование данного блока.
Все это будет динамично отображать в окне данного расширения в соответствии с перемещением мыши по вебстранице. Очень наглядный и удобный способ использования огненного жука для изучения особенностей построения своего или чужого веб проекта.
Для реализации этого способа нужно будет только активировать соответствующий режим, нажав на показанную на рисунке кнопку панели:
После того, как вы нажали эту кнопку, ведите мышью над нужными участками вебстраницы, а в левой части окна плагина сможете наблюдать участки Html кода, отвечающие за формирование данных элементов дизайна (они будут выделены синим фоном). При этом фрагмент страницы, над которым находится курсор мыши, будет заключен в синюю рамочку:
После того, как нужный фрагмент найден, вы можете щелкнуть по нему левой кнопкой мыши и перейти в левое поле окна Фаербага для дальнейшей работы с тегами этого элемента дизайна. С тегами в окне плагина можно производить любые манипуляции и результат вы увидите сразу же на открытой в браузере странице.
При этом, естественно, никаких изменений в реальных файлах движка сайта производиться не будет. Но зато, вы сможете в реальном времени промоделировать различные варианты построения дизайна вебстраницы. Если же новый, смоделированный с помощью Firebug вариант вас устроит, то придется вносить изменения уже в реальные файлы движка, найти которые вы сможете,используя описанный чуть выше способ с участием Total commander.
Как использовать Firebug для работы с CSS
В правом окне этого расширения отображаются все свойства CSS, которые отвечают за оформление выделенного в левом окне фрагмента кода. Эти CSS свойства будут определять внешний вид данного Html блока. Это может быть его положение относительно других блоков данной страницы, размер, тип и цвет шрифта, используемого в данном блоке для отображения цвета или ссылок и многое другое.
Для наглядной демонстрации возможностей CSS в оформлении какого-либо элемента вебстраницы, вы можете подвести курсор мыши к какому-либо стилевому правилу, приведенному в правой части окна. Рядом с этим правилом появится серый перечеркнутый кружочек. Щелкнув по нему мышью вы отключите данное CSS свойство на этой вебстранице и рядом с ним появится красный кружочек.
При этом вы сможете наблюдать на открытой странице сайта в реальном времени произошедшие изменения. Т.о. огненный жук помогает разобраться именно в том, какое правило в файле таблицы каскадных стилей за что отвечает в оформлении данного элемента дизайна. Для того, чтобы снова включить отключенное CSS свойство, нужно будет снова щелкнуть по красному перечеркнутому кружку рядом с ним.
Расположенные в правой части свойства можно редактировать точно так же, как мы редактировали теги в левой части окна этого расширения. Все внесенные изменения в свойства из правой области будут тут же отображаться на открытой в Мазиле вебстранице, но ни как не повлияют на реальные свойства CSS, прописанные в файле таблиц каскадных стилей, имя которого вы можете видеть над данным блоком:
В окне Фаербага будет указана строка в файле таблиц каскадных стилей, на которой прописано данное CSS свойство. Поэтому, если промоделированные изменения в оформлении вебсайта вам понравятся, то для внесения этих же изменений в таблицы стилей вашего сайта нужно будет лишь открыть нужный файлик и найти там подсказанную в окне плагина строку. Все намного проще, чем в случае с внесением изменений в HTML код страницы.
Как измерить скорость загрузки сайта в Фаербаге
Ну и напоследок, хотел бы рассказать о том, как с помощью этого расширения измерять скорость сайта (не путайте с измерением скорости интернета в Спидтесте или 2IP).
Скорость, с которой загружается ваш ресурс, является очень важным показателем, влияющим на успешность и беспроблемность его поискового продвижения. Если у вашего проекта со скоростью загрузки не все в порядке, то это может повлечь за собой довольно неприятные последствия, как со стороны поисковых систем, так и со стороны лояльности ваших посетителей.
И самое важное то, что посетители могут отказаться от работы с вашим ресурсом, т.к. очень долго подгружаются вебстраницы. Кроме этого поисковые системы, в особенности Google, учитывают скорость загрузки при общей оценке полезности того или иного ресурса, а так же она может влиять на положение вашего веб проекта в поисковой выдаче.
Чтобы выявить и устранить узкие места в скорости загрузке элементов вашего ресурса можно воспользоваться специальными сервисами, позволяющими это дело измерить. Об этом я рассказывал в первой статье про определение и увеличение скорости загрузки сайта (тут с ней можно ознакомиться).
Вам достаточно будет ввести адрес нужной вебстраницы и через некоторое время вы получите полную разблюдовку по тому, какой элемент за сколько времени загружается. Таким образом можно выявить явно тормозящие элементы и принять меры к ускорению их загрузки.
Но то же самое можно сделать и не обращаясь к сторонним сервисам. У нашего любимого плагина Firebug имеется такая возможность. Достаточно просто нажать кнопку «Сеть» и обновить открытую вебстраницу.
В результате, вам будет предоставлена полная информация по загрузке всех элементов вебстраницы. Анализируйте и принимайте при необходимости меры по ускорению загрузки. На сегодня, пожалуй, что все. В следующей статье я хочу продолжить тему, а так же рассказать об еще одном замечательном плагине для браузера Firefox, который поможет нам при работе с оформлением страниц сайта.
Плагин этот называется Web Developer и имеет просто огромное количество всевозможных инструментов, позволяющих упростить работу по верстке или корректировки шаблона вашего веб ресурса. Ну, а дальше мы перейдем к рассмотрению SEO плагинов для FireFox и Opera.
Можете также посмотреть видео по теме, которое лишним уж, наверняка, не будет:
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Твитнуть
Поделиться
Плюсануть
Поделиться
Отправить
Класснуть
Линкануть
Вотсапнуть
Запинить
Подборки по теме:
Рубрика: Полезные программыktonanovenkogo.ru
Плагин Firebug для Firefox и консоль для работы с кодом Google Chrome
Привет, читатели https://max1net.com/. Сегодня я опять коснусь технической стороны деятельности, потому что практически каждый день, рассекая по просторам интернета, возникает тысяча и одна задача вебмастерского плана. А чем больше разных навыков у тебя, тем успешнее ты будешь работать.
Речь пойдет о консоли Google Chrome, а также о полезном плагине Firebug. При помощи плагина Firebug можно изучать стили CSS прямо на сайте, или вносить правки на сайте прямо из консоли плагина в браузере.
Аналогичную работу можно проделать при помощи консоли в браузере Google Chrome, которая оснащена почти таким же набором функционала, чтобы было удобнее анализировать страницы сайта.
Консоль Google Chrome
При помощи упомянутых выше инструментов можно прямо на сайте выделить какой-то элемент и если нам не понравится, как он расположен или как он выглядит, подкорректировать его сразу на странице. Результат будем видеть только мы, сразу же после внесения изменений (например, мы изменили размер шрифта), а потом эти изменения мы можем внести в файл стилей css нашего сайта. На картинке мы видим, как работает анализатор от Google Chrome – при выделении куска текста и перехода в контекстном меню в анализаторе будут видны и css, и html коды именно выделенного фрагмента со всеми подробностями.
И Firebug, и расширение Google Chrome удобны тем, что они дают весьма подробный анализ всей страницы или выделенного элемента. То есть, мы можем сразу увидеть свои ошибки в работе с сайтом, которые были допущены или при его создании, или позже. Ошибки в коде html и css, в блочном построении сайта, и еще многое другое, ну просто даже тупо посмотреть код любого фрагмента на сайте конкурента.
Не нужно рыться в многострочном файле style.css нашего сайта, чтобы найти строки, которые нас не устраивают, потому что вся нужная информация видна на экране монитора после того, как мы выделим элемент при помощи этих инструментов. Кроме обычного анализа css кода, инструменты этих двух браузеров имеют и другие дополнения, которые помогают анализировать сайт, показывают разную информацию по загрузке медиафайлов и так далее. Все это можно увидеть на временной шкале, а кроме того – дополнительную информацию о загружаемом файле, способах его передачи и другие полезные данные.
Например, при помощи анализатора Google Chrome можно провести подробный аудит сайта и сразу получить рекомендации по улучшению показателей. Удобно работать с изображениями, например, сразу видно лишние операторы в файле style.css.
Функционал консоли Google Chrome
Для начала разберемся с первым инструментом – консолью, которая реализована по-умолчанию в Google Chrome. Чтобы запустить анализатор CSS кода, нажимаем правой кнопкой мыши на интересующий нас элемент (или просто на любое место на странице, а потом выбираем интересующий элемент) и выбираем в выпавшем меню пункт «Просмотр кода элемента». Внизу экрана появится панель инструментов, которая содержит исходный html код выделенного элемента. То есть, в любом случае полностью загружается исходный код всей страницы, а внутри этого кода мы увидим исходный код выделенного элемента. Также этот элемент будет подсвечиваться синим цветом на странице, вот так:
Как видите, работать с расширением просто – выделенное изображение тут же раскладывается по полочкам – и HTML, и CSS коды видны и понятны. В правом окошке в меню «Computed Style» можно поэкспериментировать с внешним видом изображения – уменьшить его, сместить, добавить рамку – да все, что угодно. Стили просто прописываются в этом окошке, и тут же меняется внешний вид нашего изображения. В левом окошке мы увидим подсказки о том, где искать наш элемент в файле стилей, в каком из div-ов. Тут все понятно – какой из элементов div кому подчиняется, и где его искать. Добившись желаемого результата, мы просто вносим эти поправки в файл стилей, и все. Пока мы работаем с каким-либо участком кода в расширении Google Chrome, этого никто из пользователей сайта не видит, кроме нас. Но после того как мы отредактируем файл стилей, изменения будут видеть все.
Анализ кода CSS в браузере Google Chrome
Передвигая курсор по странице и наводя его на разные элементы, мы увидим, что они по очереди подсвечиваются синим цветом с указанием их длины, ширины и названия блока в файле стилей style.css нашей темы. Выбрав нужный элемент, действуем по описанной схеме – панель «Computed Style» покажет все свойства элемента (выравнивание снаружи и внутри, размер выравнивания каждой стороны, путь к изображению, цвет объекта, цвет фона, размер шрифта и название шрифта, высоту и ширину блока). Для примера я пропишу в «Computed Style» новые свойства для этого изображения, но заведомо неправильные. Анализатор сразу укажет, что этот стиль нерабочий, и применять его нельзя или просто не имеет смысла – он не будет отображаться:
Сейчас попробуем на практике изменить внешний вид какого-либо элемента на странице. Конечно, не на этом блоге, а на тестовом поддомене, на нем и потренируемся чутка. Возьмем такой фрагмент страницы:
Попробуем изменить размер изображения прямо в панели инструментов от Google Chrome. Здесь видно, что изображения стоят в ряд, а значит, объединены в один элемент div. То есть, по идее, нужно все изображения привести к одинаковому размеру. Но сначала нужно представить себе, как они должны выглядеть в новом оформлении. Здесь видно, что размер картинки – 178х200px, и обрамлена она серой рамкой. Размер можно изменить в строке, которая выделена синим цветом, а цвет рамки – в инструменте «Computed Style». После таких двухминутных изменений наши кошечки выглядят вот так:
Это видно только нам, и в файл стилей эти изменения еще не внесены. Чтобы это сделать, нам нужно узнать, где искать элементы, управляющие изображением. Из анализатора видно, что изображение находится в div класса box featured_post. Теперь идем в файл style.css нашей темы, ищем там элемент box featured_post и правим его с теми значениями, которые мы подобрали в анализаторе. Вот так:
Все просто и быстро, если знать основы HTML и CSS. Таким образом, проверкой любого элемента можно узнать о нем все — стили, исходную информацию, имя элемента, исходный код, место в блочной верстке, и т.д. А схема, приведенная ниже, даст представление о блочном расположении элемента, и о том, что такое padding, margin и border:
Другие функции Google Chrome — анализ загружаемых элементов
Кроме исходного кода и кода CSS, в Хроме можно просматривать загруженные с сайта изображения, файлы стилей, скрипты, и так далее. Также можно просматривать использование файлов cookie, БД и кэша страниц. Но эти изменения мы можем использовать только в своем браузере. То есть, если мы отключим визуализацию изображений на сайте (при медленном соединении есть смысл отключить), то они не будут отображаться только у нас. Просто мы ускорим загрузку какого-то сайта у себя в браузере, и все. Если отключить выполнение скриптов, то и в списке загруженных файлов они не будут отображаться.
Думаю, что все-таки больше пригодится вкладка «Network» в расширении, которая отображает загружаемые файлы и все данные к этим файлам (тип, метод передачи (GET или POST), статус файла, инициатор загрузки, размер файла и время по временной шкале). Все элементы страницы в том порядке, в котором они выстроены в шаблоне, то есть, если первым элементом был скрипт, то и в таблице первым мы увидим скрипт, а потом все остальные элементы сайта – изображения, контент, файлы, и т.д.
Здесь видно, что есть и временная шкала, отдельная для каждого загружаемого элемента. То есть, нам уже в принципе можно не пользоваться разными интернет-сервисами, вычисляющими данные нашего сайта – у нас все под рукой, и мы можем этим управлять.
Как анализировать время загрузки сайта
Оригинальная и интересная функция – «Timeline», которая работает в реальном времени. Здесь можно подробно рассмотреть, сколько загружается каждый элемент страницы, узнать начало и конец загрузки, и много чего еще. У нас в руках – превосходное дополнение для инструмента «Network». Здесь увидим все загрузочные процессы, как используется память, и полное время загрузок.
И последнее, что мы рассмотрим для расширения Google Chrome – это вкладка «Audit», с помощь которой можно посмотреть ошибки на сайте и их причины, рекомендации о том, как ускорить время загрузки страниц, и эти рекомендации будут касаться не нашего браузера, а именно нашего сервера. То есть, польза для всех наших посетителей очевидна. Внизу списка увидим кнопку проверки «Run Audit», нажмем на нее (только нужно будет перегрузить страницу) и наш анализатор Google Chrome выдаст рекомендации, как ускорить сайт, с причиной и следствием. Все пункты «Network Utilization» открываются и содержат подробное описание проблем.
Для Google Chrome это, пожалуй, все, если коротко. Теперь перейдем к Мозилле и его плагину – Firebug.
Плагин Firebug для анализа кода страниц
Пришел черед плагина Firebug, который можно установить в браузер Firefox для анализа контента. Плагин установить очень просто – заходим в «Дополнения», и там во вкладке «Найти дополнения» пишем название плагина. Браузер перенаправит нас на страницу со всеми дополнениями Firebug, а там остается только установить плагин, вот так:
Теперь можно делать то же самое, что и в браузере Google Chrome, только будет это немного проще – и интерфейс понятнее, и вообще, все здесь на русском языке. Запустить расширение можно правой кнопкой мыши — щелкаем по интересующему нас объекту и нажимаем «Инспектировать элемент с помощью Firebug». Внизу экрана появится окно плагина Firebug, которое тоже будет разделено на две части – окно с исходным кодом страницы в HTML коде, и окно с CSS кодом элемента.
Что мне здесь нравится, так это разделение стилей. В исходном CSS коде указываются все значения, а также приводится иерархия стилей – что от чего унаследовано. Эта функция хорошо помогает, если блок контента или какой-то элемент меняется по новому прописанному стилю – тогда мы знаем, где искать высшую ступень, чтобы поменять стили там. Также есть функция подсветки кода, как и в Хроме, только более усовершенствованная — по странице водить, чтобы найти соответствующий блок или элемент, уже не нужно. Просто нажимаем на кнопку и наводим курсор на нужный элемент или участок.
Во вкладке панели инструментов Firebug «Скомпилированный стиль» найдем всю информацию о выделенном фрагменте, включая и унаследованные стили. Вкладка «Макет» показывает блочное построение фрагмента со всеми выравниваниями. Если навести курсор на блок, то на странице увидим направляющие линии, которые будут соответствовать выделенному фрагменту документа. На вкладке CSS панели инструментов плагина можно увидеть код основного документа и его отдельных элементов и плагинов.
Таким образом, практически использовать Firebug можно точно так же, как и анализатор от Google Chrome — проводить анализ кода и изучать его, править и вносить любые изменения прямо на странице с последующими изменениями в файле CSS шаблона. Но работать с плагином Firebug проще и быстрее, и особенно это касается предоставления информации об элементе. Это и понятно — Firebug создавался как отдельный функционал, поэтому и интерфейс, и расположение блоков с информацией более понятно, как и отображение кодов HTML и CSS. Особенно симпатичен функционал, с помощью которого без проблем найти нужный элемент или блок на странице для анализа и редактирования – кнопка «Анализировать элемент» 
в панели браузера.
Еще от Firebug — загрузка flash видео с Youtube и других видеосервисов
Еще одна любопытная вкладка в Firebug, которая похожа на функцию в Google Chrome «Network» — это вкладка «Сеть». Здесь все функциональнее, чем в Хроме, намного больше информации. Вся информация о сайте выводится тоже в порядке загрузки страницы, от первого запроса до последнего, но здесь мы сразу видим и временной промежуток, и домен элемента, и размер и статус ответа. Можно включить фильтрацию этой информации, то есть, мы можем сделать так, чтобы отображались только HTML запросы, CSS файлы и коды, JS скрипты, картинки и Flash элементы сайта.
Для каждого элемента есть свое описание, которое скрыто в списке. Если развернуть его, то увидим всю информацию об элементе – заголовок, в какой кодировке, сервер, версия браузера, cookie, хост, кэш. И так – для каждого элемента.
На этом, пожалуй, буду заканчивать. Как вы, наверное, поняли, работать с этими инструментами можно не только для анализа сайтов. Можно постараться и найти еще миллион решений, как применять эти инструменты. Вы сами видели, что их очень много, и каждый имеет развернутый функционал, поэтому невозможно в одной статье рассказать подробно обо всем. Если есть интерес, изучайте сами, и уверяю вас, вы обязательно найдете для себя что-то интересное. Я, например, люблю иногда побаловаться с вкладкой «Audit» в Google Chrome , а в Firefox — возможностью просто и быстро работать с файлами стилей, так как не всегда внешний вид какой-то темы полностью может устраивать. А пользоваться услугами дизайнера, если сам можешь это сделать – по меньшей мере, неразумно. Вот такие дела, друзья. У меня на сегодня все. До связи на волнах https://max1net.com/
Вконтакте
Google+
Понравилась запись? Подпишитесь на обновления по почте:
Читайте похожие статьи
max1net.com
Полезные расширения Firefox и Chrome
Здесь мы посмотрим ряд полезных расширений, которые, надеюсь, смогут вам пригодиться.
Если какое-то из расширений вас заинтересует – его можно поставить. В Firefox расширения устанавливаются из меню «Инструменты → Дополнения», в Chrome – через меню «Настройки → Расширения → (внизу) Ещё расширения» или напрямую из «магазина» https://chrome.google.com/webstore/category/home.
Для расширений других браузеров такого единого способа нет.
Это расширение добавляет наверх браузера панель с разнообразными инструментами:
Большинство возможностей, скорее, полезны для верстальщиков, но и для разработчиков кое-что есть.
Например:
- Disable Cache – полностью отключает кэш браузера
- Disable Cookies – браузер перестанет посылать и принимать Cookie. Впрочем, Firebug это тоже умеет (вкладка Cookie)
- Disable JavaScript – нужно редко, но иногда полезно
- Resize на нужное разрешение – у разработчиков мониторы большие, а у пользователей разные. Можно добавить своё разрешение.
Иконок там много, поэтому наверняка вы чем-то не будете пользоваться. Лишние иконки можно убрать. В Firefox(Win) это делается так: Правый клик на панель → Настроить → Перетащить лишние иконки с панели.
Это расширение позволяет сбросить кэш DNS одним кликом.
Оно нужно в тех случаях, когда вы меняете адреса в файле hosts и хотите, чтобы изменения вступили в действие тут же.
При установке в статусной строке, снизу, появляется кнопочка с IP-адресом. По клику на ней кэш DNS сбрасывается.
Здесь собраны расширения, улучшающие работу отладчика Firebug для Firefox.
Fire Rainbow Подсветка кода для Firebug FireQuery Для разработки под jQuery – выводит в разных местах вспомогательную информацию. Firebug Autocompleter Включает автодополнение для консоли, когда она в многострочном режиме. CSS-X-Fire Позволяет редактировать CSS в Firebug и сохранять изменения, интегрировано с редакторами от JetBrains (IntelliJ IDEA и другие).Даёт возможность открыть JSON-документ прямо в браузере.
Обычно браузер не понимает Content-Type: application/json и пытается сохранить JSON-файлы.
Но если в нём стоит это расширение, то он покажет файл в удобном виде, с возможностью навигации:
Расширение для просмотра XML для Chrome.
Остальные браузеры умеют это делать «из коробки».
Эти два расширения позволяют по-быстрому оценить скорость загрузки страницы, проанализировать массу возможных причин тормозов и получить советы по улучшению производительности.
Они очень похожи, но не идентичны, так что можно поставить оба.
Расширение для отключения назойливой рекламы и баннеров.
Режет не всё, но многое. Да, оно не для разработки, но настолько полезное, что я не смог удержаться и опубликовал его здесь.
Кстати, насчёт разработки… Бывает так, что AdBlock прячет рекламу на сайтах, которые мы разрабатываем. К хорошему быстро привыкаешь, и если юзер будет слать вам ошибки на страницах (а у вас их нет) – проверьте! Может быть, стоит отключить AdBlock для конкретной страницы и посмотр
learn.javascript.ru
просмотр исходного кода. Методы работы
Здравствуйте, уважаемые читатели.
Сегодня я проведу экскурс по одному из практических методов изучения html-разметки и css-стилей. А объектом нашего внимания в данном разрезе станет расширение FireBug. Изначально оно было создано для браузера Mozilla Firefox. На сегодняшний день Фаербаг также можно использовать в Opera, Google Chrome. Мы разберем его основные функции на конкретных примерах.
Содержание:
На моем блоге большой популярностью пользуются статьи, в которых я учу читателей стилизовать элементы блога с помощью css:
Во всех этих постах я приводила несколько образцов css- и html-кодов, при добавлении которых можно получить то или иное оформление. Сейчас вы узнаете, как самостоятельно редактировать любые элементы дизайна вашего сайта.
Как установить Фаербаг для Мазилы и других браузеров?
Для начала нужно установить дополнение Фаербаг в ваш браузер.
Можно скачать Firebug с официального сайта Мозиллы и установить его. Но проще будет перейти в раздел «Дополнения» браузера и ввести в строку поиска «Firebug», затем нажать «Установить».
В сегодняшней статье я расскажу именно о плагине Фаербаг для Мазилы, потому как это его базовая версия. Для остальных браузеров созданы версии FireBug Lite. Их функционал несколько сокращен.
Можно скачать Фаербаг для Хрома и Opera на официальных сайтах этих браузеров.
Замечу, что в Google Chrome есть собственный встроенный аналог FireBug.
Работать с ним можно, кликнув по странице правой клавишей и выбрать «Просмотр кода элемента», либо нажав F12. Сама я часто пользуюсь этим расширением для Гугл Хром. Однако, по моему мнению, для новичков Фаербаг более понятен и удобен. Кроме того, он переведен на русский язык в отличии от инструмента для просмотра кода в Хроме.
Для чего нужен FireBug?
В первую очередь ФайерБаг – это инструмент для просмотра исходного кода страницы или ее элемента. Этот код будет отличаться от кода в ваших файлах php шаблона WordPress. Однако изучение исходного кода дает понимание того, какие его части отвечают за те или иные элементы страницы.
Кроме того, FireBug позволяет править код прямо в браузере и следить за изменениями элементов. Эти изменения увидите только вы, после обновления страницы все станет как прежде. Если вы решите оставить внесенные вами правки, потребуется искать файлы шаблона, которые отвечают за выбранную вами часть страницы. В идеале, вы должны хорошо знать свой шаблон и за что отвечают все его файлы. Для начала изучите статью про структуру шаблона WordPress. Но если вы все же не можете найти, куда вносить изменения, ниже я расскажу про один из способов поиска необходимых файлов.
Как пользоваться 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). Кроме того, сюда можно добавлять дополнительные параметры стиля. Значения перечисленных показателей можно увидеть наглядно, если перейти на вкладку «Макет».
После того, как вы внесли правки, и результат вас удовлетворил, можно вносить изменения непосредственно в файл стилей.
Как найти необходимые файлы шаблона?
Один из методов поиска файлов шаблона с искомым кодом состоит в использовании Total Commander. В нем есть функция поиска файлов по содержимому («Команды» — «Поиск файлов» или Alt+F7). Скачайте архив с файлами сайта на свой компьютер через FTP-соединение. В этом может помочь статья об архивации файлов на сервере.
Теперь в коде, который отвечает за элемент, измененный вами в FireBug, найдите по возможности редко встречающуюся часть. Это может быть участок кода, помещенный в теги div или id.
Например, мне нужно найти такой участок: <div>
Он должен быть относительно уникален, иначе, может быть найдено слишком много файлов с одинаковыми частями кода.
Перехожу в скачанную папку с файлами WordPress и нажимаю поиск в Total Commander.
Нужно поставить галочку в графе «С текстом» и вписать туда искомое значение, по которому мы хотим определить нужный нам файл. Нажимаем поиск. Если файлов оказалось чересчур много, поищите другую часть кода в FireBug, которая будет более уникальной. Если же файлов несколько, открывайте их по одному и в редакторе (например, Notepad ++) и при помощи поиска ищите заданный текст (у меня «zar»). Проверьте, насколько весь блок соответствует тем значениям, которые вы видите с помощью дополнения FireBug. Если все сходится, вносите изменения в код файла и загружайте его на сервер.
Таким образом, с помощью Файрбага вы можете изучать файлы вашего движка и их наполнение. Это поможет вам лучше разбираться в его структуре и содержимом. Кроме того, вы можете использовать Фаербаг для Фаерфокс при изучении других сайтов, стиль которых вам интересен. Так вы сможете почерпнуть много нового в сфере html-верстки, css-классов и стилей, и в сайтостроении в целом.
Если у вас появились вопросы, задавайте их в комментариях к статье. Смотрим видео:
P.S. А я по традиции после Хибин поехала на свою малую родину, в Североморск. Тут зима в самом разгаре, мороз, метель и сугробы. Бегаю на лыжах и наслаждаюсь зимой, которой так не хватало жителям СПб в этом году.
pro-wordpress.ru
Как установить firebug для chrome
Как установить firebug для chrome?
Здравствуйте, уважаемые читатели и гости блога!
Современный скоростной браузер Chrome позволяет использовать различные расширения, которые увеличивают его возможности. Одним из таких расширений является Firebug for Google Chrome. Зачем он нужен? Firebug для chrome позволяет легко и просто находить и править нужный код своего сайта. Т.е. запустив Firebug chrome Вы спокойно мышкой, указываете на какой – либо элемент сайта (ссылку, текст, картинку – всё что угодно), и сразу видите тот кусок программного кода, на который Вы указали мышью.
Пример:
На картинке мышь направлена на дату 02.11.2011. Firebug выделил это место синим квадратом, а в своём окне он указал (подсветил и выделил синим цветом) на программный код, который и создал рассматриваемый элемент (в данном случае – дату).
Открываем браузер Chrome и идём по адресу в интернет-магазин Хром. В открывшемся окне ищем Firebug Lite for Goole Chrome и нажимаем кнопку Установить
Выскочит картинка с вопросом: Установить Firebug Lite for Goole Chrome? Жмём кнопку Установить. В правом верхнем углу браузера появиться картинка жука.
Всё. Расширение Firebug Lite for Goole Chrome установлено и готово к работе. Обратите внимание, что «жучок» серенький (неактивный). Для работы с этим расширением достаточно кликнуть на него, «жучок» окраситься в яркий цвет, и Firebug готов к работе!
Либо вызвать его нажатием F12.
Комментарии и ретвиты приветствуются.
Кстати, имеется и Firebug для Firefox (как установить и работать рассказано в статье Firebug для Firefox).
www.thin.kiev.ua
