Faça uma captura de tela da página da web com o frame do dispositivo no Chrome

Um recurso menos conhecido do Google Chrome em sistemas operacionais de desktop é a capacidade de capturar uma captura de tela de uma página aberta como se a captura de tela fosse do navegador em execução em um dispositivo móvel. Ele pode até adicionar um quadro ao redor da captura de tela para que pareça uma foto realista de um smartphone. Veja como isso pode ser feito.

Existe uma ferramenta especial nas Ferramentas do desenvolvedor do Chrome que permite emular um dispositivo móvel. É muito útil para os desenvolvedores verificar a aparência de seus sites em smartphones e dispositivos de tela pequena. Ele permite especificar um tamanho de tela personalizado ou usar tamanhos de dispositivos predefinidos como iPhone, iPad, Nexus ou Galaxy da Samsung. Depois que a página aberta é exibida no emulador de dispositivo, o usuário pode capturar uma imagem da página. Também é possível habilitar um quadro de dispositivo ao redor da página para que pareça uma foto realista.

Você pode fazer isso da seguinte maneira.

1. Abra a página desejada no Chrome e pressione F12. Isso abrirá as Ferramentas do desenvolvedor:
2. Clique no botão do emulador de dispositivo móvel para alternar para o modo Ferramentas do desenvolvedor:
3. No seletor de dispositivo, selecione algum dispositivo. Por exemplo, selecionarei iPhone 6:
4. Agora, clique no menu de 3 pontos à direita do seletor do dispositivo e marque a opção "Mostrar quadro do dispositivo":
5. Voila, agora sua página da web é exibida dentro de um belo quadro de dispositivo:
   
   Agora, clique no menu de três pontos novamente e selecione "Capturar tela":

O resultado será o seguinte:

Você terminou.