Инструменты разработчика в браузере: как быстро поправить верстку страницы

Инструменты разработчика (DevTools) — это специальный режим браузера, в котором вы можете:

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

В статье рассмотрим, как использовать инструменты разработчика в браузере Google Chrome*, чтобы решить описанные выше задачи во время верстки страниц на GetCourse.

*в других браузерах внешний вид и количество возможностей может отличаться

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

1. С помощью горячих клавиш:
   • F12 для Windows,
   • Cmd+Shift+I для Mac.
2. Кликните правой кнопкой мыши на странице и нажмите «Просмотреть код».

3. Нажмите кнопку «Настройки и управление Google Chrome» — вкладка «Дополнительные инструменты» — «Инструменты разработчика».

При переходе в режим разработчика вы увидите два рабочих поля:

• HTML-код страницы,
• CSS-код страницы.

Работу с ними мы рассмотрим в разделах статьи ниже. Кроме них вам также доступно два режима работы:

• выбор элемента на странице — помогает быстро выбрать нужный элемент на странице и получить о нем информацию;
• панель инструментов устройств (или эмулятор устройств) — с его помощью вы можете оценить внешний вид страницы на устройствах с разным экраном.

Для этого:

1. Нажмите на маленькую иконку стрелки.

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

3. Нажмите на элемент мышкой — вы сразу перейдете к нему в окне с HTML-кодом.

Аналогичный способ перехода к элементу в HTML-окне — нажать правой кнопкой мыши на интересующем элементе и выбрать «Просмотреть код».

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

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

Вы попадете в эмулятор мобильных устройств. Здесь вы можете:

• в выпадающем меню выбрать одно из устройств из списка,

• добавить устройство в список и затем выбрать его,

• выбрать в выпадающем списке «Отзывчивое устройство» и задать собственные значения размера экрана устройства,
• задать масштаб отображения экрана устройства.

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

Всю основную работу с версткой вы можете вести на вкладке «Элементы», например:

• изменить содержимое HTML-элемента,
• скопировать или удалить элемент,
• изменить CSS-свойство элемента (шрифт, цвет и т.д.),
• протестировать оформление разных состояний элемента (например, при наведении курсора).

Рассмотрим данные возможности ниже ↓

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

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

2. Нажмите клавишу F2 — вы перейдете в режим изменения блока.
3. Внесите изменения и нажмите на любую строчку в HTML-коде, чтобы они отобразились.

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

Чтобы скопировать элемент:

1. Выберите его в режиме выбора элементов.
2. Нажмите на него правой клавишей мыши — «Повторяющийся элемент».

Элемент скопируется рядом с оригиналом.

Чтобы удалить элемент:

1. Выберите его в режиме выбора элементов.
2. Нажмите на него правой клавишей мыши — «Удалить элемент» или клавиша Delete на клавиатуре.

С помощью инструментов разработчика вы можете:

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

Чтобы изменить свойство:

1. Выберите элемент — в отдельном окне на вкладке «Стили» вы увидите все его свойства, например, цвет, размер, шрифт и т.д.

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

Также вы можете добавить новое свойство элементу. Для этого:

1. Выберите элемент.
2. Нажмите на блок CSS с свойствами нужного блока.
3. Пропишите новое свойство.

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

Например, у нас есть кнопки, при наведении на которые меняется их цвет. Мы хотим посмотреть, как будет смотреться другой цвет. Для этого:

1. Выберите элемент.
2. Нажмите на вкладку «: hov» и выберите нужное состояние элемента. В нашем примере нужно состояние при наведении курсора — «hover».

3. Найдите строку с цветом. Если кода на вкладке «Стили» много, можно перейти на вкладку «Вычисленные» — здесь будет отображаться только тот код, который применен непосредственно к данному объекту.

4. Измените цвет с помощью палитры. На вкладке «Вычисленные» для этого нужно предварительно нажать на стрелку, которая перебросит вас на нужное место кода на вкладке «Стили».

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

Не для всех ошибок можно посмотреть вариант исправления сразу на вкладке «Стили». Иногда придется сразу применить исправление к коду, чтобы увидеть результат. Как применить изменения к коду, рассмотрим в следующем разделе ↓

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

Внести изменения могут:

• владелец аккаунта,
• администратор,
• сотрудник с правом «Может управлять CMS».

Для этого:

1. Выберите элемент.
2. Найдите свойства элемента, которые нужно изменить.
3. Справа будет отображаться номер строки кода, где прописаны данные свойства — нажмите на него.

4. От нужной строки (в нашем примере 414) поднимитесь вверх до HTML-тегов. В них будет указан код блока — «data-code».
5. Скопируйте значение кода блока.

6. Перейдите в режим редактирования страницы.
7. Откройте инструменты разработчика на вкладке «Элементы» и нажмите Ctrl+F для вызова строки поиска.
8. Вставьте скопированный ранее код блока в поисковую строку — блок с нужным кодом подсветится на странице.

9. Откройте настройки и найдите нужный код. Это можно сделать через поисковую строку браузера.
10. Вставьте или измените код, нажмите «Сохранить» и опубликуйте изменения.

В следующей статье разбираемся, что такое прелоадер и как с помощью стороннего кода добавить его на страницу → «Прелоадер: как добавить на страницу экран загрузки».