Como fazer uma captura de tela no Google Chrome usando ferramentas de desenvolvimento

Índice:

Como fazer uma captura de tela no Google Chrome usando ferramentas de desenvolvimento
Como fazer uma captura de tela no Google Chrome usando ferramentas de desenvolvimento
Anonim

O que saber

  • No PC: Pressione Ctrl + Shift + I e depois Ctrl + Shift P.
  • Mac: Pressione Command + Option + I e depois Command + Shift P.
  • Então digite "captura de tela" para ver as quatro opções de captura de tela.

Este artigo explica como fazer capturas de tela no Chrome usando as ferramentas do desenvolvedor.

Como usar as ferramentas de desenvolvedor do Chrome para tirar screenshots

A diferença entre usar a tecla Print Screen e a ferramenta Chrome é que a ferramenta de captura de tela do Chrome não inclui as bordas da janela do navegador Chrome - apenas o conteúdo da página da web. Se você quiser capturar apenas o conteúdo da página sem editar suas capturas de tela, as ferramentas do desenvolvedor podem economizar uma etapa.

Você pode usar menus ou atalhos de teclado para acessar as ferramentas do desenvolvedor.

  1. Pressione Ctrl + Shift + I em um PC, ou Command + Option + I em um Mac. Como alternativa, clique no ícone do menu de três pontos e selecione Mais ferramentas > Ferramentas do desenvolvedor Isso abre o menu do desenvolvedor do Element Inspector, que mostra a página da web Codificação HTML.

    Image
    Image
  2. Em seguida, pressione Ctrl + Shift P (PC) ou Command + Shift P (Mac) ou clique no menu de três pontos para Customize And Control DevTools e selecione Run Command.

    Image
    Image

    Para uma captura de tela normal ou em tamanho real, clique no ícone do menu de três pontos na parte superior da página que deseja capturar e selecione Capturar captura de tela ou Captura de tela em tamanho real.

  3. Digite "screenshot" para ver as opções de captura de tela, que são:

    • Captura de tela da área
    • Captura de tela em tamanho real
    • Capturar captura de tela do nó
    • Captura de tela
    Image
    Image
  4. Role para baixo para selecionar o tipo de captura de tela que deseja capturar usando o mouse ou as setas do teclado.

Opções de captura de tela do desenvolvedor do Chrome

Selecione Capturar imagem da área para pegar parte da tela. Use o mouse para arrastar uma caixa ao redor da área que deseja capturar.

Para obter uma captura de tela de uma página inteira, selecione Capturar captura de tela em tamanho real. Esta opção permite obter uma imagem de uma página da web que não cabe confortavelmente em uma tela.

Esta opção teve resultados mistos em nossos testes, dependendo do site.

Se você quiser uma captura de tela padrão, escolha Capturar captura de tela, que captura o que está visível na tela.

Finalmente, você pode obter uma captura de tela de um elemento HTML escolhendo Capturar captura de tela do nó.

Depois de capturar uma captura de tela, você verá uma caixa de diálogo Salvar. Escolha uma pasta e dê um nome de arquivo à sua captura de tela. Todas as capturas de tela feitas com as ferramentas do desenvolvedor também estão disponíveis no gerenciador de downloads do Chrome.

Recomendado: