Как сделать снимок экрана в Google Chrome с помощью Dev Tools

Оглавление:

Как сделать снимок экрана в Google Chrome с помощью Dev Tools
Как сделать снимок экрана в Google Chrome с помощью Dev Tools
Anonim

Что нужно знать

  • На ПК: нажмите Ctrl + Shift + I, затем Ctrl + Shift P.
  • Mac: нажмите Command + Option + I, затем Command + Shift P.
  • Затем введите «скриншот», чтобы увидеть четыре варианта снимков экрана.

В этой статье объясняется, как делать скриншоты в Chrome с помощью инструментов разработчика.

Как использовать инструменты разработчика Chrome для создания снимков экрана

Разница между использованием клавиши Print Screen и инструмента Chrome заключается в том, что инструмент создания скриншотов Chrome не включает границы окна браузера Chrome - только содержимое веб-страницы. Если вы хотите захватить только содержимое страницы без редактирования скриншотов, инструменты разработчика могут сэкономить вам время.

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

  1. Нажмите Ctrl + Shift + I на ПК или Command + Option + I на Mac. Либо щелкните значок меню из трех точек и выберите Дополнительные инструменты > Инструменты разработчика Откроется меню разработчика Element Inspector, в котором отображаются элементы веб-страницы. Кодирование HTML.

    Image
    Image
  2. Затем нажмите Ctrl + Shift P (ПК) или Command + Shift P (Mac) или щелкните меню из трех точек для Customize And Control DevTools и выберите Run Command.

    Image
    Image

    Чтобы сделать обычный или полноразмерный снимок экрана, щелкните значок меню из трех точек в верхней части страницы, которую вы хотите сделать, и выберите Сделать снимок экрана или Сделать полноразмерный снимок экрана.

  3. Введите «скриншот», чтобы увидеть варианты снимков экрана, а именно:

    • Снимок экрана области
    • Сделать снимок экрана в полном размере
    • Снимок экрана узла
    • Сделать скриншот
    Image
    Image
  4. Прокрутите вниз, чтобы выбрать тип снимка экрана, который вы хотите сделать, с помощью мыши или клавиш со стрелками на клавиатуре.

Параметры скриншота для разработчиков Chrome

Выберите Снимок экрана области, чтобы захватить часть экрана. С помощью мыши перетащите рамку вокруг области, которую хотите сделать скриншот.

Чтобы сделать снимок экрана всей веб-страницы, выберите Сделать снимок экрана в полном размере. Эта опция позволяет получить изображение веб-страницы, которое неудобно помещается на одном экране.

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

Если вы хотите сделать стандартный снимок экрана, выберите Сделать снимок экрана, который захватывает то, что видно на вашем экране.

Наконец, вы можете получить скриншот элемента HTML, выбрав Снимок экрана узла.

После того, как вы сделаете снимок экрана, появится диалоговое окно «Сохранить». Выберите папку и дайте скриншоту имя файла. Все скриншоты, сделанные с помощью инструментов разработчика, также доступны в диспетчере загрузок Chrome.

Рекомендуемые: