Cómo editar cualquier página web en Chrome (o cualquier navegador)

Una página web es simplemente un documento que muestra su navegador web. Pero, ¿y si pudieras escribir directamente en cualquier página web para modificarla?Puede, y no necesita una extensión de navegador: es una función integrada en todos los navegadores modernos.

Esta función utiliza la función «document.designMode», que puede habilitar a través de la consola de JavaScript de su navegador web. Tomek Sułkowski lo destacó recientemente en Twitter, pero fue tan genial que tuvimos que compartirlo con nuestros lectores.

Esa sensación cuando descubriste `document.designMode` por primera vez pic.twitter.com/bxA1otzCjN

—Tomek Sukowski (@sulco) 27 de septiembre de 2019

Puede usar esta función para limpiar una página web antes de imprimirla, para probar cómo se verá una página web después de los cambios, o incluso para jugar una broma. Al igual que editar un documento de Word, no es necesario meterse con HTML.

Para activar esta función, visite la página web y abra la consola del desarrollador. Para abrir la consola en Google Chrome, haga clic en el menú Más herramientas Herramientas para desarrolladores o presione Ctrl+Shift+i.

Aunque estamos usando Chrome como ejemplo aquí, esta característica Funciona en otros navegadores modernos, además. Aquí se explica cómo abrir la consola en otros navegadores:

• En Mozilla Firefox, haga clic en el menú Web Developer Web Console o presione Ctrl+Shift+K.
• En Apple Safari, haga clic en Preferencias Avanzadas de Safari y habilite «Mostrar menú Desarrollar en la barra de menú». Luego, haga clic en Desarrollar para mostrar la consola de JavaScript.
• En Microsoft Edge, haga clic en el menú Más herramientas Herramientas para desarrolladores o presione F12 y haga clic en la pestaña Consola.

Haga clic en la pestaña Consola en la parte superior del panel Herramientas para desarrolladores. Escribe lo siguiente en la consola y presiona Enter:

documento.designMode = 'activado'

Si lo deseas, ahora puedes cerrar la consola y editar la página web actual como si fuera un documento editable. Haga clic en algún lugar para insertar el cursor y escribir texto. Utilice las teclas Retroceso o Supr para eliminar texto, imágenes y otros elementos.

Esto solo cambia la forma en que se muestra la página web en el navegador. Después de actualizar la página, volverá a ver la página original. Si va a otra página web o pestaña, no estará en modo de diseño hasta que abra la consola y escriba esta línea nuevamente.

Incluso puede desactivar el modo de diseño volviendo a la consola y ejecutando:

document.designMode = 'Desactivado'

La página ya no podrá editarse, pero sus cambios se conservarán hasta la próxima vez que actualice la página.