Como tirar capturas de tela no Google Chrome
Neste artigo, mostraremos como tirar capturas de tela de elementos específicos da página da web ou de toda a página da web usando ferramentas de desenvolvedor do Google Chrome.
Tópico de conteúdo:
- Abrindo as ferramentas do Google Chrome Developer
- Selecionando um elemento específico na página da web usando ferramentas de desenvolvedor do Google Chrome
- Tomando capturas de tela dos elementos da página da web usando ferramentas de desenvolvedor do Google Chrome
- Tomando capturas de tela da página completa usando o Google Chrome Developer Tools
- Conclusão
- Referências
Abrindo as ferramentas do Google Chrome Developer
Para abrir as ferramentas do Google Chrome Developer, execute o Google Chrome, visite a página da web que deseja tirar capturas de tela e pressione + + EU.
Se você precisar de ajuda para abrir as ferramentas do Google Chrome Developer, leia o artigo sobre como abrir as ferramentas do Google Chrome Developer.
Selecionando um elemento específico na página da web usando ferramentas de desenvolvedor do Google Chrome
Se você deseja tirar capturas de tela de um elemento específico da página da web usando as ferramentas do Google Chrome Developer, você precisa selecionar o elemento que deseja tirar capturas de tela da página da web da web.
Você pode selecionar um elemento na página da web na guia "Elementos" das ferramentas do Google Chrome Developer.
Você também pode usar a ferramenta "Inspecionar" das ferramentas de desenvolvedor do Google Chrome para selecionar um elemento na página da web.
Para usar a ferramenta de inspeção, clique em
No canto superior esquerdo das ferramentas de desenvolvedor do Google Chrome.
Selecione o elemento que deseja tirar uma captura de tela da página da web. Depois que o elemento é selecionado, a seção de código HTML também deve ser selecionada automaticamente na guia "Elementos".
Tomando capturas de tela dos elementos da página da web usando ferramentas de desenvolvedor do Google Chrome
Para tirar uma captura de tela do elemento da página da web selecionado, clique com o botão direito do mouse (RMB) no elemento pai HTML selecionado na guia "Elementos" e clique em "Capture Node Screenshot".
Uma captura de tela do elemento da página da web selecionada deve ser tomada e salva no seu computador.
Como você pode ver, uma captura de tela do elemento de página da web selecionada é tomada com sucesso.
Vamos tentar tirar uma captura de tela de outro elemento da página da web usando as ferramentas do Google Chrome Developer.
Selecione o índice em um dos artigos do Linuxhint, clique com o botão direito do mouse (RMB) e clique na "captura de captura de captura de tela" para fazer uma captura de tela exatamente como fizemos recentemente.
Uma captura de tela é agora tirada e salva.
Como você pode ver, uma captura de tela apenas do índice é tomada.
Tomando capturas de tela da página completa usando o Google Chrome Developer Tools
Para tirar uma captura de tela da página completa, navegue até a guia "Elementos" das ferramentas do Google Chrome Developer. Role todo o caminho para cima e selecione a tag html. Isso seleciona toda a página da web.
Agora, clique com o botão direito do mouse (RMB) na tag html e clique em “Captura de captura de tela do nó”.
Uma captura de tela de toda a página da web deve ser tomada e salva no seu computador.
Como você pode ver, a captura de tela da página completa da web é tomada com sucesso.
Conclusão
Mostramos como abrir as ferramentas de desenvolvedor do Google Chrome. Também mostramos como selecionar elementos específicos da página da web usando a ferramenta Inspecionar as ferramentas do Google Chrome Developer e como tirar capturas de tela de elementos específicos da página da web e a página completa da web usando o Google Chrome Developer Tools.
Referências:
- https: // desenvolvedor.cromada.com/blog/new-in-devtools-62/#node-screenshots