Вам, как фронтенд-инженеру, иногда нужно отправить наполовину готовые веб-страницы менеджерам по проектам и дизайнерам, чтобы получить их отзывы. Функция скриншота, которая поставляется с Mac, может захватывать только содержимое, отображаемое на экране, но длина веб-страницы часто превышает высоту экрана.Основываясь только на этом программном обеспечении для скриншотов, нельзя захватить всю веб-страницу за один раз.
Самый простой и грубый способ решить эту проблему — вручную сдвинуть страницу, чтобы сделать несколько изображений, и назвать файлы в соответствии с порядком изображений. Но для этого PM и Designer должны открываться один за другим, и то, что они видят, не является общим эффектом. Таким образом, это просто косвенно перекладывает проблему на кого-то другого и не решает ее фундаментально. Квалифицированный инженер должен искать лучшие решения.
Когда я сталкиваюсь с проблемой такого типа, я думаю, что следует исследовать по порядку: нативные решения > создание существующих инструментов > установка плагинов или приложений для браузера.
Поскольку родная функция скриншотов Mac не могла решить проблему, я попробовал комбинацию существующих инструментов: я использовал фотошоп, чтобы склеить несколько скриншотов и отправить их. Но минус в том, что это очень трудоемко, особенно когда страница еще полуфабрикат, ее часто нужно менять неоднократно.Например, следующая картинка - отзыв ПМ. После изменения нужно использовать фотошоп для прошивания заново, что не только неэффективно, но и повторяется. Инженеры-программисты не любят повторяющуюся работу:
Hackers (and creative people in general) should never be bored or have to drudge at stupid repetitive work -- From Как стать хакером
Так как второй вариант занимал слишком много времени, я начал рассматривать третий вариант, установку плагина или приложения для браузера. После несложного поиска я обнаружил, что таких товаров много, а стоимость подбора высока.
Итак, вернемся к идее продолжить изучение нативных решений. На этот раз было обнаружено, что браузер Chrome добавил функцию скриншотов в недавно вышедшей версии. Ниже приведен пример того, как получить всю домашнюю страницу LinkedIn:
Захват всей страницы с помощью инструментов разработчика Chrome
- Откройте браузер Chrome и перейдите на страницу веб-сайта, скриншот которого вы хотите сделать.
- После загрузки страницы откройте инструмент разработчика следующим образом: щелкните правой кнопкой мыши в любом месте, чтобы выбрать параметр «Проверить» во всплывающем меню. Или используйте комбинацию клавиш: `Alt` + `command` + `I` (mac) или `ctrl` + `shift` + `I` (Windows)
- Используйте комбинацию клавиш быстрого доступа, чтобы открыть командную строку (командную палитру): `Command` + `Shift` + `P` (Mac) или `Ctrl` + `Shift` + `P` (Windows)
- Введите «Экран» в командной строке, и автодополнение отобразит некоторые команды, содержащие ключевое слово «Экран». Переместите клавиши со стрелками на «Сделать снимок экрана в полном размере» и нажмите клавишу ввода (или просто щелкните эту опцию мышью)
В конце статьи есть анимация, демонстрирующая этапы работы.
После этого Chrome загрузит снимок экрана в область загрузки, установленную компьютером.
Первый сценарий расширенного применения
Из-за появления адаптивного веб-дизайна многие веб-сайты отличаются от эффекта отображения мобильного браузера и использования компьютера, используя инструмент разработчика Chrome, вы также можете сделать скриншот всей страницы разных моделей:
- Перейдите на страницу веб-сайта, скриншот которой необходимо сделать, и откройте инструменты разработчика (метод такой же, как и два предыдущих шага).
- Нажмите кнопку перехода к представлению в верхнем левом углу инструментов разработчика, и страница в браузере отобразит мобильное представление. В то же время вы также можете выбрать в браузере разные модели мобильных телефонов или планшетов, чтобы сравнить разные эффекты просмотра страниц на разном оборудовании.
- перезагрузить страницу
- Откройте командную строку и выполните команду создания скриншота (метод такой же, как в четвертом шаге выше)
Захватить мобильную страницу
Расширенный сценарий применения 2
Если вы хотите захватить не всю страницу, а некоторые ее элементы, вы также можете использовать для этого инструменты разработчика. Ниже приведен пример перехвата идентификационной информации пользователя с веб-сайта LinkedIn:
- Перейдите на страницу веб-сайта, скриншот которой необходимо сделать, и откройте инструменты разработчика (метод такой же, как и два предыдущих шага).
- Нажмите кнопку «Выбрать элемент» в верхнем левом углу инструментов разработчика и щелкните элемент, скриншот которого вы хотите сделать на веб-странице.
- Из-за вложения родительских и дочерних элементов HTML возможно, что будет выбран дочерний элемент элемента, которому требуется снимок экрана. В это время вам нужно настроить выбранный элемент в инструментах разработчика: поскольку выбранный элемент является дочерним элементом, вам нужно только найти соответствующий родитель на вкладке «Элементы» рядом с кнопкой «Выбрать элементы» в соответствии с отношение вложенности элемент в порядке. В этот момент щелкните, чтобы выбрать родительский элемент.
- Откройте командную строку и выполните команду скриншота (метод аналогичен четвертому шагу выше). Обратите внимание, однако, что в этом случае выберите «Снимок экрана узла» вместо «Снимок полноразмерного снимка экрана» в командах, содержащих ключевое слово «Экран».
постскриптум
Когда я начал писать эту статью, моей первоначальной идеей было написать пояснительную статью в форме опыта Baidu или вики, как это сделать. Однако обнаружено, что при представлении решения проблемы более ценно представить идею решения проблемы, чтобы читатели могли использовать аналогичные идеи для изучения ответа на проблему, когда они сталкиваются с похожими проблемами в тексте. будущее. Кроме того, я также хочу поделиться с вами тем, как думают и работают программисты. Оригинал «Как стать хакером», процитированный выше, очень достоин прочтения, китайская ссылка:как стать хакером.
Если вы нашли эту статью полезной для вас или ваших близких. Вы можете ставить лайки, комментировать, пересылать или подписываться на меня, все это отличная поддержка для меня, чтобы продолжать писать! Кроме того, если вы перешлете его, его будет легко найти в следующий раз, когда он вам понадобится!
Об авторе: LinkedIn Web Front-End Engineer, Нью-Йорк. Активисты на стыке технологий и человечества. Для получения дополнительной информации, пожалуйста, подпишитесь на Sina Weibo:@stray радо
Чтобы не мешать чтению, ставьте анимацию в конце текста:
Захватить мобильную страницу
элемент перехвата