Como Fazer Scrolling Screenshot de um Site Sem Extensão‼ (test article)

Este é um artigo para testar a ferramenta(tabnews). Mas como o foco da tabnews é agregar valores reais para o pessoal, então aqui vai um pequeno tutorial que acredito que pouca gente saiba.

Scrolling Screenshot

Vamos aprender a fazer captura completa de um site sem o uso de uma extensão.

um pequeno tutorial de como fazer scrolling screenshot de um site

  1. Com o site aberto, abra o devtool do navegador(F12 no Chrome);
  2. Com o devtool aberto em Customiza(...) selecione a opção Run Command ou Ctrl+Shift+P;
  3. Escreva pelo comando screenshot, aparecerão comandos acessíveis e seleciona "Capture full size screenshot"

Será gerado um png para o download. Está tudo prontinho.

Tenho mais uma dica MANEIRA para lhe dar, me segue lá no twitter @nelsonmatenda e vamos compartilhar mais ideias e evoluir juntos.

⚠ Dependendo do tamanho do site ele pode não entregar o site por completo, mas na maior parte dos casos ele não deixa a desejar.

Exemplo: scrolling screenshot de um artigo do site sumo.com

Sensacional essas informações! obrigado por compartilhar. E parabéns pela qualidade de escrita e do post, achei incrivel

É uma ótima opção mesmo, mas tem um problema: a depender do tamanho da página ela não dá screenshot por inteiro até o fim.

Venho recomendar o plugin para GoogLe Crome chamado GoFullPage que faz o scrool de cada sessão e tira print, dando o resultado para você baixar em .PNG ou .PDF.

E para utilizar em bem fácil:

1 - Depois de instalado clicka no icon de câmera e ele já vai começar a fazer os prints

2 - Assim que finalizar ele vai dar o resultado e várias opções para download.

Espero que ajude a galera que está tentando tirar prints de páginas gigantescas!

infelizmente tem essa limitação sim, mas em maior parte dos caso ela consegue entregar tudinho e realmente para mais eficiência um extension ajudaria muito.

pra quem usa android 11+ tem essa funcionalidade de tirar uma screenshot e depois expandir pra baixo ou pra cima do scroll

Que dica show! Uso uma extensão para isso, acaba que fica com um click. Mas pode acontecer de usar o PC de outra pessoa e esse comando vir a calhar! Parabéns!

nelsonmatenda sensacional meu caro! Vou começar a usar mais essa técnica para mostrar prints nos meus vídeos 🤝

Em paralelo, você conhece alguma forma de fazer a página navegar para baixo de forma natural? Muitas vezes eu filmo a tela comigo navegando para baixo de forma bem devagar (manualmente), e seria show encontrar uma forma fácil de fazer esse scroll automatizado.

Quando eu quero descer a página assim, eu aperto a roda do mouse e movo o mouse pra baixo na velocidade que quero que a página role e ai ele move a página automaticamente. ![texto](https://i.ibb.co/3dJ00gX/ezgif-com-gif-maker.gif "título")
[@filipedeschamps](https://www.tabnews.com.br/filipedeschamps) Eu utilizo a extensão [Simples Autoscroll](https://chrome.google.com/webstore/detail/simple-autoscroll/fgecljolecpahpphjjhfhgiimljpkodo/related), talvez te ajude.
`filipedeschamps` para automatizar o scroll acredito que precisaria rodar alguns codigos, não conheço nenhuma opção do chrome que permina fazer isso. Mas existe no chrome://flag a opção 'smooth scrolling' que deixa o scroll mais fluído. Aproveitando a sua atenção: Por que tabnews ainda não tem sua presença nas redes sociais? eu ficaria feliz em ajudar com isso, seria muito massa rodar um robô no twitter que auxiliaria muito no crescimento da comunidade.
Não temos presença ainda, pois não tivemos tempo, mas queremos sim. Por enquanto estou parcialmente trazendo essa presença pelas minhas redes mesmo e muito obrigado por oferecer ajuda 🤝

Mano parabéns me resolveu um problemão aqui :)

Eu escrevo documento auxiliar de teste e documentação sobre o sistemas que dou manutenção é horrível ter que ficar emendando print.

Você conhece alguma maneira de fazer um macro para tirar o print de uma vez só ou com um atalho ?

Agora não sei não, acredito que o mais prático seria baixar ou criar uma extensão que faça isso com um click.

Rapaz... Tava rodando a internet esses dias procurando uma solução pra isso sem precisar instalar nenhuma extensão, muito obrigado!

Valeu mesmo @nelsonmatenda. Chega de ficar tirando prints e mais prints para montar em ordem depois kkkk. O bom disso que você ensinou é que fica fácil de pegar até partes que estão separadas na página e juntá-las na edição.

Valeu mesmo!

Caraca, que achado. Excelente! Tem vários outros comandos que vão ajudar muito aos desenvolvedores.