Как проверить верстку в сафари на windows

Далеко не у всех есть макбук, особенно на первых шагах обучения и практики, но рано или поздно стает вопрос, а как проверить верстку в Safari из по Windows? В целом без MacOS вы особо не развернетесь, есть различные онлайн сервисы, но в основном платные, а информации они особо не предоставляют, обычно это скриншоты с разных устройств и это гадание по фотографии, ну такое…

Так что же делать? 

Если не покупать макбук, то самое эффективное решение это поставить эмулятор macOS. Для отладки js и проверки верстки в Сафари этого будет более чем достаточно. На самом деле поставить эмулятор, да так чтобы он еще адекватно работал, не так то и просто. Недавно я решил поставить на новый ноутбук эмулятор macOS последних версий и много раз об этом пожалел, я переставил кучу версий, но сафари в них работает просто ужасно, половину сайтов даже не открывает и судя по комментариям эта проблема глобальна. В общем я вернулся к проверенной macOS High Sierra.

А теперь по пунктам:

1. Вам необходимо скачать и установить VMware Workstation, это эмулятор, он платный, где и как вы его будете качать решайте сами

2. Вам нужен VMware Unlocker, я использовал этот. Unlocker  — это такая штука, которая научит VMware эмулировать macOS. Тут в целом все просто, скачиваете, распаковываете, в папке windows жмете правой кнопкой мыши по unlock.exe и выбираете запустить от имени администратора

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

4. В целом это все, дальше можно настроить сеть, например NAT позволяет выходить в интернет через вашу основную сеть используя её как маршрутизатор(Объясняю своими словами я не селен в этом), но если хотите подключиться например к localhost вашей основной ОС из под macOS, тогда понадобиться настроить мост, но это уже другая история, сейчас я не вспомню как это делал.

Надеюсь эта статься была полезной и я смог кому-то помочь. При копировании пожалуйста указывайте источник: https://get-web.site/blog/104-testiruem-verstku-v-safari-bez-makbuka-proverka-krossbrauzernosti-otladka-js-v-macos-iz-pod-windows.html

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

Что такое кроссбраузерность

Для начала определимся с терминами:

Кроссбраузерность — работа сайта без сбоев в вёрстке, функционировании и юзабилити в популярных браузерах, под управлением ОС Unix, Windows, Apple.

Популярные браузеры — браузеры, традиционно входящие в ТОП пользовательских предпочтений:

• Google Chrome
• Opera
• Mozilla Firefox
• Microsoft Edge

Я специально не вношу в список менее популярные браузеры типа Vivaldi, Brave, Yandex браузер. Эти браузеры работают на движке Webkit, и если сайт корректно отображается в Google Chrome, он будет корректно отображаться и в указанных браузерах.

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

Как добиться кроссбраузерности

По сути, достижение кроссбраузерности сводится к написанию т.н. браузерных (вендорных) префиксов в CSS коде сайта для каждого из нужных элементов. Например, так выглядит кроссбраузерный код для написания кнопки с префиксом для браузера Firefox:

button {
    text-align: center;
    color: #f8f8f8;
    width: 250px;
    height: 45px;
    background: #f6f6f6;
    border: none;
    padding: 7px 0 6px 0;
}
button::-moz-focus-inner {
    padding:0;
    border:0;
}

Префиксы пишутся как вручную, так и автоматизировано, с помощью сборщиков типа Gulp. Для браузеров типа Internet Explorer (старее IE11), пишутся дополнительные полифиллы (специальные блоки кода на языке JavaScript).

Кроме того, разработчики применяют CSS-хаки, рецепты которых размещены на популярных интернет-форумах.

ТОП сервисов для проверки кроссбраузерности сайта онлайн

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

• онлайн-сервис порой выдает ошибки, в результате — временные затраты;
• онлайн-сервисы часто требуют платы за дополнительный функционал;
• онлайн-сервисы — не панацея, например проверять работоспособность сайта на iOs лучше на iPhone.

Несмотря на описанные выше недостатки, онлайн-сервисы для проверки кроссбраузерности — отличные инструменты, и я составил свой ТОП-5. При составлении рейтинга я ориентировался на удобство для пользователя, лайв-тестирование без предварительной регистрации, а также на скорость работы сервиса.

1. Screenfly

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

Плюсы:

• работа «на лету»;
• бесплатный.

Минусы:

• не дает тестировать работу в ОС UNIX и Apple;
• не дает сразу посмотреть результат работы в разных браузерах.

2. Browsershots

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

Плюсы:

• проверяет работоспособность на ОС Windows, Unix;
• проверяет работоспособность на разных версиях JS;
• дает проверить работу сайта на малопопулярных браузерах.

Минусы:

• бесплатные проверки занимают много времени;
• периодически отдает ошибку 500 при работе.

3. Browserstack

Сервис для тестирования как сайтов, так и мобильных приложений.

Плюсы:

• автоматизация тестирования (в платной версии);крутой функционал;
• крутой функционал;
• есть множество интеграций в популярные IDE и браузеры, что значительно облегчает работу.

Минусы:

• платный, хотя платим за качественный продукт.

4. Browserling

Дает протестировать сайт под управлением Windows и Android. При тестировании открывает нечто вроде виртуальной машины в браузере, (3 минуты в бесплатной версии), где можно проводить разные действия с сайтом.

Плюсы:

• виртуальная машина;
• проверяет работоспособность под Android.

Минусы:

• платный
• нельзя протестировать сайт на iOs или macOS;
• лайв-тестирование всё-таки тормозит при работе.

5. IE NetRenderer

Сервис, проверяющий работу в браузерах Internet Explorer, в том числе и на устаревших. Подойдет для тех, кому важно обеспечить работу именно на Internet Explorer, потому что других браузеров для тестирования на этом сервисе НЕТ.

Плюсы:

• бесплатный;
• скорость работы;
• лайв-тестирование.

Минусы:

• тестирует ТОЛЬКО на Internet explorer.

Как проверить кроссбраузерность на ПК?

Проверить кроссбраузерность сайта можно не только на онлайн-сервисах. Часто бывает достаточно установить на свой ПК три браузера:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge

Каждый из этих браузеров использует свой популярный движок, и работоспособность проекта на трех указанных выше браузерах означает работоспособность на 90% устройств в Сети.

Для проверки работоспособности на ОС Unix (если вы работаете на Windows) используются технологии виртуализации Windows, либо сторонние программы типа VirtualBox.

Плюсы такого подхода:

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

Минусы:

• временные затраты;
• для установки ОС семейства Unix на виртуальную машину потребуется разобраться в этой технологии.

Как проверить сайт на Safari, работая на Windows

А вот тут вебмастерам, работающим на Windows, не повезло. Ни один онлайн инструмент для тестирования пока еще не может на 100% отследить баги, которые возникают в браузере Safari, на iOs или macOS. А версия браузера Safari для Windows перестала поддерживаться еще в прошлом десятилетии.

К счастью, Apple открыла исходный код одной из версий своей ОС, и это дает определенные надежды на появление адекватных инструментов…но в будущем.

Итак, проверить работоспособность сайта на устройствах от Apple, работая в Windows, можно несколькими способами:

• иметь под рукой iPhone для тестирования. Или попросить знакомого владельца iPhone открыть сайт и проверить работоспособность;
• установить виртуальную macOS (в сети есть варианты решения, я не буду их подсказывать, т.к. способы откровенно пиратские).

Заключение

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

Онлайн-сервисы решают проблему тестирования быстро, пусть и не бесплатно. Но офлайн-тестирование на ПК через инструменты разработчика дает больше информации, хоть и требует больше навыков в общении с ПК.

С вами был webmaster_zotov, до новых встреч!

Может быть, в будущем все веб браузеры будут выводить HTML/CSS код одинаково и в соответствии со стандартами. Тогда кросс браузерная проверка станет не нужна. Но такие рассуждения все еще остаются фантастикой, и проверка вашего проекта в современных и старых версиях браузеров необходима.

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

Бесплатная проверка на кросс браузерность

Adobe BrowserLab

Adobe BrowserLab — это бесплатный инструмент, который позволяет протестировать ваш проект в различных версиях Chrome, Safari, IE и Firefox. Он предоставляет несколько способов просмотра страниц, включая полно экранный обзор и визуальное сравнение разных вариантов. Сервис может получать динамические страницы через сеть, или его можно использовать локально через Firebug или Adobe Dreamweaver CS5. Также допускается определять комбинацию наборов браузеров, если вам не нужно тестировать проект в очень старых версиях.

Browsershots

Browsershots — вероятно наиболее полный бесплатный инструмент для тестирования, доступный в настоящее время. Он включает варианты браузеров для Linux, Windows и BSD. На нем также можно найти браузеры, о которых вы могли и не знать (например, Galeon, Iceape, Kazehakase и Epiphany). По умолчанию Browsershots проводит проверки на последних версиях браузеров, но доступны и старые варианты.

Чем больше браузеров будет определено для проверки, тем больше времени уйдет на подготовку результатов. Данный факт надо учитывать при выборе набора браузеров.

SuperPreview

SuperPreview является предложением Microsoft в области кросс браузерной проверки  (и он совместим только с Windows). Инструмент позволяет определять набор браузеров для проведения тестов. Он работает с любым браузером, установленным на вашей системе (механизм вывода IE6 встроен в него). Данный факт является причиной его быстрой работы (не нужно ждать загрузки или окончания обработки на удаленном сервисе), но и ограничивает набор доступных браузеров для сравнения.

SuperPreview является бесплатным инструментом и планируется как часть Expression Web. В онлайн версии имеется поддержка  Chrome, Safari (Mac) 4+5, Firefox 3+4. Также можно использовать интерактивный режим для веб сайтов, которые требуют регистрации перед выводом страниц, которые надо проверить. Есть инструмент отладки для DOM. К сожалению, отсутствует поддержка Opera, даже если она установлена локально.

Lunascape

Lunascape — это браузер с тройным механизмом вывода для Windows. Он использует Trident (IE), Gecko (Firefox) и Webkit (Chrome и Safari). Поэтому вы можете увидеть, как выглядит ваш сайт во всех трех вариантах в виде визуального сравнения. Хотя Lunascape не является традиционным инструментом тестирования, тем не менее, он будет очень полезен для дизайнеров и разработчиков. Его основным преимуществом является моментальный просмотр страниц сайта во всех трех вариантах механизмов вывода. Lunascape также поддерживает расширения и плагины Firefox, так что вы можете использовать Firebug для диагностики проблем совместимости.

IETester

IETester — браузер для Windows, который позволяет использовать механизмы вывода и JavaScript для просмотра сайта в версиях IE10, IE9, IE8, IE7, IE6 и IE5.5. Для работы инструмента требуется Windows 7, Windows Vista или Windows XP с IE7.

IE NetRenderer

IE NetRenderer позволяет проверить совместимость с сайта с Internet Explorer версий от 5.5 до 9. Вам придется проверять каждую версию индивидуально.

Spoon

Spoon — сервис для имитации приложений. На нем доступны различные версии Firefox, Chrome, Opera и Safari для пользователей Windows. Недостаток: Internet Explorer поддерживается механизмом виртуализации Spoon, но по требованию Microsoft данный браузер исключен из вариантов тестирования..

Browsera (бесплатная и коммерческая версии)

Browsera обеспечивает автоматический тест на совместимость. На результатах проверки выделяются различия в видах вывода вашего дизайна в разных браузерах, что существенно облегчает процесс. Также определяются ошибки JavaScript. А коммерческий вариант сервиса может проводить проверки страниц, требующих регистрации пользователя.

В бесплатном варианте доступен ограниченный набор браузеров и низкое разрешение снимков экрана. Коммерческая версия стоит $39 за один проект и от  $49 до $99 за месячную подписку, и в нем доступны большой список браузеров, высокое разрешение снимков экрана и проверка страниц, требующих регистрации пользователя.

Browserling (бесплатная и коммерческая версии)

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

Бесплатная версия имеет ограничение по времени сессии в размере 5 минут, а коммерческий вариант без ограничений стоит $20в месяц.

Коммерческие инструменты для тестирования

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

Mogotest

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

Доступны несколько тарифных планов. Персональный тарифный план стоит $15 в месяц и допускает проверки до 50 страниц на трех сайтах. Тарифный план для фрилансеров стоит $45 в месяц и допускает проверки на 10 сайтах и до 350 страниц. Групповой тарифный план стоит от $125 в месяц до $4499+ за неограниченный доступ.

Cloud Testing

Cloud Testing предлагает функциональное тестирование проекта. Вы можете записать предполагаемые действия пользователя в вашем браузере с помощью Selenium IDE, затем загрузить их, а Cloud Testing выполнит скрипт в разных операционных системах и браузерах. А затем будет предоставлены снимки экранов и диагностика HTML и компонентов.

BrowserCam

BrowserCam включает инструменты тестирования для версий браузеров настольных систем и мобильных устройств (что отсутствует во многих других инструментах проверки). Также доступен удаленный доступ для реальной проверки в конфигурациях Windows, Linux и OS X. Возможен перехват email для проверки HTML, RTF и TXT версий писем.

Стоимость использования BrowserCam начинается от $19.95 за один сервис в день и заканчивается $999.95 за годовую подписку на полный комплект услуг.

Multi-Browser Viewer

Multi-Browser Viewer выполняет проверки для браузеров настольных систем и мобильных устройств. Он включает 26 виртуализированных веб браузеров, 5 браузеров для мобильных устройств (включая iPhone и iPad) и 61 вариант браузеров для снимков экрана (вы сможете видеть, как сайт выглядит, но взаимодействовать с ним нельзя). Также доступны пять языков: английский, испанский, немецкий, русский и французский.

Multi-Browser Viewer стоит $139.95 за однопользовательскую лицензию, включая годовую поддержку. Обновления после года использования стоят $99.95. Также доступен пробный период использования инструмента через веб сайт.

Сравнение инструментов

В ниже приведённой таблице сведены вместе некоторые сведения об инструментах тестирования для сравнения их между собой и выбора наиболее подходящего варианта.

Заключение

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