Дебаг мобильных сайтов

Я не очень часто имею дело с мобильной вёрсткой, в основном всё время занимаюсь разработкой десктопных приложений. Но на своём пет-проекте мне понадобилось немного подебажить мобильную версию. Спросил Codex, и он рассказал мне, как сайт открытый на реальном айфоне, можно нормально смотреть через Web Inspector в Safari. На Android, насколько знаю, есть что-то похожее.

Делается так:

- на iPhone включить: Settings → Safari → Advanced → Web Inspector - подключить iPhone к Mac по кабелю - на Mac открыть Safari и включить меню разработчика: Safari → Settings → Advanced → Show features for web developers - открыть сайт на iPhone в Safari - на Mac выбрать: Develop → [твой iPhone] → [страница]

После этого можно смотреть console, network и elements как в обычных DevTools.

А ещё можно включить iPhone Mirroring. Тогда экран телефона видно прямо на ноутбуке, и не нужно постоянно перекладывать взгляд с мака на айфон и обратно.

Ставьте: 💜 - если часто занимаетесь мобильной вёрсткой 🍾 - если в основном работаете с десктопными приложениями 😱 - если вы не фронтендер

#frontend

Дебаг мобильных сайтов | Сетка — социальная сеть от hh.ru
Дебаг мобильных сайтов | Сетка — социальная сеть от hh.ru Дебаг мобильных сайтов | Сетка — социальная сеть от hh.ru