Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Chrome DevTools — Основы современной верстки

Видео может быть заблокировано из-за расширений браузера. В статье вы найдете решение этой проблемы.

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

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

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

В этом уроке мы изучим основные моменты при работе в Chrome DevTools, который встроен в браузер Google Chrome. Принципы, которые будут показаны, также применимы и к инспекторам в других браузерах. Они все похожи, поэтому проблем при переходе из браузера в браузер возникнуть не должно.

Chrome Dev Tools

Чтобы открыть Chrome DevTools, можно воспользоваться одним из двух путей:

Кликнуть правой кнопкой мыши в любом месте страницы и выбрать пункт Просмотреть код элемента (Inspect в английской версии браузера).
Воспользоваться комбинацией клавиш Ctrl + Shift + I или F12 для Windows и Linux, или Cmd + Opt + I для операционной системы MacOS.

Внешний вид Chrome DevTools

После открытия вы изначально попадете во вкладку Elements. Это самая важная вкладка для новичков. Остальные вкладки также несут огромное количество полезной информации, но в настоящее время они вам скорее помешают, так как достаточно специфичны. Но давайте вкратце опишем назначение каждой из основных вкладок:

Elements — здесь показывается весь HTML и CSS код. В этом уроке мы подробнее поговорим об этой вкладке.
Console — вкладка консоли позволяет смотреть вывод JavaScript, а также писать свой код на этом языке для тестирования и отладки страницы.
Sources — все подгруженные файлы из всех источников. Здесь хорошо можно отследить, сколько информации вы получаете от внешних ресурсов.
Network — здесь можно отследить все, что касается загрузки вашего сайта: файлы, их размер, скорость загрузки, тип запроса к сайту, его внутренние части и так далее. В общем, любой запрос, который делает ваш сайт, отображается в этой вкладке.

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

Вкладка Elements

Вернемся к вкладке Elements. Условно она делится на две большие группы — работа с HTML и работа с CSS. Область работы с HTML представлена следующим образом:

Область работы с HTML в Chrome DevTools

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

На картинке выше эта вложенность следующая:

html body.min-vh-100 div.mb-n5 div.row.no-gutters div.col-sm.overflow-hidden div.my-4

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

<html>
  <body class="min-vh-100">
    <div class="mb-n5">
      <div class="row no-gutters">
        <div class="col-sm overflow-hidden">
          <div class="my-4">А вот и наш выбранный блок :)</div>
        </div>
      </div>
    </div>
  </body>
</html>

Откройте контекстное меню (правый клик мыши) на любом элементе HTML в веб-инспекторе. Вы увидите все возможные действия с конкретным HTML-элементом.

Контекстное меню DevTools

Давайте взглянем на основные пункты:

Add Attribute — добавить произвольный атрибут к элементу HTML.
Edit Attribute — изменить произвольный атрибут у элемента HTML.
Edit as HTML — возможность изменить HTML. В этом случае для редактирования вам станет доступен блок, который вы выбрали, и все элементы внутри него. Такие элементы называются дочерними. А блок, который вы выбрали, для них будет родительским. Эти два слова вам будут очень часто встречаться при создании верстки.
Delete Element — удаление элемента из верстки.

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

Вторая область во вкладке Elements относится к CSS.

Область работы с CSS в Chrome DevTools

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

Styles — в этой вкладке можно просмотреть/отредактировать/добавить стили для элемента.
Computed — во вкладке собраны все стили, которые применились к элементу. Это наглядная иллюстрация работы принципа каскадности в CSS. Здесь вы увидите не только те стили, которые указали для элемента, но и те, которые добавились к элементу из наследуемых свойств, а также свойств по умолчанию в браузере. Также в этой вкладке наглядно представлена блочная модель текущего элемента. На ней можно увидеть все, что влияет на высоту текущего элемента.

Вкладка Styles

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

Внешний вид Styles в Chrome DevTools

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

margin-bottom
margin-top
box-sizing
display

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

Ниже этих селекторов можно увидеть блок Inherited from .... Дословно это можно перевести как Наследованные стили от .... На примере выше стили наследуются от селектора body.min-vh-100. При этом в них выделены те стили, которые непосредственно влияют на элемент. Остальные стили бледного цвета не наследуются.

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

Вкладка Computed

Теперь переключимся на вкладку Computed. Она выглядит следующим образом:

Внешний вид Computed в Chrome DevTools

И она делится на несколько основных областей. Это в последний раз, честно :)

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

width — ширина элемента
height — высота элемента
border — визуальные границы элемента
margin — внешние отступы от элемента
padding — внутренние отступы

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

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

Это все самые базовые вещи о Google Chrome DevTools, которые вам стоит знать на начальном этапе. Если пытаться расписать все возможности, то можно составить целую профессию. Веб-инспекторы — очень мощные инструменты, которые несомненно помогут вам на любом этапе становления. Также это незаменимый помощник в реальной работе. Старайтесь всегда узнать что-то новое об этих инструментах.

Самостоятельная работа

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