Проверить сайт на разных устройствах: 5 бесплатных сервисов для проверки адаптивности сайта

Как оптимизировать сайт под мобильные устройства — Веб-Центр, блог

У большого количества интернет-ресурсов нет адаптации под мобильные устройства, а зря. В марте 2022 года более 72% всего интернет-трафика — это смартфоны и планшеты. Если не заниматься мобильной оптимизацией, то ваш сайт будет терять посетителей, а компания – прибыль. Из-за неудобств в использовании неадаптированного сайта потенциальные клиенты могут сделать свой выбор в пользу конкурентов.

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

Содержание

Что такое адаптивный дизайн

Зачем нужна мобильная версия сайта

Чек-лист: как проверить оптимизацию мобильной версии сайта

Методы мобильной адаптации сайта

1. Верстка адаптивного сайта
2. Вторая версия сайта для мобильный устройств на поддомене

Ошибки в мобильной адаптации: проверьте ваш сайт

Вывод

Что такое адаптивный дизайн

Пользователи используют сайты не только на компьютерах, но и на мобильных устройствах. Разрешение экранов на персональных компьютерах отличается от того, которое используется на смартфонах и планшетах: изображение, которое хорошо выглядит на ПК, на телефоне кажется маленьким, а для чтения текста нужно увеличить размер шрифта самостоятельно. Такие особенности портят опыт взаимодействия пользователей с вашим брендом.

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

Зачем нужна мобильная версия сайта

У поисковиков есть специальные системы оценивания мобильной оптимизации. Компании Google и Яндекс использует свои алгоритмы – «Mobile-friendly» и «Владивосток». Они анализируют адаптивность мобильной версии сайта и удобство использования.

• Если сайт не прошел проверку системами оценивания, поисковые системы будут хуже ранжировать страницы в выдаче. Как следствие, вы лишитесь значительной части трафика.
• Неудобная мобильная версия мешает посетителям пользоваться сайтом, в том числе покупать и оставлять заявки. Конверсия целевых действий будет падать, а пользователи – уходить в конкурентам с проработанными сайтами.

Чек-лист: как проверить оптимизацию мобильной версии сайта

Существуют специальные сервисы для проверки веб-страниц. У Яндекса такой функционал реализован в Яндекс.Вебмастере: зайдите в «Инструменты» → «Проверка мобильных страниц». В строку вставьте URL страницы и нажмите «Проверить».

Результат проверки адаптированной мобильной страницы

Результат проверки страницы с ошибками адаптации под мобильные устройства

У Google тоже есть свой сервис – Mobile-Friendly Test. Вставьте вашу ссылку в строку и нажмите «Проверить страницу»:

Результат проверки сервисом Mobile-Friendly Test оптимизированной мобильной страницы

Результат проверки страницы, адаптированной для мобильных устройств с ошибками

Чтобы увидеть, как выглядит ваш сайт на разных устройствах, не обязательно использовать телефон или планшет. Существуют специальные сервисы, которые показывают, как сайт подстраивается под экраны с разным разрешением. Например, воспользуйтесь ILoveAdaptive: вставьте ссылку на страницу в строку и нажмите Enter. Для полноценной работы сервиса необходимо установить расширение сайта для браузера.

Как сайт web-c.ru отображается на экранах разных устройств

Для того, чтобы не допускать ошибок адаптивности, рекомендуем воспользоваться чек-листом для проверки мобильных страниц сайта:

1. Корректность отображения
   Откройте страницу на телефоне и проверьте, все ли элементы отображаются так, как задумано? Страницы должны быть без горизонтальной прокрутки, изображения – нужного размера и в нужном месте, а шрифт – читабельный.
2. Скорость загрузки страниц
   Скорость мобильного интернета часто ниже, чем у стационарных устройств с кабельным подключением. В то же время чуть меньше 50% пользователей уходят со страницы, если она загружается дольше 3 секунд. Поэтому протестируйте, сколько времени открывается ваш сайт на телефоне. Для этого воспользуйтесь специальными сервисами, например Be1.ru или Google PageSpeed Insights.

   На скорость сайта влияет оптимизация кода страниц, вес контента и качество сервера, на котором размещается сайт.

3. Удобство навигации
   Пользователям устройств с тач-скрином трудно взаимодействовать с мелкими элементами страниц. Проверьте, комфортно ли просматривать сайт с помощью телефона и пальца.

   Навигация должна быть простой, лаконичной и логичной. В идеале у пользователя должна быть возможность добраться до любой страницы за 3-4 клика.
4. Заполнение форм и оформление заказа
   Для мобильных устройств лучше уменьшить количество шагов при заполнении форм: большое количество полей при оформлении заказа могут отпугнуть посетителя.
5. Контакты на страницах
   Контакты должны быть кликабельны, чтобы пользователь легко мог связаться с вами: набрать номер или перейти в мессенджер.
6. Тяжелый мультимедийный контент
   Для мобильных сайтов скорость загрузки контента критична, а тяжёлые картинки и видео увеличивают время, которое пользователю придется ждать, чтобы посмотреть страницу.

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

Методы мобильной адаптации сайта

1. Верстка адаптивного сайта

Адаптивная верстка — это создание страниц, при котором они автоматически настраиваются под размеры и разрешения экранов устройств, а их дизайн изменяется в зависимости от действий пользователя.

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

Особенности метода:

✅   Быстрая реализация на этапе разработки.

✅   Быстрая реализация на этапе разработки.

✅   Сайт доступен с любого устройства по одному адресу.

✅   Все вносимые изменения отображаются в любой версии.

✅   Вы защищены от ошибочного дублирования контента.

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

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

2. Вторая версия сайта для мобильный устройств на поддомене

Отдельная мобильная версия — более затратное, но гибкое решение. Ее можно изменять, не затрагивая ПК-версию сайта.

Особенности метода:

✅   Мобильную версию сайта на поддомене можно максимально облегчить, убрав код основного сайта, что ускорит загрузку на смартфонах и планшетах.

✅   Настройка интерфейса и функционала происходит прицельно под мобильные устройства.

✅   У пользователя остается возможность перейти на основной сайт в любой момент.

❌   Необходимо создавать и настраивать поддомен.

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

❌   Вы столкнетесь со сложностями поисковой оптимизации, так как придется вести работу с двумя сайтами.

Ошибки в мобильной адаптации: проверьте ваш сайт

1. Нечитабельный шрифт

Большая часть информации на сайте подается с помощью текста. По этой причине очень важно уделять ему внимание. Рассмотрим основные ошибки:

• Нестандартные, необычные шрифты могут не отображаться или криво загружаться на устройстве пользователя. Лучше использовать стандартные и распространенные шрифты, например, Arial.
• Слишком мелкий шрифт. Применяйте стандартный размер текста не меньше 14 px: маленькие буквы сложно читать.
• Отсутствие отступов. Блоки текста воспринимаются лучше, чем одна сплошная «простыня».
• Не используйте много разных шрифтов на странице. Это сбивает концентрацию при чтении и увеличивает время загрузки страницы.
• Не стоит использовать в тексте большое количество разных цветов, поскольку это мешает сосредоточиться на восприятии информации.

2. Корректность отображения элементов

• Для пользователей важно, чтобы на вашем сайте все элементы отображались корректно в экране мобильного устройства.
• Горизонтальная прокрутка. Распространенная ошибка чаще всего возникает из-за того, что компонент не влезает в размер экрана. Чтобы этого избежать, необходимо настроить корректную оптимизацию элемента под все разрешения.
• Неправильный размер изображений. Картинка шире экрана и выходит за рамки устройства. В таком случае нужно сделать подстройку изображений под разрешение экрана.
• Размеры и расположение кнопок. Проблема кнопок разных размеров и их расположения довольно часто встречается на различных сайтах. Пользователь пытается нажать на нее, но не попадает, так как она слишком маленькая. Либо же наоборот, кнопка большая и закрывает необходимый контент. Сделайте кнопки удобного размера и разместите их в местах, где они не будут мешать чтению или выбору товара.

3. Формы заказов

Сложные и большие формы на мобильных устройствах — это плохо. Пользователи ленивы и не захотят заполнять большое количество полей. Стоит сделать их максимально простыми, но емкими по наполнению. Такие формы привлекают клиентов.

4. Контакты на страницах

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

5. Неоптимизированный мультимедийный контент

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

6. Низкая скорость загрузки страницы

Для смартфонов и планшетов высокая скорость загрузки страницы — это один из основных показателей. Качественная версия сайта мобильного сайта загружается за 3 секунды.

Для проверки оптимизации мобильной версии сайта воспользуйтесь сервисом Google PageSpeed Insights. После анализа вы получите результат в баллах в соответствии со стандартами Google. А в подробном отчете будет информация о том, какие моменты стоит улучшить на вашем сайте.

Вывод

Адаптивный под мобильные устройства сайт – это то, что сегодня должно быть у любой компании. В кармане каждого вашего клиента лежит гаджет, через который вы можете поддерживать связь. И качество этой связи зависит не в последнюю очередь оптимизации сайта.

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

Обзор Chrome DevTools. Решаем основные задачи разработчика — журнал «Доктайп»

Что нужно сделать?

• Посмотреть, как выглядит страница с телефона и планшета
• Быстро изменить стили прямо на странице
• Протестировать блоки на переполнение
• Узнать, какие файлы подключены, и посмотреть их расположение
• Понять, почему не работают скрипты
• Проверить качество сайта

Мы продолжаем цикл статей об инструментах разработчика — Chrome DevTools. В первых двух частях мы уже познакомились с вкладками Elements, Console, Sources и Network и разобрались с их основными функциями.

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

Давайте разберёмся, какие задачи можно решить с помощью Chrome DevTools

Посмотреть, как выглядит страница с телефона и планшета

При создании адаптивных сайтов или веб-приложений полезно знать, как выглядит страница на планшете и мобильных устройствах. С помощью инструментов разработчика вы можете сделать это за несколько секунд. Для этого откройте Chrome Devtools, а затем кликните на иконку Toggle device toolbar в левом углу или нажмите комбинацию Ctrl+Shift+M:

Над страницей появится панель с режимами эмуляции из мобильных устройств и планшетов. По умолчанию панель инструментов открывается в режиме адаптивного окна просмотра. Чтобы изменить область до нужных размеров, задайте ширину или потяните за границы рабочей области. А если хотите увидеть, как страница отображается на конкретных устройствах, например, на iPhone 5, кликните на Responsive и выберите подходящий девайс.

Так выглядит страница в мобильной версии

На этой же панели есть еще одна полезная кнопка — DPR (Device Pixel Ratio). С её помощью проверяют, как выглядят изображения на ретина-дисплеях — экранах с повышенной плотностью. Чтобы посмотреть, как выглядит графика на разных устройствах, измените значение DPR и обновите страницу.

Быстро изменить стили прямо на странице

В процессе разработки бывает удобно менять стили прямо в браузере. Например, чтобы проверить, как выглядит элемент с новыми CSS-правилами, или выровнять его при вёрстке под PixelPerfect.

Менять стили в Chrome DevTools можно во вкладке Elements. Сначала выберите элемент, который хотите изменить. Для этого кликните по нему в дереве DOM или активируйте иконку выбора, а затем прямо на странице нажмите на этот элемент.

Меняем элемент прямо на странице

После этого в разделе Styles добавьте, удалите или поменяйте стилевые правила.

В разделе Styles также можно проверять, задавать и исправлять стилевые правила для :hover, :active, :focus и других псевдоклассов. Чтобы это сделать, выберите элемент, которому задано интерактивное состояние. Затем в разделе Styles нажмите на кнопку : hov, выберите подходящий псевдокласс и управляйте его стилями.

Изменяем стилевые правила для псевдоэлементов

Протестировать блоки на переполнение

Во вкладке Elements можно редактировать не только стили, но и DOM-дерево: добавлять и удалять элементы или блоки, менять текст, управлять атрибутами и классами. Это очень удобно, особенно если нужно протестировать какую-то гипотезу или проверить ошибки в вёрстке.

Одна из задач, выполняемых разработчикам с помощью Chrome DevTools — тестирование вёрстки на переполнение. То есть проверка, как ведут себя блоки и элементы при добавлении контента или изменении размеров страницы. Например, вы можете проверить, не выходит ли текст за рамки блока или не выпадают ли элементы из общего потока.

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

Как проверить элемент на переполнение текстом

Во вкладке Elements найдите в DOM-дереве элемент, кликните по нему два раза и добавьте текст:

Добавлять текст можно и на самой странице. Для этого откройте соседнюю вкладку Console, введите команду document.body.contentEditable = true и нажмите Enter. После запуска команды вы сможете нажать на элемент и отредактировать его.

Переполнение родительских блоков

Чтобы проверить, не выпадают ли блоки из потока и сохраняется ли сетка, найдите родителя и ему добавьте несколько дополнительных дочерних элементов. Для этого кликните на одном из таких элементов правой кнопкой мыши и нажмите на Duplicate Element.

Пример переполнения: элементы выпадают из родительского блока.

Узнать, какие файлы подключены, и посмотреть их расположение

Порой разработчикам нужно проверить подключенные к проекту файлы и посмотреть их содержимое. В таких случаях на помощь приходит вкладка Sources:

Слева на панели находятся все загруженные ресурсы. Справа — редактор, в котором можно просмотреть любой из загруженных файлов, в том числе изображения. Здесь же можно редактировать CSS и JavaScript. При этом если вы редактируете скрипты, обязательно сохраняйте изменения с помощью команд Command + S  для Mac или Control + S для Windows и Linux. Сохранять правки CSS не нужно, они сразу вступают в силу. Конечно, после перезагрузки страницы всё откатится до начального состояния.

Меняем цвет фона во вкладке Sources

Понять, почему не работают скрипты

Если вы написали код на JavaScript и что-то пошло не так, ищите ошибки с помощью вкладок Console и Sources. Во вкладке Console отображаются сообщения об ошибках с указанием файла и строки, на которых находится баг. Если нажать на этот файл, документ сразу же откроется на нужной строке.

Здесь разработчик добавил лишнюю кавычку. Ошибка на первой строке в документе diseasmap.js

Иногда бывает сложно разобраться, с чем связана ошибка и как её решить — особенно если вы только начали учиться разработке. В таких случаях приходится искать ответ в интернете: на форумах и профессиональных чатах.

Еще один способ найти и отладить ошибку — воспроизвести её. Используйте для этого точки останова, которые приостанавливают код в момент его выполнения.

Как использовать точки останова

Для начала откройте вкладку Sources и выберите файл со скриптом. Затем кликните по номеру строки, на которой вы хотите приостановить выполнение кода. Выбранные точки сразу появятся на панели справа в разделе Breakpoints.

Также можно пойти другим путём: кликните на Event Listener Breakpoints и выберите события, на которых нужно приостановить выполнение кода.

JavaScript выполняется последовательно. Когда Chrome дойдет до точек останова, он остановит выполнение скрипта, и вы сможете отследить, что происходит с кодом. Например, посмотреть значения переменных или разобраться с логикой функций. С этого момента только вы управляете кодом. Можете перейти к следующей точке, шагнуть внутрь функции или отключить точки останова. В этом вам помогут кнопки на панели справа.

Для чего они нужны, пойдем по порядку:

Resume Script Execution — продолжает выполнение скрипта до следующей точки останова. Горячая клавиша F8.

Step over next function call — выполняет строку кода и переходит к следующей функции. Горячая клавиша F10.

Step into next call function call — выполняет строку кода и затем ныряет внутрь функции — на первую строку. Горячая клавиша F11.

Step out of current function — выполняет до конца текущую функцию и останавливается на её последней строке. Горячая клавиша Shift + F11.

Step — по принципу действия похожа на Step into of current function. Но если Step into нужен для того, чтобы попасть внутрь функции, то Step просто выполнит её и покажет результат. Горячая клавиша F9.

Deactivate breakpoints — отключает точки останова. Горячая клавиша Ctrl + F8.

Pause on exceptions — выполнение JavaScript приостанавливается, когда появляется какое-то исключение.

Проверить качество сайта

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

Lighthouse оценивает классические сайты по четырём критериям: производительность, лучшие практики, SEO и доступность. Для сайтов, выполненных по технологии PWA (прогрессивные веб-приложения), добавляется пятый критерий — progressive web app.

Как использовать Lighthouse

Чтобы запустить проверку, перейдите во вкладку Lighthouse и нажмите на кнопку Generate report. Во время тестирования инструмент будет менять размеры браузера, имитировать отключение и подключение интернета и выполнять другие операции.

В конце вы получите оценки качества сайта по 100-балльной шкале: чем выше оценка, тем лучше. При этом на чистоту проверки могут влиять разные факторы, в том числе интернет-соединение и расширения Chrome. Поэтому лучше запускать тест в режиме инкогнито, закрыв остальные вкладки.

Запускаем Lighthouse

Результаты проверки.

Получаем результаты

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

Lighthouse не единственный инструмент для оценки качества сайта. Есть и другие сервисы, например, PageSpeed Insights. Но он хорошо справляется со своей задачей, и его можно можно использовать при работе с сайтами на локальном сервере.

При оптимизации сайта в Chrome DevTools вы также можете использовать вкладку Network. Она поможет проанализировать загрузку страницы, посмотреть приоритет и вес загружаемых ресурсов, а также увидеть другую полезную информацию. Более подробно о ней мы рассказали в статье «Введение в Chrome DevTools. Console, Sources, Network».

---

Chrome DevTools облегчает процесс разработки. И хотя начинающим разработчикам бывает непросто сразу разобраться во всех инструментах — это и не нужно. Сначала осваивайте базу и читайте документацию. А чтобы научиться применять Chrome DevTools на практике, попробуйте наши интенсивы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «JavaScript. Профессиональная разработка веб-интерфейсов». Создайте свой проект под руководством наставника, оптимизируйте его производительность и научитесь отладке кода с помощью инструментов разработчика.

Кросс-девайсное тестирование: зачем и как это делать | Insight

Что такое кросс-девайсное тестирование?

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

Зачем мне кросс-девайсное тестирование?

На рынке браузеров существует огромная конкуренция (и это было со времен кавер-дисков с IE, Netscape или AOL на них), и поэтому каждый браузер пытается выделиться. В связи с этим добавляются или улучшаются дополнительные функции поверх стандарта HTML, что означает, что каждый браузер потенциально может работать с одним и тем же HTML по-разному.

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

Самые популярные браузеры и используемые ими движки

• Chrome – Blink
• Internet Explorer — трезубец
• Firefox – Геккон
• Сафари — Вебкит

(Дополнительную информацию о движках веб-браузеров см. на этой странице Википедии.)

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

Как выбрать устройства для тестирования?

Поскольку существует огромное количество комбинаций размеров экрана, устройств, операционных систем (ОС) и браузеров, а время и ресурсы для тестирования обычно ограничены, важно начать с определения предполагаемого диапазона конфигураций, которые необходимо поддерживается.

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

Иногда это происходит в виде одного браузера, используемого в одной ОС со стандартным размером экрана. Они просты и могут быть протестированы в соответствии с точными спецификациями, чтобы убедиться, что мы тестируем именно то, что увидит клиент. Это может быть в случае, если мы разрабатываем мобильное приложение, где у пользователя будет определенное устройство, на котором будет установлено приложение; например, когда все работники вне офиса используют один и тот же планшет для записи информации.

Такие продукты, как веб-сайты, которые будут просматриваться представителями общественности, могут и будут просматриваться любым количеством способов на любом количестве устройств. По этой причине часто полезно пройти более полный набор тестов. Чтобы убедиться, что тестирование охватывает наибольшее количество потенциальных пользователей, часто будут использоваться самые распространенные браузеры, операционные системы и размеры экрана; например, Windows или Mac как наиболее распространенные операционные системы, а также Chrome, Firefox и Internet Explorer (для Windows) или Safari (для Mac) как самые популярные браузеры. Поскольку экраны могут быть практически любого размера, часто выбираются максимальный и минимальный.

Существует множество инструментов, которые можно использовать для определения наиболее популярных конфигураций. Например, http://gs.statcounter.com/ предоставляет актуальную статистику о доле рынка для ОС, использовании браузера и даже о том, какой размер экрана используется для просмотра страниц. Кроме того, если клиент может предоставить собственную аналитику использования, спецификации могут быть сужены еще больше.

Как провести эффективное кросс-девайсное тестирование?

По указанным выше причинам при разработке или тестировании веб-сайта важно просматривать его в как можно большем количестве различных браузеров, которые может использовать конечный пользователь. Это могут быть только два основных браузера на рабочем столе Windows или различные платформы, такие как Apple Macbook, телефон Android или Firefox на планшете Windows.

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

Эмуляция

Программное обеспечение используется для приближения целевого устройства или машины, чтобы показать вам, как что-то «должно» выглядеть. Это часто используется для тестирования на мобильных устройствах, так как это означает, что разработчик может видеть свои изменения по мере их внесения. (Поскольку разработка непосредственно на устройстве невозможна, и это может занять дополнительное время, если для каждой настройки требуется, чтобы программное обеспечение было упаковано и каждый раз загружалось на устройство.)

Виртуальные машины

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

Фактическое оборудование

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

Каждый из этих методов имеет свои преимущества и недостатки, такие как стоимость (для фактического оборудования), ограниченные ресурсы (для виртуальных машин каждая копия операционной системы будет занимать место и ресурсы, которые можно было бы использовать для других целей) , а также неточности и предположения (эмуляция может не отражать реальные ограничения аппаратного обеспечения; например, настольный компьютер, эмулирующий Android, будет иметь больше ресурсов, не будет проблем с сигналом или батареей, а сигналы GPS будут приблизительными).

При тестировании между устройствами, браузерами и операционными системами крайне важно, чтобы тестировщик мог переключаться между итерациями, будь то между окнами браузера на одном компьютере или между несколькими компьютерами. Здесь очень полезны такие инструменты, как Ghostlab, поскольку они позволяют выполнять действия на одной итерации и повторять их на многих. Например, только из одного браузера Chrome тестер может управлять одним и тем же веб-сайтом в Firefox на том же ПК, Safari на Mac, Chrome на телефоне Android, Safari на iPhone, IE на телефоне Windows или любых других устройствах или окнах. у них впереди. Это означает, что они могут посетить сайт один раз и просмотреть его на нескольких устройствах в различных конфигурациях одновременно. При минимальной конфигурации это может сэкономить часы ненужного кроссбраузерного тестирования.

Заключение

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

В Box UK у нас есть сильная команда консультантов по программному обеспечению с более чем двадцатилетним опытом разработки и тестирования программного обеспечения на заказ. Если вам интересно узнать больше о том, как мы можем вам помочь , свяжитесь с нами по телефону +44 (0)20 7439 1900 или по электронной почте [email protected].

Как протестировать свой веб-сайт для различных мобильных устройств на MacOS

9 марта 2023 г. | ГуравПракаш Кашьяп

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

В этой статье мы узнаем, как протестировать веб-сайт, используя:

• XCode iOS Simulator для имитации устройств Apple
• Эмулятор Android Studio для эмуляции устройств Android

Симулятор iOS XCode

Начнем с Симулятор iOS XCode : 

1. Установите XCode в систему Mac
   1. Перейдите на страницу https://developer. apple.com/XCode/resources/ 
   2. Выберите загрузку и выберите веб-сайт. Это попросит вас войти в систему с вашим Apple ID.
   3. Войдите в систему и загрузите файл .xip для последней версии XCode
   .
   4. Откройте загруженный файл .xip в Finder и дважды щелкните его, чтобы извлечь (это может занять некоторое время)
   5. После извлечения перенесите XCode в папку приложения (просто перетащите)
   6. Настройка завершена
2. Запустить симулятор устройства iOS
   1. Запустите XCode — вы увидите экран приветствия, как показано ниже,
3. Щелкните правой кнопкой мыши XCode в доке —> наведите указатель мыши на «открыть инструменты разработчика» —> выберите «Симулятор».
4. Это запустит смоделированный iPhone.
5. Вы можете выбрать нужное устройство, щелкнув правой кнопкой мыши значок симулятора в доке —> наведите указатель мыши на «Устройство» —> выберите ОС —> выберите устройство.
6. Поздравляю. Вы закончили запуск смоделированного устройства по вашему выбору для тестирования.

Совет:  Возможно, вы захотите оставить симулятор в доке для более быстрого доступа:

1. Щелкните правой кнопкой мыши значок симулятора в доке
2. Наведите указатель мыши на «Параметры» —> выберите «Сохранить в доке»

 

3. Подготовка браузера Safari к отладке:
   1. Открыть браузер Safari
   2. Перейти к настройкам (нажмите клавиши `command` + ` ,`  )
   3. Перейти на вкладку «Дополнительно»
   4. Установите флажок «Показать меню разработки в строке меню», опция
4. Использование браузера Safari для проверки страниц, запущенных на моделируемом устройстве
   1. Откройте сайт, который вы хотите проверить, на моделируемом устройстве
   2. В браузере Safari (ПК) нажмите «Разработка» в строке меню
   3. В раскрывающемся меню —> наведите указатель мыши на «Симулятор» —> Он покажет вам все веб-сайты, открытые на вашем моделируемом устройстве
   4. Выберите веб-сайт, который вы хотите проверить
   5. Поздравляю. Теперь вы можете продолжить свой путь развития.

Эмулятор Android Studio

Теперь давайте рассмотрим Эмулятор Android Studio :

1. Установить студию Android
   1. Перейдите на https://developer.android.com/studio и загрузите последнюю версию Android Studio для своей системы (выберите между Intel или Apple Silicon)
   2. Для установки просто перетащите Android Studio в папку приложения
   3. Если вы используете Android Studio только для запуска эмулятора, оставьте все настройки по умолчанию.
2. По умолчанию Android Studio обычно создает эмулируемое устройство.
3. Запустите Android Studio, и вы увидите экран приветствия.
4. На экране приветствия —> нажмите «Дополнительные действия» —> выберите «Диспетчер виртуальных устройств»
5. Он покажет список установленных виртуальных устройств. Выберите устройство по вашему выбору и нажмите на зеленую кнопку воспроизведения. Это запустит выбранное устройство.
6. Если желаемое устройство отсутствует в списке, вам необходимо создать его, нажав кнопку «Создать устройство» в левом верхнем углу.
7. После запуска эмулятора Android откройте веб-сайт, который вы хотите проверить/отладить/протестировать, в браузере эмулируемого устройства.
8. Если вы не можете открывать локальные сайты в эмуляторе, замените `localhost` в URL-адресе локальным IP-адресом вашей системы.

Чтобы получить локальный IP-адрес:

1. Открытый терминал
2. Введите команду ниже:

 ipconfig getifaddr en0 

Это вернет ваш локальный IP-адрес. Если в проводной сети, используйте следующую команду, чтобы получить локальный IP-адрес:

 ipconfig getifaddr en1 

9. Теперь откройте браузер Chrome в вашей системе (ПК) и в поле URL введите `chrome://inspect` и нажмите возврат. Откроется страница DevTools 9.0016
10. На странице DevTools на левой панели выберите устройства, убедитесь, что установлены флажки «Обнаружение USB-устройств» и «Обнаружение сетевых целей».