Посмотреть сайт на mac os онлайн
Обновлено: 07.07.2024
Узнайте, как просмотреть отзывчивый вид мобильного сайта в macOS Safari на компьютере или ноутбуке. Мобильный сайт можно просматривать в режиме разработчика в Safari.
Вы хотите загрузить сайт для ПК в мобильной версии в браузере Safari на компьютере с macOS? Мы вас прикрыли. Ниже приведены подробные инструкции по включению опции просмотра мобильного сайта в Safari.
Этот параметр обычно используется веб-разработчиками и дизайнерами, когда они хотят проверить внешний вид нового сайта на экранах разных размеров. Когда вы загружаете веб-сайт в настольном браузере Safari, будет загружена полная версия рабочего стола. Однако, чтобы переключиться на мобильный сайт, вы можете либо уменьшить размер экрана, либо включить режим адаптивного дизайна.
Аналогичная опция также доступна в инструментах разработчика Chrome, где вы можете переключать настройки устройства, чтобы переключаться между отзывчивым и обычным представлением рабочего стола.
Связанный: Как запросить и просмотреть настольный сайт в Safari iOS / iPadOS?
Как упоминалось ранее, мобильный вид в Safari поможет проверить работу веб-сайта без использования Safari на iPhone. Просто включите меню разработки и запустите режим адаптивного дизайна.
Как включить меню разработки в Safari macOS?
Нам нужно включить меню разработки, чтобы просмотреть вариант адаптивного сайта. Развитое меню по умолчанию скрыто, но вы можете легко включить его.
Вот шаги, чтобы включить панель меню «Разработка» в браузере Safari на компьютере Mac:
Это активирует меню «Разработка» в списке строк меню браузера Safari.
Как просмотреть мобильный адаптивный сайт в Safari Mac?
Нет такой отдельной опции, которая могла бы помочь нам создать адаптивный веб-дизайн для мобильных устройств. Однако эта опция скрыта в меню «Разработка». Это поможет вам отобразить мобильное представление в браузере Safari Mac.
Вот шаги для просмотра мобильного адаптивного веб-дизайна в Safari macOS:
- Запустите браузер Safari на компьютере Mac.
- Открыть сайт что вы хотите в мобильной версии сайта.
- Щелкните меню «Разработка», чтобы просмотреть параметры.
- В раскрывающемся списке выберите параметр «Перейти в режим адаптивного дизайна».
Это перезагрузит веб-сайт и перейдет в режим адаптивного дизайна. Здесь вы можете выбрать различные типы устройств и разрешение экрана в зависимости от ваших потребностей.
Просто переключитесь между моделями iPhone или iPad, указанными на странице, чтобы просмотреть мобильный сайт в браузере компьютера Safari.
Это позволит нам просматривать адаптивный сайт для мобильных устройств в браузере Safari на компьютере с macOS. Мобильный сайт будет основан на модели, выбранной в режиме адаптивного дизайна.
Точно так же вы также можете включить просмотр сайта на рабочем столе на устройстве iPhone или iPad. Это поможет получить все возможности рабочего стола на устройстве с маленьким экраном.
Вы когда-нибудь пробовали использовать режим разработчика в сафари? Что вы думаете об этой функции?
Наконец, вот рекомендуемые веб-браузеры для вашего компьютера и мобильного телефона, которые вам стоит попробовать.
Если вы активно занимаетесь созданием адаптивных веб-проектов, то наверняка знакомы с популярными сервисами просмотра сайта на разных разрешениях экранов. Сейчас похожие функции также присутствуют в инструментах разработчика любого современного браузера. Однако в этом вопросе не все так однозначно – недавно я обнаружил, что все известные мне решения не работают со 100% точностью. Некоторые коллеги по цеху также сетовали на подобную проблему. Сегодня расскажу, что можно с этим сделать.
Возможно, данный рассказ покажется кому-то слишком затянутым, в таком случае – переходите сразу по ссылкам в содержании:
Пару слов о том, как все начиналось
Закончив работу над исправлением ошибок верстки в одном проекте, я ожидал результатов проверки от клиента. Но через какое-то время вместо слов благодарности, он прислал мне порцию новых правок. Причем все они отличались от того, что я видел в своем браузере или через Chrome Devtools.
Естественно, первое, что сразу пришло в голову – наличие кэширования в клиентском браузере либо на самом сайте. Проверил эту догадку + параллельно начал просматривать на разных устройствах в режиме инкогнито, с телефона и т.п. Пробовал разные онлайн-сервисы, но толку ноль.
И только чуть позже я сообразил попросить кого-то глянуть как выглядит сайт на iPhone (проблема всплывала только в нем). Оказывается, клиент был полностью прав и с кэшированием все нормально. Но как так? Я ведь смотрел сайт через разные анонимайзеры и веб-сервисы?
К сожалению, ни один из этих вариантов не решает данную задачу и, похоже, что единственный способ воссоздать реальную картинку происходящего на iOS – быть обладателем iPad, iPhone или Mac, где все можно посмотреть вживую.
Поскольку я не являюсь обладателем техники Apple, мне пришлось договариваться с клиентом, чтобы тот записывал видео с экрана или делал скриншоты на своих iOS-устройствах дабы показать те или иные глюки.
Бесплатные онлайн сервисы и Chrome Devtools не подходят
Самый простой вариант проверки верстки – это, конечно, встроенные в браузер инструменты разработчика Chrome Devtools, о которых я когда-то детально рассказывал. В той статье даже есть пример просмотра проекта с разными размерами экрана.
Тут важно отметить два момента, которые я заметил:
- Во-первых, система по-разному реагирует, если задавать размер экрана вручную или выбирать имеющиеся устройства по умолчанию (iPad, iPhone 6/7/8/X/Plus).
- Сразу после определения с какого устройства будете смотреть код, лучше перезагрузить страницу через Ctrl+F5 (можно выполнить и жесткую перезагрузку).
Тем не менее, выше я уже говорил, что этот метод (как и следующие сервисы), не позволяют посмотреть происходящее в iOS наверняка. Это больше помогает контролировать стили адаптивной верстки, нежели отлавливать какие-то специфичные глюки.
Бесплатные сервисы ILoveAdaptive и ResponsiveTestTool
В этой нише хватает всевозможных веб-инструментов, плюс постоянно появляются какие-то новые. Из последнего, что пробовал, могу выделить ILoveAdaptive и Responsive Test Tool. Первый сервис понравился чуть больше. Вот как выглядит сгенерированные превью веб-сайта через него:
Слева есть панель настроек, где вы можете:
- выбрать тип отображаемых устройств: смартфон, планшет или ПК;
- задать операционную систему: iOS, Android, Windows;
- повернуть устройство горизонтально и/или отобразить какие-то специальные элементы интерфейса;
- убрать скроллинг;
- зумировать картинку.
Справа генерируются просмотры сайта на разных устройствах, причем это не скриншоты, а именно живые проекты с HTML-кодом.
Второй сервис имеет немного иной принцип работы – здесь за раз генерируется только одно превью.
Единственное преимущество этого ресурса в том, что здесь (как мне показалось) представлено чуть больше всевозможных устройств для просмотра (есть даже ТВ). Поворачивать экран и убирать/добавлять скроллинг тут тоже разрешается.
Платные сервисы CrossBrowserTesting и BrowserStack
Единственный работающий метод, позволяющий просмотреть как выглядит сайт на iPhone или iPad с помощью онлайн-сервисов, – это предоставление возможности работы на “реальном” устройстве с iOS вживую. Не знаю, как этого добиваются разработчики (с помощью эмуляции, виртуальных машин и т.п.), но в подобных проектах пользователям дают доступ к полноценному браузеру Safari и другим, доступным в iOS.
Из всех найденных инструментов мне больше всего приглянулись Cross Browser Testing и BrowserStack. Не буду постить их детальные обзоры, а расскажу о тех вещах, которые приметил для себя.
1. Во-первых, у них обоих имеется бесплатный Free Trial период, но авторы как-то очень тщательно скрывают информацию о том сколько времени у вас есть. На сайте CrossBrowserTesting кое-где невзначай упоминается наличие 7 дней доступных для теста, тогда как в BrowserStack даже в FAQ все предельно секретно.
И только в TermsofService удалось узнать, что триальная регистрация подразумевает 30 дней активного использования.
Теоретически, если вы только начинающий фрилансер, никто не ограничивает вас в регистрации нескольких email-адресов (ни на что не намекаю, если что, но думаю вы поняли о чем я:)
2. Во-вторых, и там, и там помимо стандартных цен для разработчиков, есть тарифы для фрилансерови Open Source проектов. Последние могут использовать инструменты бесплатно, тогда как фрилансерам доступны следующие ценники:
- $15/месяц в Cross Browser Testing.
- $12.5/месяц в BrowserStack.
Эти цифры актуальны при оплате за год. В принципе, вполне подъемные суммы, если вы активно трудитесь на каком-то там Upwork и час вашей работы стоит примерно столько же.
3. В-третьих, как я понял, сейчас это чуть ли не 2 самых крупных конкурирующих ресурса в данной нише. Честно, не сравнивал их преимущества и недостатки – мне кажется, делают они приблизительно одно и то же. Хотя на сайте CrossBrowserTesting есть отдельная страница,где они тщательно описывают свои преимущества над конкурентами, например: более дешевый анлимный тариф и скриншоты всей страницы.
Но, повторюсь, в нюансы эти не вникал, тут нужно разбираться самим и в обязательном порядке тестировать пробный период.
Альтернативные методы эмуляции iOS
Во время поиска нужного решения мне встречались разные “хитрости”, которые должны были помогать пользователям проверить верстку под iPhone, iPad. Вкратце расскажу какие они бывают и помогают ли в работе.
1. Во-первых, я с удивлением обнаружил, что браузер Safari официально выпускался под Windows и работал точно также, как и под Mac. Основная проблема в том, что где-то в 2012 году разработчики из Apple прекратили это делать и “заморозили” проект.
С официального сайта дистрибутив убрали, но в сети есть много площадок, где вы все еще можете скачать последнюю версию Safari 5.1.7 для Windows.
Я ее загружал, устанавливал и через минуты 2 удалил. Для работы это полностью непригодный вариант – начиная с 2012 в верстке произошло миллион изменений и смотреть код на устаревшем браузере вообще не вариант.
2. Если гуглить решения по англоязычным запросам, то вы найдете немало программ эмуляторов iOS под Винду. Но 90% из них выглядит крайне сомнительно как по функциональности, интерфейсу, так и по безопасности.
Одно дело скачивать с какого-то неофициального онлайн архива программ установочные файлы реальных программ, т.к. тут вполне можно понять зачем авторы их распространяют. Другое дело – ставить на компьютер какой-то специфический непонятный софт.
3. Если вам так сильно хочется что-то установить – разбирайтесь с виртуальной машиной. Как я понимаю, это самый реальный способ раз и навсегда решить проблему с просмотром верстки на Mac, iPad и др. Благо имеется программка, позволяющая все это реализовать — Oracle VM Virtualbox, в том числе и использование другой ОС в рамках текущей.
Единственное, что меня остановило от этой затеи – информация о том, что в этой виртуальной машине нет официальной поддержки OS X и надо будет устанавливать дополнительно какие-то программы или дополнения по типу ExtensionPack, Hackboot 1, Hackboot 2 ISO. Кроме того, если я правильно понимаю, вам также нужно будет скачать образ самой ОС – т.е. лазить по всяким варезным сайтам и вот это вот все.
Данные перспективы, признаться, выглядели крайне сложными и непонятными, а вникать в эти дебри накануне завершения сроков по проекту – не особо хотелось. Поэтому мне нужно было какое-то более быстрое и доступное решение – и я его нашел!
LambdaTest – хороший сервис для проверки кроссбраузерной верстки
Наткнулся на этот проект совершенно случайно в одной из статей, в гугло-выдаче – сплошные подборки эмуляторов и какие-то тематические статейники. В отличии от всех конкурентов в LambdaTest есть полноценный бесплатный тариф не ограниченный по времени.
Хотя, если присмотреться тут присутствуют немного другие лимиты – всего вам доступно 60 минут тестов браузера в реальном времени, которые разбиты на 6 сессий по 10 минут. Потом каждый месяц эти ограничения обнуляются.
Если у вас есть пару аккаунтов либо вам требуется доступ к iOS не постоянно, то такой сервис отлично подходит. Да и ценник в $15 здесь не только для фрилансеров.
В LambdaTest имеются все необходимые варианты тестов приложений и веб-проектов:
- Автоматическое тестирование с помощью Selenium скрипта.
- Живые тесты кроссбраузерной верстки, запускаемые на реальных ОС.
- Генерирование скриншотов.
- Проверка адаптивной верстки на разных расширениях.
- Специальный LT Browser, позволяющий тестить сайты на 25+ мобильных девайсах.
- Есть интеграция со специализированными приложениями разработчиков.
Все это достаточно интересно, но в моем конкретном случае меня интересовала исключительно отладка верстки под iPhone / iPad, поэтому покажу как это делается.
После регистрации бесплатного аккаунта, заходим в свою учетную запись.
Здесь у нас виден дашборд со всеми данными по проектам. Я в прошлом месяце уже использовал все свои лимиты, а в этом у меня они заново обновились (показано справа).
Слева в меню располагаются разные виды тестов. Переходим в «Real Time Testing», где выбираем нужный нам браузер и ОС:
Тут мы, кстати, видим еще один неприятный нюанс – далеко не все версии ОС/браузеров доступны в бесплатном тарифе. К счастью, для моей задачи Safari 10 вполне хватило чтобы увидеть имеющиеся в проекте ошибки.
После выбора параметров кликаем “Start” и видим следующую картинку:
Во-первых, при клике правой кнопкой мышки вы можете вызвать контекстное меню и зайти в инструменты разработчика через пункт “Inspect Element”. Во-вторых, слева отображается плавающая менюшка с разными опциями:
- переключение на другое устройство;
- создание скриншота;
- запись видео;
- изменение размеров экрана (на лету);
- создание пометки о баге (я так понимаю сохраняется в системе + скриншот);
- настройки, среди которых есть выбор временной зоны.
В самом верху располагается таймер с отсчетом времени до конца сессии. Напомню, что по Free-регистрации вам дается 6 раз по 10 минут.
После вызова функции просмотра кода вы попадаете в знакомый вам инспектор кода.
Итого
Недавно в твиттере прочитал интересное мнение, что в данный момент лидером по багам в верстке вполне можно считать Safari, а не “всеми любимый” Internet Explorer. Поэтому даже если во всех браузерах под Windows ваш сайт отображается отлично, то все равно нужно посмотреть, как выглядит сайт на разных устройствах с iOS.
Когда под рукой техники Apple не оказалось, то никакие инструменты разработчика или бесплатные сервисы с меняющимися размерами экрана вам не помогут. Если у вас достаточно времени и навыков, чтобы разобраться с виртуальной машиной Oracle VM Virtualbox, то это решит ваши проблемы раз и навсегда. В противном случае нужно смотреть в сторону платных сервисов проверки верстки.
Выбираете один из всех названных выше вариантов: LambdaTest, CrossBrowserTesting или BrowserStack. У первого нет традиционного триального периода, но есть жесткий лимит 6х10 минут в месяц для тестов. В остальных, насколько я понял, открыты большинство функций, но на короткий срок. Тут уж выбираете какой подход вам ближе + возможно, вам пригодится несколько аккаунтов, дабы не ждать обнуления лимитов. Хотя для профессиональных разработчиков сумма в $15/месяц не должна быть проблемой вообще.
А как вы проверяете верстку сайта на iPhone и разных устройствах на iOS?
Меня недавно поймали, когда веб-сайт, который я запустил, отлично отображался в IE, Firefox, Chrome и Safari в Windows, но был поврежден при просмотре с помощью Safari на Mac (потенциальным клиентом), мне нужно начать тестирование того, как мои сайты выглядят, когда просмотрено на Mac.
Проблема в том, что у меня нет Mac.
Я пробовал BrowsrCamp, который утверждает, что предоставляет VNC-доступ к Mac с большим количеством установленных браузеров, но после того, как он оказался ненадежным (пока он работал 1 день из последних 5), мне нужно другое решение.
Вы также можете попробовать свою страницу в браузере на основе WebKit, таком как Epiphany. Очевидно, что это не устраняет необходимость тестирования в Safari, но может быть полезно для репликации многих особенностей Safari в простой и локальной среде.Лучший сайт для тестирования веб-сайтов и просмотра их в реальном времени в MAC Safari - это использовать
У них есть примерно 25 бесплатных минут первого тестирования, а затем 10 бесплатных минут каждый день .. Вы даже можете тестировать свои страницы со своего локального ПК, используя их функцию WEB TUNNEL.
Я тестировал от 7 до 8 страниц в браузере . И я думаю, что у них есть какой-то инструмент отладки java в правом верхнем углу, который очень помогает
Да, Browserstack очень хорош, вы входите в работающую ОС через браузер. Очень кстати. Я впервые попробовал их сегодня утром, и хотя я подписался на их бесплатную пробную версию, все равно казалось, что им нужны деньги, прежде чем они позволят мне попробовать что-нибудь в Safari под OSX. Просто попробовал, и на данный момент последняя версия Safari, которую вы можете использовать бесплатно, - это 7.1, что для меня не очень полезно. Но должен сказать, что возможность локального тестирования хороша. Не разрешать бесплатное тестирование приложений для MAC Как получить эти 25 минут тестирования? Я получаю только 1 минуту без перерыва (что совершенно бесполезно), если я не куплю тарифный план.Между тем, MacOS High Sierra можно запускать в VirtualBox (на ПК) бесплатно. Это не очень быстро, но подходит для общего тестирования браузеров.
Я использую это некоторое время, и он работает довольно хорошо
Также стоит упомянуть, что, используя этот метод, вы можете запустить Safari 11 без фактической установки ОС (что требует времени), щелкнув опцию «Получить справку в Интернете» в меню утилит macOS, которое появляется при первой загрузке базовой системы. , Основная проблема заключается в том, что вам все еще нужен Mac для получения ISO. @SeinopSys . вы не можете . вы можете скачать ISO, см. Мой ответ ниже Уровень бесплатного пользования не поддерживает MacOS, поэтому бесполезно. Также подозрительно похож на BrowserStack, упомянутый в другом ответе @GregWoods У них есть MacOS и Safari . но НЕ последняя версия - за это нужно платить . а в последних версиях полно ошибок, так что это нехорошо.Если для вас серьезная проблема - начать много тестировать на Mac, то я определенно предлагаю купить подержанный Mac или, возможно, собрать Hackintosh. Первый позволяет быстро приступить к работе, а второй дает много мощности по той же цене.
Просто для странного теста: запуск OS X в VMWare на вашем текущем ПК - более дешевый вариант.
Обратите внимание, что лицензионное соглашение Apple EULA запрещает установку OS X на любом компьютере, кроме Mac, и что суды США сочли, что Hackintosh является не чем иным, как нарушением IP Apple. Я не думаю, что поощрять пиратство на SO - хорошая идея. См. По адресу apple.com/legal/sla/docs/OSX1010.pdf на стр. 3: «H. Другие ограничения использования. Предоставленные в настоящей Лицензии гранты не разрешают вам, и вы соглашаетесь не устанавливать, использовать или запускать Программное обеспечение Apple на любом компьютере, не принадлежащем Apple, или для того, чтобы позволить это сделать другим ". В Евросоюзе и Австралии ситуация выглядит иначе, и согласно его профилю О.П. живет в Австралии. @KPM В ЕС законы отменяют это лицензионное соглашение. Так что здесь должно быть законно. Мы даже можем продавать OEM Windows легально, если удалим ее с оригинальной машины.Эти сайты могут помочь:
К сожалению, вы не можете запустить MacOS X ни на чем, кроме настоящего Mac.
Однако MacOS X Server можно запустить в VMWare. Временное решение - установить его внутри виртуальной машины. Но вы должны знать, что MacOS X Server и MacOS X не совсем одно и то же, и ваше тестирование не будет в точности тем, что есть у пользователя. Не говоря уже о цене в 499 долларов.
Самый простой способ - купить себе дешевый Mac mini или ноутбук с разбитым экраном, используемый на ebay, подключить его к своей сети и получить к нему доступ через VNC, чтобы провести тестирование.
Даже OS X Server может быть запущен в VMWare только в том случае, если физический компьютер, на котором он находится, является Mac. Вы не можете запустить OS X Server внутри VMWare на ПК. Это неверно, OSX может иметь как двойную загрузку, так и запускаться через VMWare (что еще проще, если вам совсем не требуется много энергии). Некоторые системы могут не работать, но большинство из них. @KPM - ложная информация. Я запускаю OSX на моем программном обеспечении Windows vmware без проблем. Вам просто нужно знать, как это делать. @KPM - Вы не просто сказали, что . в интересах Apple иметь как можно больше веб-сайтов, совместимых с их дерьмовым браузером, поэтому они должны быть благодарны за любое наше потраченное впустую время, выполняя "незаконную" отладку с виртуальными машинами Я отредактировал ответ, но поскольку ответ представляет собой онлайн-сервис, если связанная страница изменится, это произойдет потому, что она больше не доступна.A) Установите VirtualBox и загрузите бесплатный образ MacOS High Sierra
Вы получите последнюю версию Safari.
Вам не нужно платить за эти онлайн-услуги .
Используйте эти настройки vbox, чтобы увеличить разрешение и объем памяти, но он по-прежнему очень медленный и медленный:
Б) В качестве альтернативы попробуйте VMware 🧡
@edit: это значительно быстрее .
Загрузки mac osx хранятся в чьей-то учетной записи Google Drive? Не кажется вполне законным? Бесплатные пробные версии не являются эффективным долгосрочным решением. Сэр, это ваше личное предпочтение, некоторые могут просто захотеть увидеть, как уже разработанный сайт выглядит на Mac, и этот пробный период покрывает это. В остальном, всегда есть возможность купить фактическую подписку вместо того, чтобы голосовать против ответа.Litmus может вам помочь. Он будет делать скриншоты ваших веб-страниц в самых разных браузерах, чтобы вы могли убедиться, что ваш сайт работает во всех из них. Бесплатная альтернатива (Litmus - платная услуга) - это Browsershots. , но вы получаете то, за что платите. (На некоторых снимках экрана, которые возвращает Browershots, браузер еще не завершил загрузку веб-страницы . )
Конечно, как предлагали другие люди, покупка Mac также является хорошим решением (и может быть лучше, в зависимости от типа тестирования, которое вам нужно провести), потому что тогда вы можете протестировать свой сайт самостоятельно в любом из запущенных браузеров. под Mac OS X или Windows.
А самое главное, какие сервисы на сегодняшний день существуют для ее проверки — разберем наиболее удобные сайты.
Для веб-разработчика это крайне важный момент, так как заказчики обращают большое внимание на одинаковое отображение конечного продукта в разных браузерах.
Что такое кроссбраузерность
Разберемся для начала более подробно в данном понятии — кроссбраузерность в порядке, если контент выглядит достаточно читабельным в любом из часто используемых браузеров, то есть верстка не разваливается.
Происходит такое довольно часто, так как алгоритмы обработки каскадных таблиц css, а также html-кодов в них могут значительно отличаться друг от друга.
Дело в том, что вы не можете точно знать, каким браузером и операционной системой будет пользоваться тот и иной посетитель ресурса.
Значит, для грамотного отображения того или иного элемента необходимо произвести проверку.
Начинающие разработчики могут сделать ручной тест, на наиболее используемых Опере, Мозилле, Гугл Хром, IE.
При этом желательно посмотреть, как выглядит сайт в мобильном варианте, а также привлечь для этого знакомых, которые могут, например, прислать скриншот.
Данный нехитрый способ подойдет для личных блогов, которые вы используете для общения, а вот профессиональные сайты требуют более тщательной проверки.
В этом помогают специальные инструменты, онлайн-сервисы — большинство из них бесплатные, но попадаются платные ресурсы, выбирать лучше по степени эффективности.
Сервисы для тестирования сайта в браузерах
Проверка на том или ином сервисе имеет свои плюсы и минусы, если говорить о платных вариантах, они действительно могут быть затратными.
При этом бесплатные ресурсы особо ничем не уступают последним, хотя и приходится иногда долгое время ждать своей очереди из-за большого количества желающих.
Сразу при переходе у вас открыта вкладка “Browser Compatibility Test”, это и есть проверка на кроссбраузерность.
Для этого в строку необходимо ввести url вашего сайта и нажать на кнопку “Submit”:
Но перед этим уберите ненужные галочки напротив некоторых версий браузеров на ваше усмотрение, внизу вы можете задать необходимые параметры сайта, например, размер экрана или насыщенность цвета, сразу определить, для какой операционной системы нужен анализ:
Это то, сколько минут прошло, сколько осталось, вторая строка — минимальное и максимальное время ожидания, ниже — количество версий задействованных браузеров.
Дополнительно вы можете получить приоритет на час, если нажмете на “Expire in 60 minutes for Priority Users”.
Параллельно вы увидите, как появляются скриншоты уже проверенных версий, если нажать на “Details”, можно проследить текущее состояние в деталях, а также сколько потрачено минут на каждую:
Полученные скриншоты наглядно покажут на имеющиеся недоработки, храниться результаты на сайте должны в течение последующего месяца.
Также совершенно спокойно вы можете их скачать и держать у себя на заметке.
После проверки вы получите исчерпывающие данные и о размере элементов html, и размер используемых изображений, и количество статистических ресурсов.
Вводим адрес в специальную строку, нажимаем “Test now!”:
По результатам тестирования вы получите рекомендации по поводу используемых плагинов, читаемости размера шрифта, а полученные скриншоты будут предоставлены в различных разрешениях.
CrossBrowserTesting Возьмем следующий сервис, который предназначен для обнаружения неточностей работы вашего сайта на базе любых операционных систем и браузеров, в том числе проверка может быть выполнена для устройств на платформе Android и iOS.
Для этого требуется указать свой адрес электронной почты и новый пароль, нажать “Create Your Free Account”:
Для верификации аккаунта пройдите по указанному адресу электронной почты, после чего вы можете пользоваться опциями сайта в течение семи дней совершенно бесплатно.
При этом в использование дается ограниченное количество времени тестирования — всего 60 минут.
Но начнем проверку, сделать это просто — после подтверждения аккаунта вы оказываетесь в разделе “Start a Screenshot Test”.
Проводится она на базе Windows и Mac, браузеры Chrome, FireFox, IE, Opera, Safari, анализ в мобильной версии предоставляется в отдельной вкладке.
В строку вводим адрес нужного вам сайта, как и в предыдущих случаях:
Всего потребовалось порядка 2-3 минут для анализа, теперь можно подробно увидеть полученные скриншоты, а нажав на “Layout Differences”, вы увидите различия в макете, которые обнаружила система.
Больше всего разногласий заметно при исследовании браузера Internet Explorer:
Все полученные скриншоты доступны для скачивания, для этого нажмите “Download” в верхнем правом углу, материалы сохраняться в формате .zip.
А для подробного анализа воспользуйтесь указанной ссылкой под картинкой — “Layout Differences”, при переходе становится доступен подробный анализ элементов:
Итак, сервис прост и удобен в использовании, но, к сожалению, бесплатен только на недельный период.
Также предлагается купить любой из представленных на сайте пакетов, самый недорогой из которых обойдется в $29 ежемесячно.
Перед вами просто строка, куда необходимо ввести адрес:
Фактически это средство для эмуляции большого количества устройств, разрешения могут подбираться по ходу:
Ссылка на скриншот с текущим разрешением доступна, если нажать на крайний правый значок в строке инструментов.
Для начала следует зарегистрироваться, а в этой строке вы получите результаты, занесенные в историю предыдущих тестирований.
Нажимаю “Free Trial”, ввожу адрес электронной почты и пароль, все как обычно.
После регистрации выбираем вкладку “Live”, открывается менюшка со всеми доступными платформами и браузерами.
То, что выделено ярким цветом, доступно для бесплатной версии, учтите, что всего на тестирование дается 30 минут.
Например, выбираю браузер Chrome, загружается программа последней версии:
Открывается окно с дублирующей строкой для url, вводим адрес сайта сюда:
В правом верхнем углу вы найдете систему управления содержимым, то есть, вы не только проверяете различные параметры на соответствие, но и можете их регулировать прямо тут.
Интересно, что для проведения каких-либо действий дается ровно три минуты (таймер вверху слева), есть интересные инструменты, например, создание скриншотов (Screenshots).
Для смены браузера и его версии будет достаточно нажать на значок (в данном случае Chrome), а когда все готово к новой проверке, запустите ее кнопкой “Run”.
Достаточно удобно все устроено — для прохождения теста вы сразу выбираете конкретную платформу и версию браузера, для проверки нужно нажать “Run”.
При этом доступны только те, что окрашены в синий цвет, для некоторых требуется купить доступ к аккаунту, хотя того, что есть, вполне достаточно.
Предварительно нужно зарегистрироваться (можно сначала нажать, а потом уже сделать это).
Ввожу новый логин и адрес электронной почты:
После введения данных тут же будет создан аккаунт, вы будете перенаправлены на страницу, где в строку, дублирующую браузерную, нужно ввести url интересующего вас сайта.
Для тестирования задаете все необходимые параметры, самое главное — адрес страницы, нажимаете “Run Test”.
Минус в том, что после этого сразу проверку пройти нельзя, вы будете поставлены в очередь, а далее сможете следить за ходом выполнения:
При этом совершенно необязательно дожидаться момента окончания процесса, окно вполне можно закрыть, результат придет на указанный адрес электронной почты.
Как оказывается, совсем не обязательно пользоваться платными источниками, есть большое количество из них, которые можно назвать условно-платными.
При этом изредка пользоваться предлагаемыми возможностями можно и совершенно бесплатно. Главное, что все они дают четкое представление о том, стоит ли дорабатывать свой проект и все уже доведено до ума.
Читайте также: