Дебаг мобильных сайтов
Я не очень часто имею дело с мобильной вёрсткой, в основном всё время занимаюсь разработкой десктопных приложений. Но на своём пет-проекте мне понадобилось немного подебажить мобильную версию. Спросил 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. Тогда экран телефона видно прямо на ноутбуке, и не нужно постоянно перекладывать взгляд с мака на айфон и обратно.
Ставьте: 💜 - если часто занимаетесь мобильной вёрсткой 🍾 - если в основном работаете с десктопными приложениями 😱 - если вы не фронтендер
· 19.06
Web Inspector через кабель спасает, юзаю постоянно. Добавлю что не сразу очевидно: для Android есть chrome://inspect на десктопном Chrome, работает так же. И на реальном девайсе ловятся баги которых нет в эмуляторе: 100vh прыгает из-за адресной строки, тач-таргеты меньше 44px не нажимаются. Эмулятор это про лейаут, реальный телефон про поведение.
ответить
коммент удалён