Html проверка на android

“Протестируй на всех браузерах на телефоне” или инструменты для тестирования Mobile Web приложений

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

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

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

Давайте для начала определимся, что является мобильным веб-приложением.

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

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

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

Существует как минимум 3 способа для тестирования:

+ Точность результатов;
+ Облегчает тестирование ориентации устройства;
— Дорого;
— Трудоемкий процесс создания и последовательного воспроизведения
результатов;

Эмуляторы:

+ Легче управлять переключением типов устройств, загрузив новый профиль устройства;
+ Бесплатно или небольшие затраты;
— Возможно небольшие погрешности в результате;
— Ограниченные возможности при использовании изменения размера окна.

+ Экономически выгодно;
— Не принимает во внимание аппаратное обеспечение;
— Возможны ложные срабатывания;
— Результаты моделирования могут быть трудными для анализа из-за неполных данных.

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

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

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

1. Chrome DevTools — простой эмулятор на основе браузера Google Chrome, который умеет работать в мобильном режиме. Применяется, в основном, для выполнения начального уровня тестирования эмуляции определенного мобильного устройства.
2. BrowserStack — онлайн-инструмент для тестирования веб-приложений на различных мобильных устройствах. Это довольно надежный и исчерпывающий инструмент, который обеспечивает легкий доступ к более чем 1200 реальных мобильных устройств и браузеров. Пользовательский интерфейс довольно прост для понимания.
3. MultiBrowser — онлайн-инструмент, позволяющий убедиться, что приложение хорошо работает на мобильных устройствах. Он использует эмуляторы мобильных браузеров, чтобы обеспечить беспроблемное тестирование. Для работы с инструментом не нужен круглосуточный доступ в Интернет, так как он отлично работает и как настольное приложение.

Как выбрать на чем тестировать?

1. Проанализируйте и определите самые популярные и используемые гаджеты на рынке;
2. Выберите устройства с разной ОС (Android, iOS);
3. Выберите устройства с различными разрешениями экрана.

После выбора инструментария определяемся с набором браузеров на которых будем тестировать. Они бывают обычные и InApp.

Обычный браузер — это отдельное приложение для просмотра веб-сайтов на мобильных устройствах. Как правило, такие браузеры отличаются гибкостью настроек и расширенными функциями, относительно встроенных. Наиболее популярные: Google Chrome, Safari, Mozilla Firefox, Operа mini, Tor Browser, UC Browser.

In-App браузер — это встроенный браузер в приложении, который имеет окно веб-просмотра. Каждый раз, когда вы нажимаете на ссылку в мобильном приложении (например Facebook), вы используете встроенный браузер, то есть переходите по ссылке внутри самого приложения.

Браузеры In-App имеют легкий функционал, но они не позволят Вам добавлять закладки, не имеют изменяемой адресной строки и не дают открывать ссылки в новых окнах (только дают перейти в обычный браузер).

При выборе браузера можете использовать опять же таки gs.statcounter.com и для статистики траффика вашего приложения — www.similarweb.com

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

Спасибо за прочтение! Всем правильных мыслей и оптимальных инструментов для тестирования для своего приложения.

Источник

Верстаем на мобильном: отладка сайтов с помощью телефона

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

Рассмотрим варианты для Chrome и Firefox. Для начала, независимо от браузера, нужно подготовить устройства и установить драйвера.

Скачиваем и устанавливаем ADB-драйвера для своего телефона. Драйвера можно взять либо с сайта Android, либо на форуме 4pda.ru.

Включаем на телефоне режим отладки. Для этого в настройках переходим в меню разработчика. Если его нет — переходим в раздел «О телефоне» и кликаем несколько раз по пункту «Номер сборки». У меня режим разработчика уже включён, поэтому отображается соответствующее сообщение. Затем в самом меню, наверху, активируем режим, находим пункт «Режим отладки» и активируем его тоже.

На этом общие моменты завершены. Теперь посмотрим как подключать телефон и как инспектировать элементы сайта на мобильном.

Инструкция для Google Chrome

Для отладки в Chrome, на компьютере должен быть установлен браузер версии не ниже 32, а на версия Android должна быть минимум 4.

Открываем инструменты разработчика в браузере. Кликаем по трём точкам в правом верхнем углу. Выбираем «More tools», затем «Inspect devices…»

Ставим галочку «Discover USB devices».

Запускаем Chrome на телефоне и подключаем его к компьютеру. Появится запрос на подключение. Жмём «Ок».

Видим слева своё устройство и его статус. Кликаем по нему.

Отображается список открытых вкладок. Можно открыть новую, введя адрес в поле сверху. Нажав на три точки, можем перезагрузить вкладку, перейти на неё или закрыть её. Нажав «Inspect», как несложно догадаться, активируем инспектор.

Видим экран мобильного на компьютере. Все изменения стилей отображаются на экране компьютера и на самом смартфоне в режиме реального времени. Если изменить ориентацию телефона — изменится и на компьютере.

Инструкция для Mozilla Firefox

На Firefox подобное сработает только на версии новее 36.

Запускаем Firefox на мобильном. Переходим в настройки, затем в «Дополнительно» и включаем удалённую отладку.

Переходим в меню Firefox на десктопе. Выбираем «разработка», затем «WebIDE».

Подключаем телефон, видим его справа сверху. Кликаем по нему.

Разрешаем доступ на мобильном.

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

Открывается инспектор. Наводим на элементы, пишем стили и видим результат на телефоне.

Бонус: отладка сайтов по WiFi

Работает пока, к сожалению, только на Firefox и только на версиях от 39 и выше. Чтобы всё сработало, компьютер и телефон должны быть подключены к одной сети. Плюс к этому, на телефоне должен быть установлен сканер QR-кодов. Firefox рекомендует этот. Другие, к слову, Firefox у меня не распознал и упорно твердил, что программа-сканер не установлена.

Снова переходим в WebIDE, но на этот раз выбираем WiFi устройства.

Появится QR-код для сканирования.

На телефоне появится запрос. Нажимаем «сканировать» и сканируем код.

Источник

Браузеры для Android с функцией исследования элемента

Исследование элемента (оно же веб-инспектор) – это полезная функция, которая существует во всех ПК-браузерах и позволяет отлаживать верстку в режиме «Live» без внесения изменений непосредственно в файлы сайта.

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

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

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

HTML/CSS Website Inspector – мощный браузер с веб-инспектором для Android

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

Отличительными особенностями являются:

1. Поиск и редактирование HTML-элементов.
2. Веб-консоль. Позволяет выполнить JavaScript.
3. Просмотр всего исходного кода сайта с возможностью его редактирования.
4. Функция исследования элемента. Позволяет показать код элемента, который выбран на странице.

1. Реклама в приложении.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Помимо этого, хочется отметить, что на момент написания статьи приложение активно развивалось автором и имело более 1 000 000 установок.

Поддержка Android 4.1+. Интерфейс на английском языке.

Web Inspector (Open Source) – браузер с инструментами разработчика для Android

Это приложение, в отличие от первого, немного проще, менее популярнее (всего чуть более 10 000 установок) и обновлялось несколько лет назад.

Несмотря на это, наделено своими интересными функциями, в числе которых:

1. Список сетевых ресурсов (изображения, скрипты, стили и прочее).
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript.
3. Поиск (исследование) и редактирование отдельных элементов. Дополнение – возможность показать ближайшего родителя.

1. Нет возможности посмотреть весь исходный код страницы.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Поддержка Android 4.0+. Интерфейс на английском языке.

Droid Web Inspector – браузер с полным набором инструментов разработчика для Android

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

Браузер с консолью разработчика, в функции которой входит:

1. Очистка кэша.
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript.
3. Полный исходный код страницы (HTML) с функцией отслеживания и редактирования стилей элементов.
4. Отображение дерева DOM.
5. Отслеживание JS- и CSS-файлов с возможностью их редактирования.
6. Отображение сетевых ресурсов (изображения, скрипты, стили и прочее).

1. Не идет на старых версиях Android.
2. Отсутствует исследование отдельных элементов. Возможно, баг моего телефона, но все элементы доступны в общем коде HTML.

В отличие от приложения Web Inspector (Open Source), на момент написания статьи имело всего чуть более 5 000 установок, но, несмотря на это, активно развивалось автором.

Поддержка Android 5.0+. Интерфейс на английском языке.

Источник