Como editar qualquer página da web no Chrome (ou qualquer navegador)

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 pode ser habilitado por meio do console JavaScript do navegador da web. Recentemente, foi destacado por Tomek Sułkowski no Twitter, mas é tão legal que temos que compartilhar com nossos leitores.

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 um exemplo aqui, esse 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 menus”. 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'

The web page won’t be editable anymore, but your changes will be preserved until you next refresh the page.