Cómo modificar una página web desde el navegador

¿Necesitas cambiar el texto que aparece en una página web? ¿Quieres imprimir una página, pero no quieres que aparezca un determinado párrafo, o prefieres modificar un par de frases para que se adapten mejor a lo que estás buscando antes de sacar un pantallazo? Todo eso es posible, ya que en el fondo una página web no es más que un documento, y por lo tanto, se puede editar como si fuera un archivo de Word.

Por supuesto, este cambio siempre será temporal, y en cuanto refresquemos la página desde el navegador ésta volverá a mostrarse en su formato original. Todos los cambios los realizaremos desde la consola de JavaScript del navegador, pero no os asustéis, ya que cómo veréis es un proceso bastante sencillo de llevar a cabo.

Cómo editar una página web desde cualquier navegador (Chrome, Firefox, Safari y Edge)

Para conseguir nuestro objetivo habilitaremos la función “document.designMode”, que es la que se encargará de hacer toda la “magia”. No es necesario realizar ninguna modificación a nivel de HTML, aunque dependiendo de si utilizamos el navegador Chrome, Firefox, Edge o Safari el procedimiento es ligeramente diferente.

Paso #1: Abre la consola de desarrollo del navegador

Antes de comenzar abre una nueva pestaña en el navegador y carga la página web que quieres modificar. Ahora abre la consola de desarrollo.

• Chrome: Despliega el menú de opciones de Chrome y pulsa sobre “Más herramientas -> Herramientas para desarrolladores”.
• Mozilla Firefox: Abre el menú de opciones ubicado en el margen superior derecho de la ventana y navega hasta “Más herramientas -> Herramientas para desarrolladores”.
• Safari: Si utilizas un equipo de Apple, pulsa en “Safari -> Preferencias -> Avanzado” y habilita la opción “Mostrar menú de desarrollo en la barra de menú”. Después pulsa sobre “Desarrollo -> Mostrar consola JavaScript”.
• Microsoft Edge: Pulsa sobre el menú de opciones y ve a “Más herramientas -> Herramientas de desarrollo”.

Si tienes problemas para abrir la consola de desarrollo también puedes probar con la combinación de teclas “Ctrl+Mayús+I”.

Paso #2: Habilita el modo diseño

Para habilitar el modo “Diseño de Documento” escribe el siguiente comando en la consola JavaScript que acabas de abrir, y pulsa enter:

document.designMode = 'on'

Paso #3: Modifica la página web como si fuera un documento editable

Lo más difícil ya está hecho. A partir de aquí tan solo tenemos que situar el cursor sobre la parte que queremos modificar en la página, hacer clic y añadir texto, eliminarlo o hacer cualquier otro tipo de modificación como si fuera un simple documento de Word.

Como veis también nos puede servir perfectamente para gastar alguna pequeña broma a nuestros amigos. Eso sí, no os paséis ¡que los sustos son muy traicioneros!

En cualquier caso, en el momento que refresquemos o actualicemos la página los cambios desaparecerán automáticamente. Por otro lado, si cambiamos de pestaña para hacer cambios en otra web también tendremos que volver a activar el modo diseño desde la consola de desarrollo.

Por último, para desactivar el modo diseño en una página simplemente abre la consola de desarrollo y ejecuta el siguiente comando:

document.designMode = 'off'

De esta manera la página dejará de ser editable, pero se conservará cualquier cambio realizado hasta que refresquemos la página. En definitiva, un comando de lo más sencillo para realizar cambios en páginas web y que funciona con cualquier navegador web. 

FUENTE: https://elandroidefeliz.com/como-modificar-una-pagina-web-desde-el-navegador/