22-02-2018 | Автор: Усков Станислав (inpost) / School-PHP.com | Количество просмотров: 17253

Данная инструкция подходит как для программистов с Windows, так и для элиты с Linux :)

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

Для тех, кто в первые слышит об этом, то советую заглянуть на сайт can i use и изучить. На самом деле, помимо замедленной скорости появления новинок в браузерах, мобильные устройства, особенно от Apple, любят блокировать часть функционала. Так, к примеру, на 2018 год недоступны Notifications. Поэтому, чтобы убедиться, что проверка "доступны ли функции" и правильно ли они работают надо тестировать сайт на всех популярных устройствах. Вот только Apple кинул палки в колёса обычному простому программисту и даже имея на руках iPhone или iPad заглянуть в консоль разработчика для дебага не выйдет, пока не приобретёте Mac, или не установите пиратскую Mac OS на свой компьютер. Именно поэтому приходится искать пути обхода ограничений и научиться тестировать в столь агрессивной для программиста среде. И тут гугл приходит на помощь нуждающимся и создаёт iOS WebKit Debug Proxy.

План установки ios-webkit-debug-proxy для работы с iPhone и iPad console из Windows:

1) Правой кнопкой на пуск и выбираем "Windows PowerShell".

2) Если в пуске отсутствует "PowerShell", то выбираем "Командная строка", в открывшемся окне вводим:

powershell

3) Если в пуске отсутствуют и Windows PowerShell и Командная строка, то открыть командную строку можно нажав комбинацию клавиш "Win + R", и в ней написать cmd, которая откроет командную строку, в которой мы напишем "powershell"

4) Теперь необходимо установить. Выполняете следующие команды по очереди, 1 строчка = 1 команда, не всё сразу:

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
scoop bucket add extras
scoop install ios-webkit-debug-proxy

5) Запускаем iOS WebKit Debug Proxy командой:

ios_webkit_debug_proxy

6) Теперь подключаем по USB Ваш iPhone или iPad. Если выйдет табличка "Доверять ли данному устройству", то соглашаемся.

7) В браузере iPhone или iPad открываем сайт в первой вкладке, лучше на момент тестирования иметь одну вкладку. Хочу заметить, что в некоторых случаях закрыв первую вкладку останется одна вторая, но при этом она первой не станет и из-за этого могут возникнуть косяки. Проще закрыть все вкладки, перезагрузить браузер и открыть сайт в одной вкладке. Не закрывая браузер параллельно открываем настройки:

Settings > Safari > Advanced > Web Inspector = ON

Если случайным образом у Вас уже стоит галочка ON на Web Inspector, то, желательно, её отключить и вновь включить.

8) Переключаем вкладку в iPad или iPhone в браузер и обновляем страницу. Теперь настройка на уровне устройства завершена, возвращаемся в Windows для открытия консоли.

9) В Windows в Google Chrome в адресной строке открываем http://localhost:9221/ . Перед Вами появится следующая картина: подключенное устройство, а так же ссылки на каждую из вкладок. Если ссылки не появились, то повторите пункт 7, или 5-7. (В моём опыте с первой попытки с PowerShell появилась надпись "Please verify that Settings > Safari > Advanced > Web Inspector = ON" и всё, переключение не давало плодов, но как только я нажал OFF, а потом вновь ON с подключенным кабелем всё заработало и ссылки на данной странице появились. Чтобы выключить запущенный процесс в PowerShell достаточно нажать комбинацию "ctrl+C", это может пригодиться, снова же, чтобы повторить пункты с 5 по 7. Хочу так же заметить, что вторая ошибка "WebSocket Disconnected" так же связана с установкой галочки web Inspector ON.

10) Смело переключаемся в вкладку Network в браузере Windows, далее в браузере iPhone или iPad ждём перезагрузку страницы и получаем рабочую эмуляцию консоли в Windows. Поздравляю!

Работа с ошибками при попытке подключиться к console iPhone и iPad

Так уж получилось, что я не являюсь разработчиком "iOS WebKit Debug Proxy". Поэтому, если у Вас возникли какие-то непредвиденные ошибки в момент установки, то либо iOS обновился, но WebKit Debug Proxy ещё не успел, либо остальные популярные ошибки можно почитать с официального сайта, ссылку на который я давал в самом начале данной инструкции. В данной инструкции я ни слова не сказал про iTunes. Не знаю будет ли работать без, хотя в документации с официального сайта так же тихо, но в моём случае с установленным iTunes всё нормально работает!

Приятного тестирования :)

Напишите свой комментарий:

Имя:
E-mail: на него отправится ответ
Skype Станислава: напишите мой скайп (есть внизу страницы)
Введите комментарий:

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