[DICA] Capturando telas no navegador usando o DevTools

Às vezes, é necessário capturar a tela do navegador, e para isso, muitas pessoas recorrem a extensões ou à própria ferramenta de captura do sistema operacional. No entanto, você sabia que é possível realizar a captura utilizando apenas as ferramentas do desenvolvedor do navegador?

Para fazer isso, basta abrir as ferramentas do desenvolvedor utilizando a tecla de atalho F12. Com as ferramentas do desenvolvedor abertas e em foco, pressione as teclas CTRL + SHIFT + P. Isso abrirá um menu de pesquisa semelhante ao do VSCode.

Então, basta procurar por "screenshot" (ou "captura de tela", se o seu devtools estiver em português), e você verá quatro opções de captura disponíveis.

As funcionalidades são essencialmente as seguintes:

- Capture area screenshot / Fazer captura de tela da área: permite que você selecione uma parte específica da tela para capturar a imagem.

- Capture full size screenshot / Fazer uma captura da tela de página inteira: esta é, para mim, a mais interessante, pois permite capturar toda a página, independentemente de estar visível na janela de visualização do navegador e a qualidade da imagem também fica excelente!

- Capture screenshot / Fazer captura de tela: realiza o download de uma imagem contendo apenas o conteúdo visível no navegador no momento.

- Capture node screenshot / Fazer captura de tela do nó: esta opção deve ser usada em conjunto com a aba de elementos. Você seleciona o elemento que deseja capturar, e a captura é feita somente desse elemento. Pode ser qualquer tipo de elemento, como um botão, uma div, uma seção; depende da sua necessidade.

Obs.: Após selecionar a opção desejada, a imagem será baixada na pasta padrão de downloads e também poderá ser encontrada na aba de downloads do navegador.