Что можно делать в Chrome DevTools: 5 полезных функций для начинающих

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

Почему именно Chrome? Потому что на его движке (Chromium) работают почти все современные браузеры: Opera, Microsoft Edge, Brave и даже не к ночи упомянутый Amigo :)

Для начала — откроем «Инструменты». Это можно сделать как минимум тремя способами:

• Одной кнопкой — F12.
• Сочетанием клавиш — Ctrl + Shift + I в Windows или Command + Option + I в macOS.
• Через меню: нажимаем на три точки → «Дополнительные инструменты» → «Инструменты для разработчиков».

Теперь рассмотрим ситуации, когда DevTools могут упростить жизнь веб‑разработчику.

Искать и исправлять баги

Ситуация: вы сделали свой сайт, а он работает как-то несуразно — картинки не грузятся, кнопки не нажимаются, слайдеры уехали в подвал, а вместо красивых шрифтов стандартный Times New Roman. Как быть?

Можно перелопатить весь код проекта и найти ошибки вручную. Но если сайт большой и сложный, на это уйдёт много часов.

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

На нашем сайте Chrome обнаружил две проблемы: потерялись фотографии и CSS. Так бывает, когда какая-то строка в коде ссылается на несуществующий файл. Например, если мы вместо реально существующей картинки photo.png случайно вызываем foto.png.

Делаем всё как надо и получаем идеально работающий лендинг для продажи путёвок в Доминикану:

Редактировать исходный код

Вся внешняя сторона интернета пишется на трёх языках: HTML, CSS и JavaScript. Если знать их на базовом уровне, можно переделать любой сайт как вам нравится: перекрасить фон, поменять шрифты, добавить обводку картинкам. Вот как это сделать с помощью DevTools:

• Наводим курсор на элемент, который хотим изменить.
• Кликаем правой кнопкой и выбираем «Посмотреть код» — откроется вкладка Elements.
• Браузер подсвечивает элемент и показывает, какой код за него отвечает.
• А дальше дело за нами — где-то цвета докрутить, где-то обводку поменять. В общем, всё, что придумаете.

Например, мы решили поменять цветовую гамму нашего лендинга про Доминикану с холодной на тёплую — лето же всё-таки:

Верстать страницы без кода

Если активировать «режим дизайна», можно редактировать сайты в Chrome без кода — как обычный текст. Вот зачем это может пригодиться:

• Для работы — например, чтобы проверить, не «расползётся» ли макет, если загрузить туда новый контент. Это важная задача для веб-дизайнера.
• Для развлечения — например, чтобы разыграть друзей или исправить оценки в электронном дневнике. 🤫

Чтобы перейти в дизайн-мод, откройте вкладку Console в инструментах разработчика и запустите вот такую команду:

document.designMode = 'on'

Теперь можно закрывать консоль и делать всё, что душа просит. Например, мы решили заменить текст в разделе «О проекте» в Skillbox Media на программистские цитаты. Почему нет?

Единственный момент — все изменения видны только вам и сбросятся сразу после перезагрузки страницы. Так что прокачать сайт навсегда не получится. А жаль.

Проектировать мобильные сайты

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

Вот что можно настраивать с его помощью:

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

Допустим, нам надо посмотреть, как выглядит сайт на iPhone 12 Pro. Чтобы это сделать, открываем инструменты разработчика и нажимаем на кнопку слева от вкладки Elements. Выглядит она так:

Откроется окно просмотра, которое можно растягивать и подстраивать под размер любого устройства:

Разобраться со скоростью

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

• «Сеть» — посмотреть, сколько времени занимает загрузка сайта.
• «Производительность» — узнать, как сайт ведёт себя после загрузки и как влияет на процессор пользователя.
• «Память» — понять, какие части кода подъедают оперативку и как с этим бороться.

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

Бонус: запускаем скрипты

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

Вот как это сделать:

• Берём код на JavaScript.
• Вставляем в консоль браузера.
• Браузер проверяет его на ошибки, а потом выполняет построчно.
• Происходит магия.

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

var script = document.createElement('script'); script.src = "https://safronovmax.github.io/LoveCursor/birthday.js"; document.body.appendChild(script);

Попробуйте и расскажите друзьям, что получилось :)

Что-то ещё?

Chrome DevTools — это как дедушкин гараж на даче: инструментов так много, что за один день не разберёшь. Если хотите глубже в это погрузиться — посмотрите официальную документацию по DevTools от Google.

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