{"id":4725,"title":"\u041c\u0430\u0441\u0442\u0435\u0440-\u043a\u043b\u0430\u0441\u0441: \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0438 \u0432\u0435\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0433\u043e\u0432\u043e\u0440\u044b","url":"\/redirect?component=advertising&id=4725&url=https:\/\/vc.ru\/promo\/269679-korotko-interaktivnyy-master-klass-o-komandnoy-rabote-i-masterstve-peregovorov&hash=10609550b909bb5be9e2454a472e95a790a4f1279029e657ec1c7baeac51ec09","isPaidAndBannersEnabled":false}

Как за 15 секунд сделать красивый скриншот «как со смартфона» без смартфона

Иногда в работе бывает нужно заскринить сайт с телефона, чтобы продемонстрировать мобильную версию или показать побольше контента. Например, так удобно демонстрировать статьи — в вертикальный скриншот влезает больше контента, а по бокам не остается пустого пространства.

Мне скринить с телефона всегда было неудобно — нужно делать скриншот, пересылать его на компьютер, а потом еще запихивать его в мокап или бросать сверху тень. Куча мороки. Но недавно мне показали способ сделать все это гораздо быстрее и вообще без участия смартфона. С ним получается без сторонних программза несколько секунд делать вот такие симпатичные мокапы:

Чтобы показать, как это сделать, записала гифку. Можете посмотреть сразу ее:

Если по гифке не очень понятно, следите за руками:

  1. Открываем нужный сайт в браузере Google Chrome
  2. В панели инструментов браузера нажимаем на три точки справа — там, где у нас все настройки.
  3. Выбираем там «Дополнительные инструменты → Инструменты разработчика». Появляется страшная консоль с кучей кода. Обычно она вылезает справа, иногда снизу (видимо, на старых версиях Хрома, точно не уверена).
  4. В этой консоли в левом углу есть кнопка с изображением смартфона. При наведении появляется подпись «toggle device toolbar». Нажимаем на нее — и сайт слева становится маленьким и переходит на мобильную версию.
  5. Теперь над сайтом на самом верху есть панелька: на ней можно выбирать разные версии смартфонов, чтобы экран был разного размера.
  6. Если вам нужно, чтобы вокруг экрана была рамочка смартфона, то есть можно было сразу заскриншотить мокап, нужно сделать еще одно действие. На новой панели (где у вас выбор версии смартфона) справа есть три точки. Нажмите на них и выберите «Show device frame». Готово — у вас вокруг скриншота красивая рамка. Учтите, что не у всех версий смартфона есть рамка. Я обычно выбираю iPhone 6/7/8, там рамка красивая и размер подходящий.
  7. Теперь нажмите на те же три точки и выберите «Capture screenshot». Сохраняйте скриншот куда хотите. Он будет сразу на прозрачном фоне. Внутри окошка сайт можно листать, чтобы сделать скриншот другой части экрана.

Может, этот способ уже все давно знали и я динозавр) Но надеюсь, хоть кому-то будет полезно.

{ "author_name": "Лена Шпрингер", "author_type": "self", "tags": [], "comments": 72, "likes": 41, "favorites": 116, "is_advertisement": false, "subsite_label": "services", "id": 156830, "is_wide": true, "is_ugc": true, "date": "Wed, 09 Sep 2020 07:49:29 +0300", "is_special": false }
0
72 комментария
Популярные
По порядку
Написать комментарий...
69

Ммм, миллениалы нашли кнопку F12 в Хроме...

Ответить
0

Если бы кнопка f12 не только открывала консоль, но и сразу переводила в мобильную версию, кидала рамку и сохраняла скриншот, было бы конечно очень удобно) 

Ответить
8

Вообще то мобильная версия выглядит так

Ответить
–2

Да, тут мой косяк. Надо выбрать было мобильную версию в консольке.

Ответить
0

это где именно?

Ответить
0

В этих же трех точках выбрать «Add device type» и на некоторых сайтах там можно менять тип версии.

Ответить
0

А можно этот пример с vk на скрине, не понятно

Ответить
0

Ага, там все сложнее чуть оказалось. Он сам перестраивает на мобильный вид, если верстка адаптивная. А чтобы например вк открыть мобильный, мне быстрее прописать m.vk.com. Но тут такие IT-гуру и знатоки консоли, может кто-то что-то умнее подскажет)

Ответить
3

Как интересно 🧐 можно новый пост написать

Ответить
19

Хмм. Пойду писать статью "Лайфхаки от кнопки f12". Один из таких раскрою сейчас: чтобы загрузить в инсту фотку, можно нажать f12, сделать мобильную версию и грузить фотки как с телефона. 
Ставьте класс, делитесь с друзьями в ватсапе. 

Ответить
0

И давно это работает? А то я качал какую-то приблуду специальную для инсты

Ответить
0

В мобильной версии инсты нет кнопок загрузки фото.
UPD: я - долбач, всё есть.

Ответить
–1

да кстати, очень удобная тема

Ответить
–1

Шутишь?

Ответить
5

Лена Шпрингер

Вот они вайтишницы, которые теснят мужиков в ИТ. Поднажмите, еще чуть чуть и хоткеи в хроме выучите

Ответить

Слепой Даниль

Илитный
9

Справедливости ради отмечу, что от пола квалификация никак не зависит. И девчонки есть с мозгами, и пацаны балбесы, и наоборот. Остальное — личные стереотипы.

Ответить
–4

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

Любой человек работающий в IT может своими глазами увидеть что это неправда. Например, среди женщин разработчиков высокой квалификации нет вообще, средних - крохотное количество, а все зумерши и вайтишницы занимаюстя вообще типовой работой (фронетнд и джосоны в базу). А вот например среди тестировщиков где девушек овер 90% -  бестолковые почти все. Т.е. почти любой парень-тестировщик будет работать сильно лучше девушки.

Т.е. в технических областях квалификация очевидно напрямую зависит от пола, говоря обратное вы просто реальность отрицаете. Конечно есть исключения, но на то и исключения.

То что дебилов любогоо пола хватает - согласен

Чтобы не было споров о шкале квалификации - разработчики крупного бека\хайлоад проектов, крупных систем, фрейворков, движков(рендеринга графики, игор, выполения скриптовой хуйни типа js и т.п.), синьеры с++\раст (если канеш не прикладное говно типа окошек на qt) - высокий уровень, типикал носитель сеньерской лычки одной прикладной технологии, например ведра\иоса\шарпа\джавы и т.п. - средняя квалификация, мидлы, джуны любой хуйни - низкая, фронтенд (за редкими исключениями) - очень низкая. Если кого забыл - сорян

Ответить

Слепой Даниль

Илитный
0

 среди женщин разработчиков высокой квалификации нет вообще

Это вы бы рассказали, например, одной моей старой знакомой с красным дипломом матфака, разрабатывающую базы данных в центральном офисе одного из крупнейших ритейлеров российских)

Ответить
4

Ключевое слово "одной"

Ответить

Слепой Даниль

Oleg
0

Конечно одной, ведь больше точно не существует талантливых программистов женщин. А ещё бабы водят херово и вообще их место на кухне!*

*ирония, если чьо

Ответить
–1

Вы бы лучше на вопросы отвечали, вместо "иронии"

Ответить
0

А вы бы форточку открыли, душно от вас шо пестец!

Ответить
0

Заметил что девочки предпочитают тупо минусить все мои комменты когда им мое мнение не нравится, вместо дискуссии

Ответить
1

Я вот прям улыбнулся когда представил как обиженный на весь мир чел улыбается, придумав «гениальный подкол». Только разочарую вас. На «девочку» обижаются только забитые дурным воспитанием, закомплексованные мальчики и они же потом этим приёмом пользуются.

Ответить
0

В тонкостях поведения закомплексованных мальчиков вы явно лучше меня шарите. 

А переходить на личности и сливаиться с темы, это конечно поведение уважающего себя человека

Ответить
–2

Конечно есть исключения, но на то и исключения.

разрабатывающую базы данных

Так она саму БД пишет или sql дрочит? 

Ответить

Слепой Даниль

Илитный
0

Зачем вам рассказывать чем занимается человек если ваше стереотипное отношение очевидно не подлежит корректировке и это срач ради срача)

Ответить
–2

Ну вы либо рассказывайте, либо будем считать что вы просто не особо понимаете что именно она делает

А ваш пассаж про стереотипы выглядит как
Снег теплый, а если вам кажается что холодный - это ваши личные стереотипы, не поддающиеся корректировке

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

6

Если вы не заметили, это раздел не IT, а маркетинг)

Ответить
2

Какое отношение ваша инструкция имеет к маркетингу?  Маркетинг это "как сделать скриншот, который повысит продажи", а не "как сделать скриншот".

Хотя может вы так свой личный бренд продвигаете. Ну чтож, черный пиар - тоже пиар.

Ответить
1

да, мне перенесли уже в «сервисы», я заметила. Но у меня была другая логика — конкретно это может помочь копирайтерам, маркетологам и прочим, кто готовит контент, готовить его чуть быстрее и удобнее.

Ответить
–2

Не надо оскорблять этих людей, они всетаки гуглить умеют и такую притивную информацию либо знают, либо найдут за 2 секунды

Ответить
0

И никакого сексизма. Когда попадаю на ваши комментарии, сразу понимаю, как давно вам не попадались хорошие женщины.

Ответить
–2

Ну так не разводите сексизм, и вам не будут им отвечать.

Тут в "карьере" каждая вторая статья - сексисткий бред на тему женщин в ойти. Каждая вторая ойтишница с уровнем скиллов таким, с которым пацанов за человека не считают, орет тут в коментах как она стереотипы переворачивает. К сожалению женщины - главный источник оголтелого сексизма сейчас.

Думаете пацаны в ойти так не любят женщин? Да они и рады бы чтобы их больше было, но вместо женщин сюда лезут обиженные сексистки, которые на словах ады лайвлес, а не деле дочки от гомобрака сири и алисы.

давно вам не попадались хорошие женщины

Ну так я же в ойти работаю, откуда они там? ;)

Ответить
–1

Ну я же здесь! Ваша первая хорошая женщина. Развожу сексизм и вас.

Ответить
0

Хорошие женщины не используют таких слов, так что мимо

Ответить
3

Лена, спасибо. Про рамку и скриншот не знал. Может у вас есть Инстаграм с вашими фото ещё?

Ответить

Слепой Даниль

Leha
9

Многоходовочка? )

Ответить
1

Одноходовочка

Ответить

Комментарий удален

6

Это очень мощная статья для vc.ru сразу в New York Times нужно было:)

Ответить
1

Как вы догадались, как раз готовлю перевод для New York Times

Ответить
2

Очень полезно, спасибо.

Ответить
2

😂😂😂 что дальше? туториал по мониторингу сетевой активности во вкладке network? как увидеть скрытые поля формы? где искать куки и что с ними делать? добро пожаловать в нарнию?

Ответить
0

Открыли, блин, Америку. Это уже хрен знает сколько лет известно. Я лично использую эмулятор iPhone для XCode в таких случаях (ибо так и не смог полюбить яблокофоны с самого начала).

Ответить
3

Рекомендуете Xcode для этого поставить?

Ответить
1

В принципе, можно прямо в Safari. Только без красивой рамочки.

Ответить
0

Смысл 
Был
В 
Рамочке
же 
ну
....

Ответить
0

Уговорили. Вот с рамочкой.

Ответить
0

да, рамочка одна из важных составляющих)

Ответить
0

Вот с рамочкой )

Ответить
0

Да, удобно. Не знала, что в Сафари так можно

Ответить
0

Это не Сафари, это XCode. На один раз поставил. Место, правда, много занимает и только под Mac OS.

Ответить

Слепой Даниль

1

Офигеть новость! Х))) Но ладно, не буду умничать, для кого-то это правда может стать открытием)

Ответить
1

Я тот самый динозавр, который ничего этого не знал 😁 спасибо большое! 

Ответить
0

в голос

Ответить
–1

Проще открыть на смартфоне мобильную версию, сделать скриншот и в специальном приложении получить желаемую картинку "как на смартфоне"

Ответить
1

Потом ее нужно пересылать на компьютер, если работаешь (например статью пишешь) именно на компе. Если сайт у тебя уже открыт с компа, сделать такой скриншот гораздо быстрее и проще

Ответить
0

А по Bluetooth? Или у вас iPhone? ;)

Ответить
0

Нет, но зачем что-то передавать по блютуз, если можно все сделать сразу на компе?

Ответить
0

Иногда нужно бывает что-то протестить в конкретном браузере. Например, показать заказчику, что сайт отображается прекрасно и в Firefox Mobile, и Google Chrome, и штатном браузере Android, и, допустим, Samsung Internet.

Ответить
0

Да, бывает. Но это другая задача.

Ответить
0

Годно!

Ответить
0

Неплохо, но лучше не текстом а скриншоты ))

Ответить
0

В чем проблема,  в мобильном браузере выбрать раздел "Версия для ПК", а после комбинацией нескольких клавиш( или свайпом ладони вдоль/поперек датчиков приближения) сделать скрин???

Ответить
0

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

Ответить
0

Блин, а в универе я удивлялся почему мои одногруппники не знают про то что можно открыть исходный код элемента и визуально поменять результаты теста на нужные. Видимо таких много

Ответить
0

Инструкция не про то, как открыть исходный код. Инструкция в первую очередь именно про скриншоты в мокапе, а это чуть менее очевидно, чем просто исходный код

Ответить
0

Открытие исходного кода примерно то же самое, что и создание скриншота - по шкале очевидности

Ответить
0

здорово, что для вас это так)

Ответить
0

F12 и потом Ctrl+Shift +M - давно известная тема )))

Ответить
0

Спасибо от динозавра:) 

Ответить
Читать все 72 комментария
На конференции «B Word» Илон Маск в очередной раз поменял свою позицию по биткоину

В ходе конференции где также присутствовали Джек Дорси и Кэти Вуд, Маск отметил, что он является владельцем биткойнов не только через баланс Tesla и SpaceX, но и лично владеет биткойнами, эфиром и Dogecoin.

Банкомат «Тинькофф» выдал ошибку во время пересчета и перезагрузился, не зачислив деньги

20/07/21 положил в банкомат 100 купюр по 5000 р. (500 т.р.). Во время пересчета написал неисправность и перезагрузился. Деньги не зачислены.

ЦБ повысил ключевую ставку с 5,5% до 6,5% — это самое резкое повышение с 2014 года Статьи редакции

И четвёртое повышение с начала 2021 года.

«Стартап-полка»: Самокат набирает производителей альтернативных продуктов

Онлайн-ритейлер Самокат совместно с Ассоциацией Производителей Альтернативных Пищевых Продуктов объявляют сбор заявок от инновационных производителей продуктов для участия в «стартап-полке» Самоката. Лучшие продукты попадут в постоянный ассортимент Самоката в раздел «Супермаркет» уже этой осенью.

The Insider и пятерых журналистов включили в список СМИ-иноагентов Статьи редакции

Информация об этом появилась на сайте Минюста.

Восточная Техника успешно автоматизирует процессы управления складами на базе решения Columbus-WMS
Украина ввела санкции против российского интернет-магазина Wildberries Статьи редакции

Под санкции попала и основательница компании Татьяна Бакальчук.

Можно ли продолжать работать в той же компании после выгорания: история продакт-менеджера Тинькофф

В Тинькофф — 28 000 сотрудников, и у каждого своя история. Кто-то легко справляется с работой, и после всех задач спокойно отключается и идет отдыхать. Другим все может даваться труднее, даже сложно в уйти в отпуск — думает, «как я всё здесь брошу». Мы начинаем серию статей от лица наших сотрудников, которые делятся своим опытом: какие появлялись…

Как кидают на авито… Половина машины
«Тинькофф» открыл центр разработки в Минске Статьи редакции

В команду ищут как студентов техвузов, так и продвинутых разработчиков — но предпочтение будут отдавать кандидатам со знанием английского языка.

Сбежал с $80 млн, пообещав построить фермы: история основателя игры Farm Bank, который обманул 130 тысяч человек Статьи редакции

Как Мехмет Айдын, создатель виртуальной фермы, создал схему Понци и обманул тысячи пользователей, вложивших реальные деньги в приложение — в пересказе Rest of World.

Айдын на основанной им ферме Daily Sabah
null