Las páginas web son solo documentos 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 del navegador, es una característica integrada en todos los navegadores modernos.
Esta función aprovecha la función “document.designMode”, que puede habilitar a través de la consola JavaScript de su navegador web. Recientemente fue destacado por Tomek Sułkowski en Twitter, pero es tan genial que tenemos que compartirlo con nuestros lectores.
Esa sensación cuando descubriste por primera vez ‘document.designMode’ pic.twitter.com/bxA1otzCjN
– Tomek Sułkowski (@sulco) septiembre 27, 2019
Puede usar esta función para limpiar una página web antes de imprimirla, probar cómo se verán los cambios en una página web o incluso simplemente bromear con las personas. Será como editar un documento de Word: no se requiere meterse con HTML.
Para activar esta función, visite una página web y, a continuación, abra la consola del desarrollador. Para abrir la consola en Google Chrome, haz clic en el menú > Más herramientas > Herramientas de desarrollo o presiona Ctrl+Mayús+i.
Mientras usamos Chrome como ejemplo aquí, esta función funciona en otros navegadores modernostambién. A continuación, le indicamos cómo abrir la consola en otros navegadores:
- En Mozilla Firefox, haga clic en el menú > Web Developer > Web Console o presione Ctrl+Mayús+K.
- En Apple Safari, haz clic en Safari > Preferencias > Avanzado y activa “Mostrar menú Desarrollar en la barra de menús”. A continuación, haga clic en Desarrollar > Mostrar consola de JavaScript.
- En Microsoft Edge, haga clic en el menú > Más herramientas > Herramientas de desarrollo o presione F12 y, a continuación, haga clic en la pestaña “Consola”.
Haga clic en la pestaña “Consola” en la parte superior del panel Herramientas de desarrollo. Escriba lo siguiente en la consola y presione Entrar:
document.designMode="on"
Ahora puede cerrar la consola, si lo desea, 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 Eliminar para eliminar texto, imágenes y otros elementos.
Esto solo cambia la forma en que aparece la página web en su navegador. Tan pronto como actualices la página, verás el original una vez más. 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 una vez más.
Incluso puede volver a la consola y ejecutar el siguiente comando para desactivar el modo de diseño:
document.designMode="off"
La página web ya no se podrá editar, pero los cambios se conservarán hasta la próxima actualización de la página.