Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Chrome DevTools

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

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

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

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

Chrome Dev Tools

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

  1. Кликнуть правой кнопки мыши в любом месте страницы и выбрать пункт Просмотреть код элемента (Inspect в английской версии браузера).
  2. Воспользоваться комбинацией клавиш Ctrl + Shift + I (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 DevTools, которые вам стоит знать на начальном этапе. Если пытаться расписать все возможности, то можно составить целую профессию. Веб-инспекторы очень мощные инструменты, которые несомненно помогут вам на любом этапе становления. Также это незаменимый помощник в реальной работе. Старайтесь всегда узнать что-то новое об этих инструментах.

Дополнительное задание

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


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Зарегистрироваться

или войти в аккаунт

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

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».