Последнее обновление 02.01.2023 — Василий Иванов
Когда вы создаете веб-сайт, вы хотите, чтобы он был отзывчивым и адаптировался к разным размерам экрана. Один из способов проверить это — использовать встроенные инструменты разработчика Google Chrome.
DevTools Chrome позволяет отлаживать различные аспекты вашего веб-сайта. Это включает в себя изменение и предварительный просмотр исходного кода HTML и CSS. Он также позволяет отлаживать код JavaScript на стороне клиента и просматривать сетевой трафик.
DevTools также имеет возможность предварительного просмотра вашего веб-сайта на разных устройствах. Сюда входят различные типы мобильных устройств, iPad, планшеты и многое другое.
Как открыть панель инструментов устройства в Google Chrome
Чтобы открыть панель инструментов устройства в Google Chrome, вам нужно открыть окно инструментов разработчика Chrome:
- Откройте веб-сайт.
- Щелкните правой кнопкой мыши на странице и нажмите «Проверить».
- Откроется окно Chrome DevTools. Он может открываться сбоку или внизу браузера или в новом окне.
- В левом верхнем углу окна есть две иконки. Нажмите на значок, показывающий несколько устройств разного размера.
- Экран изменится, чтобы показать вам, как веб-сайт будет выглядеть на мобильном устройстве.
Как переключаться между разными устройствами
Используйте раскрывающийся список в верхней части панели инструментов устройства для переключения между различными устройствами.
- В самом верху панели инструментов будет отображаться тип устройства, на котором вы в данный момент просматриваете свой веб-сайт. Нажмите раскрывающееся меню, чтобы выбрать другое устройство из списка.
- Вместо того, чтобы выбирать существующее устройство, вы можете выбрать просмотр веб-сайта в адаптивном режиме. Щелкните раскрывающийся список и выберите вариант «Отзывчивый».
- Рядом с раскрывающимся списком вы также можете ввести пользовательскую ширину и высоту устройства.
- Вместо того, чтобы вводить ширину и высоту, вы также можете щелкнуть и перетащить углы окна, чтобы настроить размер.
Как добавить пользовательское устройство
Если вы хотите сохранить пользовательскую ширину и высоту, вы можете добавить пользовательское устройство. Панель инструментов устройства отобразит ваше новое устройство в раскрывающемся списке устройств.
- Нажмите на раскрывающийся список, в котором перечислены все устройства.
- Нажмите «Изменить».
- Убедитесь, что на боковой панели «Настройки» выбрана вкладка «Устройства». Здесь вы также можете просмотреть список дополнительных устройств, которые вы можете выбрать.
- Нажмите Добавить пользовательское устройство.
- Введите имя, ширину и высоту устройства. Убедитесь, что вы также выбрали тип устройства, например, мобильное или настольное устройство. Если вы развернете параметр «Подсказки клиента агента пользователя», вы сможете добавить другие сведения, такие как модель устройства, марка или версия.
- Нажмите Добавить.
- Вернитесь к раскрывающемуся списку всех устройств. Вы увидите свое новое пользовательское устройство в списке.
- Вы можете отредактировать эти данные позже, вернувшись на страницу пользовательского устройства. Нажмите кнопку редактирования рядом с названием вашего устройства, чтобы начать редактирование.
Преимущества использования панели инструментов устройства
Очень полезно иметь возможность предварительного просмотра вашего веб-сайта на разных устройствах и размерах экрана по нескольким причинам.
Во-первых, вы можете протестировать работу своего сайта на разных устройствах. Некоторые мобильные телефоны могут иметь более высокую скорость сети или дросселирование процессора, чем другие.
Панель инструментов устройства позволяет переключаться между различными параметрами скорости сети. Это позволяет вам проверить скорость любых обращений к серверу или проверить загрузку и рендеринг данных на вашем веб-сайте.
Кроме того, вы также можете просмотреть, как выглядит дизайн на конкретном устройстве с точки зрения пользовательского интерфейса. Если вы используете мультимедийные запросы CSS, вы можете использовать этот инструмент, чтобы убедиться, что они работают так, как вы ожидаете.
Отладка вашего сайта с помощью инструментов разработчика Chrome
Вы можете использовать окно DevTools в Google Chrome, чтобы проверить, как ваш веб-сайт адаптируется к разным размерам экрана, и убедиться, что ваш веб-сайт отзывчив. Вы также можете использовать его для проверки производительности вашего веб-сайта и проверки работоспособности ваших медиа-запросов.
Вы также можете использовать DevTools Google Chrome для других целей. Вы можете использовать его для отладки любых проблем с CSS, изменив CSS на вкладке «Стили» в окне «Элемент». Это позволяет сразу просматривать любые изменения CSS, что может ускорить рабочий процесс кодирования.
