Инструкции

Гид по инструментам разработчика (DevTools) для маркетолога

Проверяем адаптивность, измеряем скорость загрузки и не только
Гид по инструментам разработчика (DevTools)

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

Важно! DevTools выполняет многие функции, и они пригодятся разным специалистам. Мы в статье подробнее расскажем о том, как инструменты помогут маркетологам и дадим полезные ссылки на более подробные уроки от веб-разработчиков.

Вызываем инструменты разработчика в браузере

DevTools есть во всех браузерах — Google Chrome, Opera, Mozilla Firefox, Яндекс.Браузере. Инструменты разработчика можно запустить тремя способами:

  • Сочетанием клавиш «Ctrl + Shift + I».
  • Через меню браузера: в Google Chrome для этого нажмите на три точки в правом верхнем углу →  «Дополнительные инструменты» → «Инструменты разработчика». В остальных браузерах DevTools запускаются похожим способом.
  • Кликнув правой кнопкой мыши на нужной странице: правая кнопка мыши → «Посмотреть код». Открывать нужно именно «Посмотреть код», а не «Просмотр кода страницы».

Важно! Мы рассказываем о работе с DevTools на примере браузера Google Chrome. В нем есть русская версия DevTools, но мы будем показывать все на английской.

Всего в интерфейсе есть 11 вкладок: «Elements», «Console», «Sources», «Network», «Performance», «Memory», «Application», «Security», «Lighthouse», «Recorder», «Performance insights». Разберемся в функционале каждой подробнее и на конкретных примерах.

Проверяем адаптивность

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

Как проверить адаптивность страницы
Смартфон и ноутбук — иконки проверки адаптивности

Кликните на нее и вверху страницы появится новая панель. В ней вы сможете выбрать режим отображения с телефона или компьютера, ориентацию смартфона и даже его модель.

Проверка адаптивности сайта с помощью DevTools
Проверяем адаптивность блога Unisender

В блоге Unisender мы писали и про другие способы проверки адаптивности (мобильности) сайта.

Меняем расположение и дизайн элементов на странице

На вкладке «Elements» отображается HTML- и CSS-код открытой страницы. Здесь можно отредактировать CSS-, JavaScript- и HTML-файлы.

Чтобы выбрать определенный код, кликните на иконку курсора в левом верхнем углу DevTools или нажмите «Ctrl + Shift + C». После этого вы можете наводить мышку на нужное содержимое страницы, а строка с кодом будет автоматически подсвечиваться в редакторе.

Как выделять нужные строки кода с помощью DevTools
Выделяем нужные строки кода

Чтобы изменить выделенный элемент, кликните на него левой кнопкой мыши дважды — строка с кодом зафиксируется в редакторе. В начале этой строки появятся три точки — кликните на них и выберите «Edit as HTML». Теперь вы можете править HTML-код: добавлять свой текст, удалять существующий и устанавливать новую разметку. А чтобы посмотреть на изменения, просто кликните левой кнопкой мыши в свободное место на экране и сайт обновится.

Как изменить код страницы с помощью DevTools
Изменяем код страницы

Также с DevTools можно изменить расположение элементов относительно друг друга. Для этого нужно выбрать нужный HTML-код и перетащить его вверх или вниз.

Как поменять местами элементы через DevTools
Перетаскиваем объекты через код страницы

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

Как изменить стиль сайта с помощью DevTools
Меняем стили на сайте

Работаем с xPath

Через инструменты разработчика можно получить XPath-запрос к любому элементу на странице. Для этого откройте вкладку «Elements», выберите нужный фрагмент кода и кликните на него правой кнопкой мыши. Выберите «Copy» → «Copy XPath».

Как найти XPath через DevTools
Копируем XPath абзаца

Затем полученный XPath-запрос можно использовать в настройке парсинга, например, для SEO-анализа контента.

Также здесь можно тестировать XPath. Для этого нужно нажать «Ctrl + F4» и написать нужный запрос в появившейся строке. DevTools подсветит найденные по нему элементы. Если ничего не найдет, значит, в XPath-выражении ошибка.

Делаем скриншоты в высоком качестве

DevTools позволяет сделать скриншот сайта или веб-приложения. Для этого нужно открыть инструменты разработчика, нажать «Ctrl+Shift+P», написать «screenshot» и выбрать нужный вариант.

Варианты скриншотов в DevTools
Такие скриншоты можно сделать через DevTools
  • «Capture area screenshot» — делает скриншоты определенной области экрана. Работает так: выбрали команду → выделили мышью нужную область для скриншота.
  • «Capture full size screenshot» — делает скриншот всей страницы. В него войдут все области страницы. Даже те, что не помещаются на вашем экране.
  • «Capture node screenshot» — делает скриншот элемента, который вы выделите на вкладке «Elements». Работает так: выбрали нужный элемент → нажали «Ctrl + Shift + P» и ввели команду «screenshot» → выбрали «Capture node screenshot».
  • «Capture screenshot» — делает скриншот отображаемой части страницы.

Все варианты скриншотов сохраняются в формате PNG. 

В блоге мы также разбирали другие инструменты для быстрого скриншотинга.

Проверяем корректность загрузки кода сайта

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

Проверка сайта через «Console»
Проверка сайта через «Console»

Полезные ссылки по работе с этой вкладкой:

Узнаем содержимое сайта

На вкладке «Sources» можно посмотреть все файлы из всех источников, к которым обращается сайт при работе.

Как посмотреть содержимое сайта через DevTools
Смотрим содержимое сайта через DevTools

Так, например, можно узнать, на какой CMS построен сайт. На скриншоте видно папки с приставкой wp — легко догадаться, что он сделан на WordPress. Если открыть сайт на CMS Bitrix, в «Sources» так же будет видна одноименная папка.

Как узнать CMS сайта через DevTools
Проверяем, на какой CMS работает сайт

Еще вкладка «Sources», например, позволяет узнать, какие пиксели установлены на сайте. Их можно заметить по словам «Analytics», «GTM», «Pixel» и т.д.

Ищем пиксели через вкладку «Sources»
Ищем пиксели через вкладку «Sources»

Второй вариант — изучить файловую систему и заметить папки «Google Analytics», «Google Tag Manager» и т.д.

Ищем пиксели через файлы в «Sources»
Ищем пиксели через файлы в «Sources»

Проверяем скорость загрузки сайта

Эта вкладка — встроенный прокси-анализатор, который позволяет отслеживать HTTP-трафик страницы во время и после ее загрузки.

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

Вкладка представлена в виде таблицы, в которой можно посмотреть статус запроса (выполняется он или нет), количество запросов, время загрузки всех данных. А также время загрузки DOM (программный интерфейс для HTML и XML документов, благодаря которому создаются скрипты) и ресурсов, которые участвуют в отображении сайта.

На вкладке можно отследить скорость загрузки сразу всех элементов, а можно разбить их по группам — JavaScript-код, CSS-стили, картинки, шрифты и т.д.

Как проверить скорость загрузки сайта с помощью DevTools
Проверяем скорость загрузки сайта

Скачиваем картинки, видео и аудио

Это можно сделать также через вкладку «Network». Для этого нужно открыть нужную страницу, нажать «Ctrl + R» и из списка всех файлов выбрать нужное фото, видео или музыку. Чтобы искать было проще, можете выбрать «Img» для картинок и «Media» для видео и музыки.

Как скачать картинку через DevTools
Как скачать картинку через DevTools

А чтобы не открывать все файлы сто раз в поиске нужного, в правом окне можете переключиться на вкладку «Preview».

Узнаем, как сайт нагружает ПК пользователя

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

Проверка работы сайта через инструменты разработчика
Отслеживаем, как сайт нагружает устройство пользователя

Смотрим, сколько весит сайт

Для этого переходим во вкладку «Memory». Она помогает отслеживать, как JavaScript-код нагружает систему пользователя и сколько памяти съедает при этом. Подробно останавливаться на вкладке не будем, потому что она мало полезна маркетологу. 

Вкладка Memory в инструментах разработчика
Смотрим, сколько памяти занимает наш сайт

Чистим хранилище и кэш

На вкладке «Application» можно очищать хранилище и кэш, а также управлять базами данных.

Вкладка Application в DevTools
Очищаем хранилище и кеш

Чтобы очистить кэш сайта, нужно перейти в раздел «Storage» и кликнуть на «Clear site data». А чтобы удалить и куки, поставьте галочку напротив «including third-party cookies».

Как очистить кеш сайта с помощью DevTools
Чистим кеш сайта

Проверяем наличие сертификатов

На вкладке «Security» DevTools показывает результаты автоматической проверки сертификатов сайта и степень защищенности соединения. Сюда же попадает проверка всех подключаемых ресурсов. А еще здесь можно узнать, какие именно запросы не защищены.

Как проверить наличие сертификата у любого сайта через DevTools
Проверяем наличие сертификатов у сайта

Анализируем работу сайта

Вкладка «Lighthouse» — полноценный инструмент для аналитики сайта и выявления недостатков. Здесь можно отслеживать:

  • Скорость загрузки сайта и работы. 
  • Адаптированность под смартфоны и компьютеры.
  • Корректность верстки.
  • SEO-оптимизацию.
  • Поддержку Progressive Web App — проверить сайт на код ответа 200. 
  • Best Practices. Чтобы проверить безопасность сайта и выяснить, применяются ли современные стандарты веб-разработки.
Проверка скорости работы сайта через Lighthouse
Запускаем проверку через Lighthouse

Каждый показатель оценивается от 0 до 100 и подсвечивается разным цветом. Красный — ниже 49 баллов, оранжевый — 50–89 баллов, зеленый — 90–100 баллов.

Оценка сайта по Lighthouse
Оценка сайта по Lighthouse

Проверяем, как сайт реагирует на действия пользователя

Вкладка «Recorder» позволяет записать, воспроизвести и измерить, как быстро сайт реагирует на действия пользователя (например, в процессе оформления заказа). Чтобы начать запись, выберите вкладку «Recorder» и нажмите «Start recording». 

Записываем отзывчивость сайта через DevTools
Записываем отзывчивость сайта

C ее помощью можно записать, как пользователь добавил товар в корзину, перешёл в корзину, начал оформлять заказ и т. д. Здесь же можно имитировать низкую скорость интернет-соединения и проверить, как сайт работает в этом случае. Чтобы включить имитацию, в правом верхнем углу вкладки откройте выпадающий список «▼».

Проверяем, как сайт работает на разных скоростях интернет-соединения
Проверяем, как сайт работает на разных скоростях интернет-соединения

Снова измеряем скорость загрузки сайта

Вкладка «Performance Insights» в Chrome DevTools позволяет пользователям измерять скорость загрузки страницы. Для этого инструмент вычисляет время, которое нужно для отображения страницы, загрузки сетевых ресурсов загрузки интерактивных элементов.

Для анализа DevTools посещает сайт от лица пользователя и взаимодействует с ним. 

Чтобы запустить анализ, выберите вкладку «Performance insights» и нажмите на кнопку «Measure page load».

Проверка «Performance Insights» через инструменты разработчика
Запускаем проверку «Performance Insights»

Полезные ссылки по работе с вкладкой «Performance Insights»:

Коротко о главном

DevTools — это инструменты разработчика в браузерах, которые помогают в создании, тестировании, оптимизации сайтов.

Инструменты разработчика можно запустить сочетанием клавиш «Ctrl + Shift + I», через основное или контекстное меню браузера (на примере Google Chrome — «Посмотреть код» или «Просмотр кода страницы»).

DevTools могут пригодиться маркетологу для разных задач, например:

  • Проверки адаптивности. Нужно нажать иконку Toggle device toolbar или нажать «Ctrl + Shift + M».
  • Тестирования изменений в дизайне. Через редактирование кода на вкладке Elements.
  • Составления и проверки XPath-запросов. Тоже на вкладке «Elements».
  • Делать скриншоты, в том числе всей веб-страницы. Нужно нажать «Ctrl+Shift+P», написать «screenshot» и выбрать подходящий вариант.
  • Узнать CMS сайта и какие там установлены счетчики и пиксели. С помощью вкладки «Sources».