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 de navegador – é um recurso integrado em 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 compartilhar com nossos leitores.
Essa sensação quando você descobriu o `document.designMode` pic.twitter.com/bxA1otzCjN
– Tomek Sułkowski (@sulco) 27 de setembro de 2019
Você pode usar esse 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, este recurso funciona em outros navegadores modernos, também. 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 mais uma vez. 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.
