Как запустить javascript console iphone, ipad, ios в Windows без Mac

| Автор: / School-PHPSchool-PHP.com | Количество просмотров: 5601
Данная инструкция подходит как для программистов с 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 всё нормально работает!

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

Комментарии о School-PHP (0):


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

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

Персональный блог Ускова Станислава: School-PHP.com

В основном в данном блоке идут посадочные страницы с целью привлечения аудитории из Google и Yandex. Под каждый поисковый запрос создаётся отдельная страница, в итоге мы получаем много статей на разные темы, при этом полезны только для того, кто был заинтересован именно этим запросом. Для остальных же всё же советую сосредоточиться на прохождении общей программы курса!
Главная БАЗОВЫЙ КУРС ПЕРВЫЙ УРОВЕНЬ программирования ВТОРОЙ УРОВЕНЬ верстки ВТОРОЙ УРОВЕНЬ программирования Начать обучение Запуск проекта Мелкие трюки Делимся практикой трудоустройства Проверь свои знания Задачи по PHP MySQL Блог Отзывы