Tornar página editável no navegador

Existe um modo especial e bastante secreto nos navegadores, chamado design mode.

Ao definir uma página no design mode, você pode editar seu conteúdo diretamente no navegador. Isso é muito útil para testar algum protótipo ou verificar como seria um novo título, por exemplo.

Para habilitar esta opção, abra o navegador e aperte a tecla f12 para abrir o DevTools Console (Ferramenta do Desenvolvedor). Em seguida vá para a aba 'Console' e digite o comando abaixo:


document.designMode = 'on'

// ou

document.body.contentEditable = true

Para desabilitar o modo de edição digite o comando abaixo:


document.designMode = 'off'

// ou

document.body.contentEditable = false