Как отлаживать веб-страницу на iPhone — без Mac

Начните с диагностики: автоматическая проверка

Прежде чем копаться в DOM, дайте автоматической проверке назвать очевидное: «Диагностика» в OpenHTML перечисляет отсутствующие файлы, на которые ссылается страница, удалённые ресурсы, заблокированные настройкой приватности по умолчанию, ошибки выполнения JavaScript и проблемы с кодировкой — и предлагает исправление в одно касание там, где оно есть (разрешить сеть, включить JS, перейти на локальный сервер).

На практике это за секунды снимает большинство вопросов «почему пусто / без стилей / работает наполовину», особенно со страницами, созданными ИИ, которые ссылаются на так и не созданные файлы.

Консоль: что говорит страница

Консоль в реальном времени собирает вывод log, warn и error из JavaScript страницы. Непойманные исключения попадают сюда вместе со своими сообщениями — обычно это самая быстрая подсказка, когда интерактивность отказала.

Инспектор элементов: DOM прямо на устройстве (Pro)

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

Панель сети: каждый запрос с таймингом (Pro)

Следите за трафиком fetch, XHR и WebSocket — с адресами, кодами ответа, размерами и таймингом: это вкладка сети, только на устройстве. Всю сессию можно выгрузить в файл HAR и разобрать позже в десктопных DevTools, Charles или Proxyman.

Помните о приватности по умолчанию: страницы не выходят в сеть, пока вы не разрешите это для документа, поэтому пустая панель сети может просто означать, что страницу держат офлайн, — «Диагностика» об этом скажет.

Воспроизведите реальные условия

• Режим локального сервера (Pro) раздаёт проекты на 127.0.0.1, чтобы fetch(), ES-модули и загрузка JSON вели себя как в продакшене — без этого не обойтись с веб-проектами в ZIP.
• Пресеты областей просмотра (Pro) отображают страницу в ширине телефона, планшета и компьютера, чтобы выловить ошибки адаптивности.
• «Запросить версию для компьютера» (Pro) загружает десктопную вёрстку, когда страница слишком рьяно подстраивается под мобильный экран.

Как это выглядит на практике

1. Импортируете страницу или проект; диагностика отмечает заблокированную таблицу стилей с CDN и одну ошибку в консоли.
2. Разрешаете сеть для документа → стили подгружаются, ошибка остаётся.
3. Консоль показывает необъявленную переменную в app.js; просмотр исходного кода переходит к нужной строке.
4. Догадку подтверждаете правкой атрибута DOM в инспекторе — а затем нормально исправляете файл за рабочим столом и импортируете заново для проверки.