Гид по инструментам разработчика (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, в левом верхнем углу будет иконки компьютерной мыши, а рядом — смартфона и ноутбука.

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

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

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

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

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

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

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

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

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

• Как редактировать стили
• Как найти нерабочий CSS
• Как найти неиспользуемый CSS

Работаем с xPath

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

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

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

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

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

• «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» можно посмотреть все файлы из всех источников, к которым обращается сайт при работе.

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

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

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

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

• Как запускать фрагменты кода на любой странице.
• Как найти неиспользуемый JavaScript.

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

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

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

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

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

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

• Начало работы с вкладкой Network.
• Как решить проблемы с загрузкой файлов.
• Как пользоваться панелью Network.

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

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

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

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

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

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

• Как оптимизировать скорость сайта.
• Как пользоваться справочником анализа производительности.

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

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

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

• Устранение проблем с памятью — рекомендации от Google.
• Устранение проблем с памятью — рекомендации от Microsoft.

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

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

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

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

• Работа с хранилищем, базами данных и кэшами: инспекция и управление.
• Осмотр и чистка cookies.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Полный гид по инструменту от Google.

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

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

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

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

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