Как отлаживать странное? Вторая часть

Проще всего отладить сайт на медленном интернете с помощью тротлинга в веб‑инспекторе. В Хроме и Сафари это выпадайка во вкладке Network:

В Сафари тротлинг пока считают экспериментом. Его нужно включить в настройках веб‑инспектора: Settings — Experimental — Network — Allow throttling

Чтобы отладить проблему, которая появляется на реальном айфоне, который есть у вашего коллеги где‑нибудь в Казахстане или Грузии, расшарьте экран его компьютера через Зум или Телеграм, подключите айфон и стримьте через QuickTime: File — New Movie Recording — Camera — iPhone

Вы увидите то же, что и ваш коллега при работе с телефоном

Если вместо голого Хрома используете Browserless, сразу открывайте встроенный отладчик

Чтобы отладить страницу в безголовом Хроме, запустите его с флагом --remote-debugging-port=9222, откройте в обычном Хроме страницу chrome://inspect и подключитесь:

Если вместо голого Хрома используете Browserless, сразу открывайте встроенный отладчик

При отладке автоматизации иногда проще посмотреть вживую на то, что делает браузер. В таком случае лучше выключить безголовый режим. Если используете puppeteer, то это headless: false

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Комментарии

Александр Лобов

Чтобы увидеть то, что видит коллега при работе со своим телефоном, достаточно попросить коллегу записать скринкаст и скинуть видео в мессенджер. Это быстрее и не нужно будет заставлять коллегу садиться за комп и объяснять ему, как стримить через QuickTime. Ведь коллега — это не обязательно компьютерщик, он может быть и маркетологом, и вообще у него может не быть мака.

Вообще, увидеть проблему своими глазами — этого мало для отладки. Если уж мы заставили коллегу сесть за компьютер и постримить видео с айфона, то можем попросить его настроить и инструменты отладки. Для этого нужно в настройках Сафари на айфоне выбрать Advanced / Web Inspector, а в Сафари на маке — выбрать айфон в списке устройств в меню «Разработка»:

Комментарии

Рекомендуем другие советы

Свежак

Текст

Дизайн

Вёрстка

Визуализация

Текст

Веб‑инспектор для дизайнеров

Под капотом бюро