Faça capturas de tela da página usando Devtools
Houve momentos em que precisei mostrar a um cliente ou colega de equipe uma captura de tela completa do estado atual do site ou até mesmo de parte dele, então tenho usado Captura de tela de página inteira e, para qualquer outro tipo de captura de tela, Ferramenta de snippet do Windows ou Snaggit. Se eu quiser hospedá-lo online como neste post Gyazo, que também tem um criador de GIF.
Recentemente descobri que Devtools tem uma ferramenta que faz uma captura de tela de página inteira, sem necessidade de extensão!
Este não é um pensamento novo, foi incluído na atualização do Devtools em abril de 2017, mas parece que moro debaixo de uma rocha e não descobri até agora…
Ferramentas de desenvolvimento
Conforme declarado na página oficial do Devtools:
Chrome DevTools é um conjunto de ferramentas para desenvolvedores web integradas diretamente no navegador Google Chrome. DevTools pode ajudá-lo a editar páginas dinamicamente e diagnosticar problemas rapidamente, o que, em última análise, ajuda a construir sites melhores e mais rápido.
Executando comandos no Devtools
Você já sabe como abrir o Devtools, mas caso tenha esquecido e por causa deste post, abra-o usando a tecla F12 ou o atalho Ctrl + Shift + I. Então você tem que abrir o Run command no menu dentro do Devtools ou usar Ctrl + Shift + P.
Ferramenta de captura de tela
Se você digitar screenshot irá filtrar os comandos, haverá 4 tipos de métodos de captura de tela que você pode usar:
- Captura de tela da área
- Captura de tela em tamanho real
- Captura de tela do nó
- Capturar captura de tela
Antes de verificar todos os métodos de captura de tela, após o devtools terminar de processar a imagem, ele irá baixá-la automaticamente com o nome da página.
Captura de tela da área
O area screenshot permitirá que você selecione uma parte do site e faça uma captura de tela.
Resultado:
Captura de tela em tamanho real
O full size screenshot fará uma captura de tela de toda a página da web, do início ao fim.
Resultado:
Captura de tela do nó
O node screenshot permitirá que você faça uma captura de tela de um nó selecionado no elemento inspecionar.
Resultado:
Capturar captura de tela
O capture screenshot fará uma captura de tela da página atual sem rolar e do tamanho do navegador.
Resultado:
