Проверяем адаптивность, измеряем скорость загрузки и не только
DevTools — это инструменты разработчика в браузерах, которые помогают в создании, тестировании, оптимизации сайтов или веб-приложений. С помощью DevTools можно проверять адаптивность сайта, делать скриншоты, измерять скорость загрузки и не только. Рассказываем подробнее, что это за инструменты и как с ними работать.
Важно! DevTools выполняет многие функции, и они пригодятся разным специалистам. Мы в статье подробнее расскажем о том, как инструменты помогут маркетологам и дадим полезные ссылки на более подробные уроки от веб-разработчиков.
DevTools есть во всех браузерах — Google Chrome, Opera, Mozilla Firefox, Яндекс.Браузере. Инструменты разработчика можно запустить тремя способами:
Важно! Мы рассказываем о работе с 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»:
Через инструменты разработчика можно получить XPath-запрос к любому элементу на странице. Для этого откройте вкладку «Elements», выберите нужный фрагмент кода и кликните на него правой кнопкой мыши. Выберите «Copy» → «Copy XPath».
Затем полученный XPath-запрос можно использовать в настройке парсинга, например, для SEO-анализа контента.
Также здесь можно тестировать XPath. Для этого нужно нажать «Ctrl + F4» и написать нужный запрос в появившейся строке. DevTools подсветит найденные по нему элементы. Если ничего не найдет, значит, в XPath-выражении ошибка.
DevTools позволяет сделать скриншот сайта или веб-приложения. Для этого нужно открыть инструменты разработчика, нажать «Ctrl+Shift+P», написать «screenshot» и выбрать нужный вариант.
Все варианты скриншотов сохраняются в формате PNG.
В блоге мы также разбирали другие инструменты для быстрого скриншотинга.
На вкладке с консолью можно изучить, как работает JavaScript, и выполнять свой код для проверки страницы. А еще здесь можно увидеть проблемы с загрузкой стилей, шрифтов и картинок — ошибки отобразятся красным и появится подробное описание того, что не работает.
Полезные ссылки по работе с этой вкладкой:
На вкладке «Sources» можно посмотреть все файлы из всех источников, к которым обращается сайт при работе.
Так, например, можно узнать, на какой CMS построен сайт. На скриншоте видно папки с приставкой wp — легко догадаться, что он сделан на WordPress. Если открыть сайт на CMS Bitrix, в «Sources» так же будет видна одноименная папка.
Еще вкладка «Sources», например, позволяет узнать, какие пиксели установлены на сайте. Их можно заметить по словам «Analytics», «GTM», «Pixel» и т.д.
Второй вариант — изучить файловую систему и заметить папки «Google Analytics», «Google Tag Manager» и т.д.
Полезные ссылки по работе с вкладкой «Sources»:
Эта вкладка — встроенный прокси-анализатор, который позволяет отслеживать HTTP-трафик страницы во время и после ее загрузки.
Здесь можно отследить все запросы, которые делает сайт. Эта информация пригодится, чтобы снижать время загрузки сайта и мониторить выполнение различных запросов.
Вкладка представлена в виде таблицы, в которой можно посмотреть статус запроса (выполняется он или нет), количество запросов, время загрузки всех данных. А также время загрузки DOM (программный интерфейс для HTML и XML документов, благодаря которому создаются скрипты) и ресурсов, которые участвуют в отображении сайта.
На вкладке можно отследить скорость загрузки сразу всех элементов, а можно разбить их по группам — JavaScript-код, CSS-стили, картинки, шрифты и т.д.
Полезные ссылки по работе с вкладкой «Network»:
Это можно сделать также через вкладку «Network». Для этого нужно открыть нужную страницу, нажать «Ctrl + R» и из списка всех файлов выбрать нужное фото, видео или музыку. Чтобы искать было проще, можете выбрать «Img» для картинок и «Media» для видео и музыки.
А чтобы не открывать все файлы сто раз в поиске нужного, в правом окне можете переключиться на вкладку «Preview».
Для этого понадобится вкладка «Performance». Тут можно узнать, за какой период времени приходит ответ от сервера, как долго отрисовывается интерфейс, в какой момент становится доступен хотя бы один из элементов сайта и так далее. В общем, «Performance» помогает понять, как быстро работает сайт и как можно оптимизировать время загрузки.
Полезные ссылки по работе с вкладкой «Performance»:
Для этого переходим во вкладку «Memory». Она помогает отслеживать, как JavaScript-код нагружает систему пользователя и сколько памяти съедает при этом. Подробно останавливаться на вкладке не будем, потому что она мало полезна маркетологу.
Но если интересно — вот полезные ссылки по работе с вкладкой:
На вкладке «Application» можно очищать хранилище и кэш, а также управлять базами данных.
Чтобы очистить кэш сайта, нужно перейти в раздел «Storage» и кликнуть на «Clear site data». А чтобы удалить и куки, поставьте галочку напротив «including third-party cookies».
Полезные ссылки по работе с вкладкой «Application»:
На вкладке «Security» DevTools показывает результаты автоматической проверки сертификатов сайта и степень защищенности соединения. Сюда же попадает проверка всех подключаемых ресурсов. А еще здесь можно узнать, какие именно запросы не защищены.
Вкладка «Lighthouse» — полноценный инструмент для аналитики сайта и выявления недостатков. Здесь можно отслеживать:
Каждый показатель оценивается от 0 до 100 и подсвечивается разным цветом. Красный — ниже 49 баллов, оранжевый — 50–89 баллов, зеленый — 90–100 баллов.
Вкладка «Recorder» позволяет записать, воспроизвести и измерить, как быстро сайт реагирует на действия пользователя (например, в процессе оформления заказа). Чтобы начать запись, выберите вкладку «Recorder» и нажмите «Start recording».
C ее помощью можно записать, как пользователь добавил товар в корзину, перешёл в корзину, начал оформлять заказ и т. д. Здесь же можно имитировать низкую скорость интернет-соединения и проверить, как сайт работает в этом случае. Чтобы включить имитацию, в правом верхнем углу вкладки откройте выпадающий список «▼».
Вкладка «Performance Insights» в Chrome DevTools позволяет пользователям измерять скорость загрузки страницы. Для этого инструмент вычисляет время, которое нужно для отображения страницы, загрузки сетевых ресурсов загрузки интерактивных элементов.
Для анализа DevTools посещает сайт от лица пользователя и взаимодействует с ним.
Чтобы запустить анализ, выберите вкладку «Performance insights» и нажмите на кнопку «Measure page load».
Полезные ссылки по работе с вкладкой «Performance Insights»:
DevTools — это инструменты разработчика в браузерах, которые помогают в создании, тестировании, оптимизации сайтов.
Инструменты разработчика можно запустить сочетанием клавиш «Ctrl + Shift + I», через основное или контекстное меню браузера (на примере Google Chrome — «Посмотреть код» или «Просмотр кода страницы»).
DevTools могут пригодиться маркетологу для разных задач, например:
Читайте только в Конверте
Отправляйте красивые письма, делитесь классным контентом, привлекайте больше платящих клиентов. До 1 500 писем бесплатно.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
Проверяйте почту — письмо придет в течение 5 минут (обычно мгновенно)
