Главная Веб-разработка Chrome DevTools: основные инструменты и полезные функции

Chrome DevTools: основные инструменты и полезные функции

от admin

Ищем и исправляем ошибки, редактируем код и повышаем скорость веб-приложений.

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

Chrome DevTools: основные инструменты и полезные функции

Изображение: Skillbox Media

Изменяем страницы без погружения в код

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

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

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

document.designMode = ‘on’

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

Chrome DevTools: основные инструменты и полезные функции

Источник: Skillbox Media

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

Анализируем доступность сайта

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

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

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

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

Chrome DevTools: основные инструменты и полезные функции

Скриншот: Skillbox Media

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

Читать также:
Словом года в номинации IT по версии портала «Грамота.ру» стал «промпт»

Chrome DevTools: основные инструменты и полезные функции

Скриншот: Skillbox Media

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

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

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

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

Chrome DevTools: основные инструменты и полезные функции

Скриншот: Skillbox Media

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

Писать код можно не только в специальных программах — обычный браузер тоже подходит. Для этого там есть интерпретатор, который умеет исполнять команды на 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.

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

Похожие статьи