Esta función me permite visualizar cambios en tiempo real sin necesidad de abrir mi editor de texto, creo que resulta en una herramienta extremadamente útil.
Es una excelente herramienta de aprendizaje. Al permitir la manipulación directa de una página web, los usuarios pueden experimentar y entender mejor cómo funcionan las diferentes partes de una página web.
Qué es document.designMode
Es una caracteristica del navegador que está de manera nativa. Esta característica nos permite manipular directamente un documento de una página web. El valor predeterminado de esta propiedad es 'off'.
¿Qué uso puedo darle?
Creo que puedo aportar un par de ideas que pueden resultar útiles y divertidas para esta característica..
- Revisar la ortografía de tu página web.
- Editar todos los textos en tiempo real.
¿Quién se beneficia de ello?
- Diseñadores:
document.designModepermite a los diseñadores experimentar con cambios de diseño en tiempo real sin tocar una sola línea de código. Esto puede incluir la manipulación de colores, estilos de fuente, tamaño de texto, disposición de elementos y más, todo directamente en el navegador. Es una forma excelente de probar rápidamente ideas de diseño y obtener una vista previa de cómo se verán en la página web. - Desarrolladores:
document.designModepermite a los desarrolladores hacer cambios rápidos en el contenido de una página web sin la necesidad de ir a un editor de código y recargar la página. Es particularmente útil para la depuración, ya que permite cambiar dinámicamente el contenido para probar cómo reacciona la página.
¿Cómo lo activas?
Para poder habilitar este modo, abre las herramientas de desarrollo en el navegador y después escribe document.designMode="on". Después de esto, entra en el "modo de diseño"."
Para abrir las herramientas de desarrollo, utiliza estos atajos de teclado:
Mac:
⌘ + Shift + cWindows/Linux:
F12 or Ctrl + Shift + C¿Qué pasa después?
Después de eso, puedes cerrar la herramienta de desarrollo y dejar volar tu creatividad.
A partir de ahora, todos los textos del sitio web son editables. En Chrome y Firefox puedes incluso deshacer los cambios paso a paso con CTRL+Z y ⌘+Z respectivamente.
¿Dónde están mis cambios originales?
Después de una recarga de toda la página web, todo el susto se acaba y puedes volver a usar la página con normalidad.
Te puede interesar ver la compatibilidad con los navegadores, te dejo el link
Tips
Revisar la ortografía de tu página web.
El navegador resaltará los errores de revisión ortográfica en HTML normal como lo haría en un campo de texto.
¡Se resaltarán las palabras mal escritas en rojo!
Puedes deshabilitar la revisión de ortografía con
document.documentElement.spellcheck = false
Conclusión
El objetivo principal del modo de diseño es que hace que todo el texto de la página web sea editable. Por lo tanto, también es útil para probar cambios rápidos en la copia de texto de un diseño. Creo que es una herramienta valiosa para el desarrollo y depuración de frontend.
Finalmente, aunque los cambios realizados con document.designMode no son permanentes y se pierden al recargar la página, esta herramienta puede servir para hacer prototipos rápidos y presentaciones, mostrando cómo podría verse un cambio antes de implementarlo en el código.
Pero recuerda, su verdadero valor radica en cómo la usas.