Gustavo Flores
Gustavo Flores08/08/2023 11:37
Compartilhe

[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.

    image

    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.

    image

    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.

    Compartilhe
    Comentários (0)