#55 – Como tornar qualquer site "editável" no seu navegador

Este truque simples funciona com qualquer navegador é super útil para testar conteúdo.

Quarta-feira, 07 de outubro de 2020

🕑 Tempo de leitura: 2 min

Compartilhar atalho.xyz


A função Inspecionar (Inspect) de todo navegador permite acessar as entranhas do que está sendo mostrado em um site.

Independente se você manja ou não de programação, existe uma função bastante simples no Inspetor que pode ser útil: chama-se Design Mode.

Como ativar o Design Mode em seu navegador

  1. No navegador, clique com o botão direito no site que você deseja editar e selecione a opção Inspecionar ou Inspect.

  2. Uma janela será aberta dentro do navegador. Nas abas do topo, clique na opção Console.

  3. Na área em branco, logo após a setinha “>” digite o código abaixo:

    document.designMode = "on"
  4. Pressione enter

TADAAAA! ✨ O conteúdo do site automaticamente ficará editável, como se fosse um documento do Word. Com isso, você pode deletar ou substituir textos e ainda reposicionar imagens.

Importante deixar claro: as alterações têm efeito somente no seu navegador. Esta funcionalidade é especialmente útil para testar diferentes textos no seu site sem precisar mexer no código.

⚠️ Como já diria o filósofo contemporâneo Homem Aranha, com grandes poderes vêm grandes responsabilidades. Use a funcionalidade com consciência, beleza?

Amanhã tem mais ✌️