Как просмотреть свой сайт на разных устройствах с помощью Google Chrome

Когда вы создаете веб-сайт, вы хотите, чтобы он был отзывчивым и адаптировался к разным размерам экрана. Один из способов проверить это — использовать встроенные инструменты разработчика Google Chrome.

DevTools Chrome позволяет отлаживать различные аспекты вашего веб-сайта. Это включает в себя изменение и предварительный просмотр исходного кода HTML и CSS. Он также позволяет отлаживать код JavaScript на стороне клиента и просматривать сетевой трафик.

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

Чтобы открыть панель инструментов устройства в Google Chrome, вам нужно открыть Окно инструментов разработчика Chrome:

1. Откройте веб-сайт.
2. Щелкните правой кнопкой мыши на странице и выберите Осмотреть.
3. Откроется окно Chrome DevTools. Он может открываться сбоку или внизу браузера или в новом окне.
4. В левом верхнем углу окна есть две иконки. Нажмите на значок, показывающий несколько устройств разного размера.
instagram viewer
5. Экран изменится, чтобы показать вам, как веб-сайт будет выглядеть на мобильном устройстве.

Как переключаться между разными устройствами

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

1. В самом верху панели инструментов будет отображаться тип устройства, на котором вы в данный момент просматриваете свой веб-сайт. Щелкните раскрывающийся список, чтобы выбрать другое устройство из списка.
2. Вместо того, чтобы выбирать существующее устройство, вы можете выбрать просмотр веб-сайта в адаптивном режиме. Нажмите на раскрывающийся список и выберите Отзывчивый вариант.
3. Рядом с раскрывающимся списком вы также можете ввести пользовательскую ширину и высоту устройства.
4. Вместо того, чтобы вводить ширину и высоту, вы также можете щелкнуть и перетащить углы окна, чтобы настроить размер.

Как добавить пользовательское устройство

Если вы хотите сохранить пользовательскую ширину и высоту, вы можете добавить пользовательское устройство. Панель инструментов устройства отобразит ваше новое устройство в раскрывающемся списке устройств.

1. Нажмите на раскрывающийся список, в котором перечислены все устройства.
2. Нажмите на Редактировать.
3. На боковой панели «Настройки» убедитесь, что у вас есть Устройства выбрана вкладка. Здесь вы также можете просмотреть список дополнительных устройств, которые вы можете выбрать.
4. Нажмите на Добавить пользовательское устройство.
5. Введите имя, ширину и высоту устройства. Убедитесь, что вы также выбрали тип устройства, например, мобильное или настольное устройство. Если вы расширите Подсказки клиента агента пользователя можно добавить другие сведения, например модель устройства, марку или версию.
6. Нажмите на Добавлять.
7. Вернитесь к раскрывающемуся списку всех устройств. Вы увидите свое новое пользовательское устройство в списке.
8. Вы можете отредактировать эти данные позже, вернувшись на страницу пользовательского устройства. Нажми на редактировать кнопку рядом с названием вашего устройства, чтобы начать редактирование.

Очень полезно иметь возможность предварительного просмотра вашего веб-сайта на разных устройствах и размерах экрана по нескольким причинам.

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

Панель инструментов устройства позволяет переключаться между различными параметрами скорости сети. Это позволяет вам проверить скорость любых обращений к серверу или проверить загрузку и рендеринг данных на вашем веб-сайте.

Кроме того, вы также можете просмотреть, как выглядит дизайн на конкретном устройстве с точки зрения пользовательского интерфейса. Если вы используете CSS медиа-запросы, вы можете использовать этот инструмент, чтобы убедиться, что они работают так, как вы ожидаете.

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

Вы также можете использовать DevTools Google Chrome для других целей. Вы можете использовать его для отладки любых проблем с CSS, изменив CSS на вкладке «Стили» в окне «Элемент». Это позволяет сразу просматривать любые изменения CSS, что может ускорить рабочий процесс кодирования.

Как использовать Google Chrome для отладки CSS

Читать дальше