Como fazer uma captura de tela do site com dimensões específicas usando o Google Chrome

Como fazer uma captura de tela com o Google Chrome

Se você é uma agência ou empresa que tem um portfólio de sites ou páginas que deseja compartilhar on-line, provavelmente já passou pela dor de tentar capturar uniformes screenshots de cada um dos sites.

Um dos clientes com quem estamos trabalhando, cria um host hospedado Soluções de intranet que podem ser hospedados internamente dentro dos limites de uma empresa. As intranets são incrivelmente úteis para as empresas comunicarem notícias da empresa, distribuir informações de marketing, fornecer informações sobre benefícios, etc.

Ajudamos a OnSemble a migrar sua solução de intranet do site de sua empresa controladora. Foi um projeto extenso que incorporou tudo, desde a construção de novos perfis sociais, atualização do Marketo e, em seguida, desmontagem de alguns dos desenvolvimentos personalizados que eles fizeram no passado para combinar seus sites.

Capturas de tela do cliente com o Google Chrome

Você pode não perceber isso, mas pode fazer capturas de tela perfeitas com o conjunto integrado de ferramentas de desenvolvedor robustas do Google Chrome. Curiosamente, não é um recurso muito conhecido, apesar de ter uma flexibilidade incrível.

Aqui está um rápido tutorial em vídeo sobre como fazer uma captura de tela perfeita e de tamanho específico de uma página da web usando o Google Chrome:

Etapas para obter uma captura de tela com o Google Chrome

As Ferramentas do desenvolvedor do Google Chrome têm a opção de visualizar um site usando a barra de ferramentas do dispositivo. A ferramenta foi construída para que os desenvolvedores pudessem ver como o site parecia em diferentes tamanhos de visor em diferentes dispositivos ... mas também é uma maneira perfeita de obter uma captura de tela de tamanho perfeito de uma página da web.

Nesse caso, queremos que cada um dos principais clientes da OnSemble em todos os setores que construíram belos sites de intranet façam uma captura de tela para que possamos exibi-los todos em um portfólio em seus sites. Queremos que as páginas tenham 1200 px de largura por 800 px de altura. Para fazer isso:

  1. No botão de navegação mais à direita (3 pontos verticais), selecione o Menu Personalizar e Controlar.

Menu de ferramentas do desenvolvedor com Google Chrome

  1. Selecionar Mais ferramentas> Ferramentas do desenvolvedor

Ferramentas do desenvolvedor com Google Chrome

  1. Alternar o Barra de Ferramentas do Dispositivo para exibir as opções e dimensões do dispositivo.

Alternar barra de ferramentas do dispositivo com Google Chrome

  1. Defina a primeira opção para responsivoe, em seguida, defina as dimensões como 1200 x 800 e pressione Enter. A página agora será exibida com essas dimensões.

Barra de ferramentas do dispositivo responsivo Google Chrome

  1. No lado direito da barra de ferramentas do dispositivo, clique no botão de navegação (3 pontos verticais) e selecione Captura de tela.

Captura de tela com o Google Chrome

  1. O Google Chrome fará uma captura de tela perfeita e a colocará em seu Downloads pasta onde você pode anexar e enviar por e-mail. Certifique-se de não selecionar a captura de tela em tamanho real, pois isso ocupará todo o comprimento da página e ignorará seu limite de altura.

Atalhos de teclado do Google Chrome para capturas de tela

Se você é um mestre de atalhos de teclado, também pode tirar uma captura de tela de página inteira com esses atalhos. Não gosto dessa abordagem, pois não consigo definir a altura máxima da janela de visualização ... mas é útil se você precisar de uma captura de tela de uma página inteira.

Atalhos de teclado em um Mac:

1. Alt + Command + I 
2. Command + Shift + P

Atalhos de teclado no Windows ou Linux:

1. Ctrl + Shift + I 
2. Ctrl + Shift + P

O que você acha?

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.