Как использовать панель разработчика в браузере для работы с кодом сайта 7


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

Именно работу с html кодом, css стилями и адаптивностью в панели разработчика мы сегодня и рассмотрим. Это те инструменты, которые требуются для решения большинства задач.

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

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

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

Пример анализа в панели

 

А далее, дело техники, копируете и вставляете к себе на сайт.

Другой вариант использования панели, – это когда вы хотите что-то сделать на сайте, но пока не знаете, как это будет выглядеть.

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

Открытие панели вебмастера и знакомство с интерфейсом

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

Интерфейс панели в разных браузерах будет отличаться, но принципы работы схожие.

Панель в браузере Яндекс

Мне больше нравится панель в браузере Firefox.

Панель в браузере Firefox

Сама панель поделена на две половины и содержит вкладки и инструменты для работы.

Интерфейс панели

В панели можно просматривать HTML код страницы и редактировать его тут же. Для этого выбираете нужный элемент, нажимаете правую кнопку мышки и в меню выбираете «Править как HTML (Edit as HTML)».

Редактирование html кода

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

Управление стилями

Здесь же можно узнать в каком файле находятся стили, и на какой строке.

Как проанализировать html элемент на сайте и узнать его стили css

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

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

Исследовать элемент

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

Код и стили элемента

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

Новые стили

И если со стилями всё достаточно просто, то при работе с кодом html нужно понимать его целостность. То есть каждый элемент имеет теги, в которых он находится. Это могут быть абзацы, ссылки, изображения и так далее. Чаще всего это блоки DIV, которые имеют открывающий тег <div> и закрывающий </div>. И в панели это всё хорошо видно.

Пример кода html

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

В видеоуроке на этом моменте я остановлюсь подробно. А если хотите быстро освоить базовые знания по html и css, советую перейти на страницу «Бесплатно» и скачать курсы Евгения Попова.

Как скопировать код html из панели в файлы сайта

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

Итак, рассмотрим пример копирования баннера с моего блога и переноса его на другой сайт.

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

Копирование кода

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

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

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

Как перенести стили из панели разработчика в файлы сайта

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

Далее, копируете стили из панели разработчика, и вставляете в файл style.css или другой файл, отвечающий за стили в вашей теме.

Копирование стилей

Затем открываете в новой вкладке административную панель сайта – «Внешний вид»«Редактор» — файл, отвечающий за стили. Обычно это style.css.

Открытие файла стилей

Я же предпочитаю делать все эти манипуляции через ftp-соединение, для меня это удобнее. Так как при работе в Notepad++ есть подсветка кода и нумерация строк. А это сильно помогает, когда нужно непросто скопировать стили, а внести изменения в имеющиеся. По номеру строки эти стили легко найти.

Как проверить адаптивность шаблона в панели разработчика

Для перевода панели в адаптивный режим нужно нажать сочетание клавиш CTRL+SHIFT+M или кнопку в панели разработчика, которая в разных браузерах расположена по-разному.

Кнопка адаптивного вида

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

Управление адаптивным видом

Заключение

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

Использование панели и навыки работы с кодом и стилями незаменимы при работе с сайтами и партнёрскими программами.

Берите инструмент на вооружение, он вам пригодится ещё много раз.

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

Друзья, желаю вам успехов. До встречи в новых статьях.

С уважением, Максим Зайцев.



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

7 коммент. к статье “Как использовать панель разработчика в браузере для работы с кодом сайта

  • Иван

    Привет, Максим!

    Не понимаю, как сделать меню в виде горизонтального блока:
    Мне вот так нужно:
    Машина дерево ВордПресс

    А получается:
    Машина
    Дерево
    ВордПресс

    Подскажи, именно CSS рецепт, а то я весь интернет перешарил, а решения не нашёл. Идентификатор и класс меню известен, нужно именно решение. Заранее спасибо.

    • Максим Зайцев От автора

      Вань, привет. Обычно делается блок Див, в него помещается список ul и li. Назначаешь классы и затем применяешь стили display: block; и float: left; Если просто то блок будет выглядеть так:
      div style="display: block;" class="1">
      ul style="list-style: outside none none;" class="3">
      li style="float: left; margin-right: 5px;" class="3">Один
      li style="float: left; margin-right: 5px;" class="3">Два
      li style="float: left; margin-right: 5px;" class="3">Три
      /ul>

      (треугольных скобок не хватает, код с ними не проходи, но суть ты понял)Разумеется, классы подставляешь свои и стили переносишь в файл стилей. Удачи!

      • Иван

        Спасибо, Максим, понял, Я изначально не правильно начал, тупо ссылки ввел через пробел. Короче,получилось следующее:
        # идентификатор a {
        display: inline-block;
        padding: 5px 15px;
        }
        Ну и преобразования в самом меню:

        # идентификатор {
        display:block;
        width:100%;
        text-align: center; }

        Ну, а вообще, как я понял, лучше всего создавать меню с помощью маркированного списка? Потом делать его горизонтальным display: inline-block; ну и дорабатывать его (отступы, цвета, изображения и т.д.)

  • Иван

    Привет, Максим! Я снова с вопросом!

    Вот у меня FeedBurenr подписка, если я сужаю её, то она начинает отображаться некорректно.

    Что я сделал?

    @media screen and (max-width:1200px){
    #hero {
    visibility: hidden;

    }}

    Экран сворачивается, подписка исчезает.

    После этого, я вставляю ещё одну подписку, но уже настроенную под небольшие экраны. Следовательно, я вбиваю
    @media screen and (min-width:1200px) {
    #fast {
    visibility: hidden;
    } }

    Подписка с идентификатором Fast не видна на больших экранах

    Максим, внимание, вопрос:

    Место, которое занимает скрытая FeedBurner форма, оно остаётся, можно ли его как нибудь убрать? То есть, чтобы скрытая форма не была видна? Я вижу у тебя нечто подобное, но как ты это реализовал, не совсем понял.

    • Максим Зайцев От автора

      Вань, привет. Когда ты используешь visibility: hidden; — место под этот элемент остаётся. А если будешь использовать display: none; — пустое место исчезнет. У меня реализована так, что на экранах монитора видна форма с графическим фоном, а при адаптации шаблона фон убираю, добавляю рамку и прочие стили. То есть в обычных стилях одно оформление, а в медиазапросах их упрощённый вариант. Форма при этом остаётся одна и та же.