Иногда в работе бывает нужно заскринить сайт с телефона, чтобы продемонстрировать мобильную версию или показать побольше контента. Например, так удобно демонстрировать статьи — в вертикальный скриншот влезает больше контента, а по бокам не остается пустого пространства.
Мне скринить с телефона всегда было неудобно — нужно делать скриншот, пересылать его на компьютер, а потом еще запихивать его в мокап или бросать сверху тень. Куча мороки. Но недавно мне показали способ сделать все это гораздо быстрее и вообще без участия смартфона. С ним получается без сторонних программза несколько секунд делать вот такие симпатичные мокапы:
Чтобы показать, как это сделать, записала гифку. Можете посмотреть сразу ее:
Если по гифке не очень понятно, следите за руками:
- Открываем нужный сайт в браузере Google Chrome
- В панели инструментов браузера нажимаем на три точки справа — там, где у нас все настройки.
- Выбираем там «Дополнительные инструменты → Инструменты разработчика». Появляется страшная консоль с кучей кода. Обычно она вылезает справа, иногда снизу (видимо, на старых версиях Хрома, точно не уверена).
- В этой консоли в левом углу есть кнопка с изображением смартфона. При наведении появляется подпись «toggle device toolbar». Нажимаем на нее — и сайт слева становится маленьким и переходит на мобильную версию.
- Теперь над сайтом на самом верху есть панелька: на ней можно выбирать разные версии смартфонов, чтобы экран был разного размера.
- Если вам нужно, чтобы вокруг экрана была рамочка смартфона, то есть можно было сразу заскриншотить мокап, нужно сделать еще одно действие. На новой панели (где у вас выбор версии смартфона) справа есть три точки. Нажмите на них и выберите «Show device frame». Готово — у вас вокруг скриншота красивая рамка. Учтите, что не у всех версий смартфона есть рамка. Я обычно выбираю iPhone 6/7/8, там рамка красивая и размер подходящий.
- Теперь нажмите на те же три точки и выберите «Capture screenshot». Сохраняйте скриншот куда хотите. Он будет сразу на прозрачном фоне. Внутри окошка сайт можно листать, чтобы сделать скриншот другой части экрана.
Может, этот способ уже все давно знали и я динозавр) Но надеюсь, хоть кому-то будет полезно.
Ммм, миллениалы нашли кнопку F12 в Хроме...
Если бы кнопка f12 не только открывала консоль, но и сразу переводила в мобильную версию, кидала рамку и сохраняла скриншот, было бы конечно очень удобно)
Хмм. Пойду писать статью "Лайфхаки от кнопки f12". Один из таких раскрою сейчас: чтобы загрузить в инсту фотку, можно нажать f12, сделать мобильную версию и грузить фотки как с телефона.
Ставьте класс, делитесь с друзьями в ватсапе.
И давно это работает? А то я качал какую-то приблуду специальную для инсты
В мобильной версии инсты нет кнопок загрузки фото.
UPD: я - долбач, всё есть.
да кстати, очень удобная тема
Шутишь?
Вот они вайтишницы, которые теснят мужиков в ИТ. Поднажмите, еще чуть чуть и хоткеи в хроме выучите
Комментарий недоступен
Если вы не заметили, это раздел не IT, а маркетинг)
И никакого сексизма. Когда попадаю на ваши комментарии, сразу понимаю, как давно вам не попадались хорошие женщины.
Лена, спасибо. Про рамку и скриншот не знал. Может у вас есть Инстаграм с вашими фото ещё?
Комментарий недоступен
Это очень мощная статья для vc.ru сразу в New York Times нужно было:)
Как вы догадались, как раз готовлю перевод для New York Times
Очень полезно, спасибо.
😂😂😂 что дальше? туториал по мониторингу сетевой активности во вкладке network? как увидеть скрытые поля формы? где искать куки и что с ними делать? добро пожаловать в нарнию?
Открыли, блин, Америку. Это уже хрен знает сколько лет известно. Я лично использую эмулятор iPhone для XCode в таких случаях (ибо так и не смог полюбить яблокофоны с самого начала).
Комментарий недоступен
Комментарий недоступен
Я тот самый динозавр, который ничего этого не знал 😁 спасибо большое!
в голос
Проще открыть на смартфоне мобильную версию, сделать скриншот и в специальном приложении получить желаемую картинку "как на смартфоне"
Потом ее нужно пересылать на компьютер, если работаешь (например статью пишешь) именно на компе. Если сайт у тебя уже открыт с компа, сделать такой скриншот гораздо быстрее и проще
Годно!
Неплохо, но лучше не текстом а скриншоты ))
В чем проблема, в мобильном браузере выбрать раздел "Версия для ПК", а после комбинацией нескольких клавиш( или свайпом ладони вдоль/поперек датчиков приближения) сделать скрин???
В том, что после нужно отправлять скриншот на комп, чтобы его как-то использовать, а также дополнительно оформлять: ставить в рамку или бросать тень
Блин, а в универе я удивлялся почему мои одногруппники не знают про то что можно открыть исходный код элемента и визуально поменять результаты теста на нужные. Видимо таких много
Инструкция не про то, как открыть исходный код. Инструкция в первую очередь именно про скриншоты в мокапе, а это чуть менее очевидно, чем просто исходный код
F12 и потом Ctrl+Shift +M - давно известная тема )))
Спасибо от динозавра:)