agwebrunner.com

As páginas da web são apenas documentos que o navegador da web exibe. Mas e se você pudesse digitar diretamente em qualquer página da web para modificá-la? Você pode e não precisa de uma extensão do navegador - é um recurso integrado a todos os navegadores modernos.

Este recurso aproveita o recurso “document.designMode”, que você pode habilitar por meio do console JavaScript do seu navegador da web. Recentemente, foi destacado por Tomek Sułkowski no Twitter, mas é tão legal que temos que compartilhá-lo com nossos leitores.

Você pode usar este recurso para limpar uma página da web antes de imprimi-la, testar a aparência das alterações em uma página da web ou mesmo apenas fazer pegadinhas. Será como editar um documento do Word - sem a necessidade de mexer com HTML.

Para ativar esse recurso, visite uma página da web e abra o console do desenvolvedor. Para abrir o console no Google Chrome, clique no menu> Mais ferramentas> Ferramentas do desenvolvedor ou pressione Ctrl + Shift + i.

Embora estejamos usando o Chrome como exemplo aqui, esse recurso também funciona em outros navegadores modernos. Veja como abrir o console em outros navegadores:

• No Mozilla Firefox, clique no menu> Desenvolvedor da Web> Console da Web ou pressione Ctrl + Shift + K.
• No Apple Safari, clique em Safari> Preferências> Avançado e ative “Mostrar menu Desenvolver na barra de menu”. Em seguida, clique em Desenvolver> Mostrar Console JavaScript.
• No Microsoft Edge, clique no menu> Mais ferramentas> Ferramentas do desenvolvedor ou pressione F12 e clique na guia “Console”.

Clique na guia “Console” na parte superior do painel Ferramentas do desenvolvedor. Digite o seguinte no console e pressione Enter:

document.designMode = 'on'

Agora você pode fechar o console, se desejar, e editar a página da web atual como se fosse um documento editável. Clique em algum lugar para inserir o cursor e digite o texto. Use as teclas Backspace ou Delete para remover texto, imagens e outros elementos.

Isso apenas muda a forma como a página da web aparece no seu navegador. Assim que você atualizar a página, verá o original novamente. Se você for para outra página da web ou guia, ela não estará no modo de design até que você abra o console e digite esta linha novamente.

Você pode até voltar ao console e executar o seguinte comando para desligar o modo de design:

document.designMode = 'off'

A página da web não será mais editável, mas suas alterações serão preservadas até a próxima atualização da página.