DevTools do navegador
O que são as DevTools do navegador, como usá-las para capturas de tela e testes responsivos e quais são os recursos mais comuns.
As DevTools do navegador são as ferramentas para desenvolvedores integradas aos navegadores da web: Chrome DevTools, Firefox Developer Tools e Safari Web Inspector. Elas mostram a estrutura e os estilos da página, registram a saída de JavaScript, gravam as requisições de rede e analisam o desempenho.
A maioria das DevTools inclui emulação de dispositivo. Ela define a largura e a altura da viewport, a proporção de pixels do dispositivo e a string de user agent, então um navegador de desktop renderiza a página como um celular faria. A emulação não reproduz o mecanismo de navegação, as fontes nem o comportamento de toque de um dispositivo real.
No Chrome em um Mac, Option+Command+I abre as DevTools. No Safari, o menu Develop precisa estar ativado em Settings antes de o Web Inspector ficar disponível.
O que as DevTools fazem para capturas de tela
- Capturam a viewport visível, a página rolável inteira, uma área selecionada ou um único elemento.
- Definem um tamanho exato de viewport e de proporção de pixels do dispositivo antes da captura.
- Ocultam ou editam elementos, como um banner de cookies ou um widget de chat, antes da captura.
- Limitam a velocidade da rede para verificar como a página aparece durante o carregamento.
Modo responsivo e emulação de dispositivo
O modo responsivo, chamado de barra de ferramentas de dispositivo no Chrome, redimensiona a área da página para a largura e a altura escolhidas. As predefinições cobrem celulares e tablets comuns, e tamanhos personalizados são permitidos. A configuração de proporção de pixels do dispositivo controla quantos pixels de imagem cada pixel CSS gera, então uma viewport de 390 pixels de largura com proporção 3 gera uma captura de 1170 pixels de largura.
Como capturar telas com as DevTools
- Abra as DevTools e ative a barra de ferramentas de dispositivo se precisar de um tamanho específico.
- Abra o Command Menu com Shift+Command+P.
- Digite "screenshot" e escolha o comando de viewport, tamanho completo, área ou nó.
- O navegador baixa um PNG.
Erros comuns
- Deixar as DevTools encaixadas dentro da janela, o que reduz a viewport em uma captura normal.
- Esquecer de desfazer a emulação, então as capturas seguintes usam tamanho de celular.
- Capturar antes de as imagens com carregamento lento aparecerem.
- Tratar a emulação como prova de que a página funciona em um dispositivo real.
Repetindo as mesmas capturas o tempo todo?
O Website Capture do Temposhot repete a mesma captura para uma lista de URLs em Desktop 1920×1080, Tablet 768×1024 ou Mobile 390×844. Veja automação de capturas de tela de sites.
Perguntas frequentes
As DevTools conseguem capturar uma página inteira em uma imagem?
O comando "Capture full size screenshot" do Chrome renderiza a altura total da página. Páginas muito longas ou com carregamento lento ainda podem sair incompletas.
Existe uma opção mais simples para uma página só?
A extensão Full Page Screenshot do Temposhot para Chrome 116+ rola a página ativa e baixa um PNG.
Fontes
Recursos relacionados
- Opções do Website Capture: configurações de dispositivo, área e espera.
- Automatize capturas de tela de sites sem código: um passo a passo.
- Screenshot Resolution Checker: confirma o tamanho em pixels de uma captura.
Você tira as mesmas capturas de tela várias vezes?
O Temposhot captura uma tela, janela ou área em intervalos programados e exporta o conjunto como PDF, imagens, ZIP ou MP4. As ferramentas gratuitas do navegador capturam apenas uma imagem por vez.
Recursos relacionados
Termos relacionados
- Navegador headlessO que é um navegador headless, como ele é usado em capturas de tela automatizadas e quais armadilhas comuns evitar.
- Captura de página inteiraO que é uma captura de página inteira, em que ela difere das capturas da viewport e de rolagem e quando usá-la.
- Captura de tela da viewportO que é uma captura de tela da viewport, em que ela difere da captura de página inteira e quando é a escolha certa.
- Captura de tela responsivaO que são capturas de tela responsivas, os tamanhos de viewport mais usados e erros a evitar ao capturar em vários dispositivos.