JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

TRUCO: Cómo editar libremente, de manera temporal, cualquier página web de Internet

IMPORTANTE: Para aclarar esto de una vez por todas: lo que se explica en este vídeo solo permite hacer cambios locales a la página que estemos editando, es decir, en nuestro navegador, pero JAMÁS se puede modificar una página y que quede grabada en el servidor con esta técnica. Solo fastidiaría ¿no crees? Entonces cualquiera podría cambiar la página de cualquiera. Es tan evidente, que ni se me ocurrió comentarlo en el post/video original. Así que, por favor, no me preguntéis más cómo puedes cambiar la página y que se queden los cambios. Gracias. Si lo que quieres es guardar las modificaciones en local para quedártelas, simplemente copia el HTML resultante copiando el contenido de la etiqueta <html>, raíz de tu página.

RetoquesEste es un truco muy útil, muy sencillo pero a la vez muy poco conocido. De hecho le resultará de gran utilidad no sólo a técnicos como a diseñadores, sino también a responsables de marketing o, en general, cualquiera para el que un navegador sea su herramienta principal de trabajo.

Se trata de poder editar libremente cualquier página de Internet. Aunque no sea nuestra.

Esto tan sencillo tiene una enorme utilidad para muchas cosas:

  • Poder revisar una página (o una zona de una página) y retocarla en tiempo real para mostrar cómo nos gustaría que quedara, o resaltar ciertas cosas importantes.
  • Partir de una plantilla y rellenarla para crear una página completa basada en el mismo HTML y CSS. Luego solo tienes que copiar el código fuente resultante desde las herramientas F12.
  • Crear bocetos de una aplicación rápidamente partiendo de algo ya hecho.
  • ....
  • Hasta tomarle el pelo a algún amigo que se haya dejado el navegador abierto ;-)

Os lo dejo en un vídeo corto:

¡Espero que te resulte útil!

¿Este post te ha ayudado?, ¿has aprendido algo nuevo? Pues ¡ayúdame a ayudar a otros! No te costará nada y puedes conseguir premio. Es muy importante. Pulsa para saber más...
José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (41) -

Me parece muy interesante.
Gracias.

Buen Día Sr. Alarcón...

Primero saludarle y agradecerle por este tema que me ha llamado la atención, quedando con una duda; cuando uno se pone a editar "x" pagina y queda como uno quiere habrá modo de realizar la captura del HTML o poder guardar dichos cambios en HTML para rediseño...?

Spain José Manuel Alarcón

Muchas maneras: las herramietnas delnavegador suelen llevar un botón para guardar el HTML en su estado actual. Si no puedes usar el botón derecho en el body y decirle que quieres copiar el HTML completo. Es muy fácil.

Saludos.

y para Mac que debo presionar para que me salgan las herramientas del desarrollador?

¿Cómo se guardan las modificaciones? Al salir de la página no se guardan los cambios

No se guardan. Solo sirve para la sesión actual, pero siempre puedes copiar el código HTML desde las herramientas del desarrollador si lo quieres guardar, o incluso capturar la página resultante con cualquiera de las extensiones disponibles para ello.

Muy interesante este artículo. Me pregunto una cosa: Yo tengo un blog y a veces te pasas por otros blogs o foros y dejas un enlace a tu site. Sin embargo, en unos sitios admiten insertar ese enlace en html, otras poniendo [url=http://nuestraweb.com]anchor text[/url], otras poniendo simplemente el texto y te lo convierte en un enlace, etc. ¿Hay alguna forma mediante este sistema (u otro) de averiguar exactamente con qué formato poner ese enlace? Muchas gracias.
Un saludo

Hola! Me ha parecido muy interesante el video. Lo he intentado poner en práctica en la página web de la empresa q estoy llevando ahora y me deja modificar el texto, pero no me deja modificar ni mover varios recuadros que hay en la página. Como puedo hacerlo? Muchas gracias

Hola José Manuel, quiero editar la página web de mi empresa sigo los pasos que tu dices pero no se guardan los cambios, como lo puedo hacer, supongo que hay otra manera tengo las contraseñas para entrar en la web y hacer cambios pero no se como hacerlo.
Gracias

Spain José Manuel Alarcón

Emma, esto no es para guardar los cambios y que se publiquen. Es para poder tocar en tu navegador cualquier página, para hacer pruebas y cosas así (incluso bromas) pero no sustituye a un gestor de contenidos.

Si quieres guardar los cambios para tener la página persistentemente guardada y poder consultarlos luego, siempre puedes ir al nodo raíz de la página en el árbol (etiqueta <HTML>) y con el botón derecho elegir la opción de copiarla. Esto copiará el HTML completo de la página tal y como está en ese momento y te permitirá guardarla en un archivo .htm para verla luego, pero no modificará la página en el servidor.

Imagínate que eso fuera posible: ¡cualquiera podría cambiarte la página cuando la visitara! ;-)

Argentina Alejandro

Hola muy buen truco, una pregunta como puedo modificar una pagina web, si tengo el la contraseña para ingresar como administrador, lo mismo que emma, necesito que los cambio queden para siempre, o debo copiar y guardar el archivo.html como me interesa que quede y despues reemplazar ese en el original?
Saludos y gracias

solicito que me apoyen.
yo tengo 1 Blog (Blogger) que lo utilice anteriormente con otro producto que no es el actual y cuando ingreso a una página me sale un enlace diferente, Ejemplo:
el siguiente era el enlace del producto anterior:
besanu.blogspot.com/p/catalogo-angelissima.html (enlace anterior)
Como ya cambié la información, ahora quiero que el enlace sea el siguiente:
http://besanu.blogspot.com/p/aniones.html

Qué debo hacer para cambiar este enlace????

en mi pagina actual tengo el enlace siguiente:
besanu.blogspot.com/p/catalogo-angelissima.html

pero deseo cambiarlo a:
http://besanu.blogspot.com/p/aniones.html

QUÉ DEBO HACER

Hola, gracias por la información, es realmente útil. Lo que me gustaría saber es si a los que están detrás de esa página web les llega la información de que están manipulando los datos. Gracias.

Spain José Manuel Alarcón

Por supuesto que no: esto se produce solamente en tu navegador. Imagínate que fuera de otro modo: ¡le podríamos cambiar la página a cualquiera!

andres rivera

Me  gustaría mucho que me ayudares para codificar el siguiente sitio web www.paidverts.com hice lo que vi en el video aplastar F12 y attribute edito algo pero no se queda la información si no se sale de la nada y tengo que volver hacer el mismo procedimiento que podría hacer.

Chrimart Anji

Apretar F12 en el navegador no en cualquiera es F12 pero pongamos firefox , google chrome si, luego entre las etiquetas buscas lo que quieres editar y si sabes al menos un css y html lo puedes modificar como quieras visualmente para luego tomar screen y decir que esta persona publico esto ect ect tu tienes una foto falsa segun a una publicacion que el o ella hizo, (con eso juego normalmente :) es divertido) no es posible modificar el codigo a nivel servidor solo local, osea tu propia computadora.

Tengo una pregunta, es para un juego. Estaba curioseando por ahí y vi el código, entonces lo modifiqué por diversión y pude cambiar mi nombre de usuario y una bonificación diaria. Sin embargo, y como presentía, al cerrarlo pude darme cuenta que regresó mi cuenta a la normalidad. ¿Se podría cambiar con los cambios guardados? Por ejemplo, si en un minjuego en lugar de que se me atribuya 15 puntos, quiero que se me atribuyan unos 20, ¿se puede? También, ¿se podrían modificar los puntos que ya tengo? Si tengo 403 y quiero tener 503, ¿se puede guardar ese cambio? Me lo pregunto porque no estaría afectando todo el juego, sino mi cuenta. Y además, imagino que los técnicos informáticos se darían cuenta, ¿o no? Espero sus respuestas :)

by Jose M. Alarcon

Hola:

¿Has leído el post o solamente has visto el vídeo?

En la primera nota, nada más empezar el post y remarcada en color rojo, se explica que esto es algo local, que solo modifica lo que tú ves en tu navegador. Evidentemente jamás podrías modificar algo de manera permanente o todo Internet sería un caos ¿no crees?

Saludos.

Hola, quisiera saber si existe alguna extension que pueda hacer que los cambios se guarden permanentemente de manera local. Es decir, si es posible actualizar la pagina y que no se borren los cambios. Hay tutoriales en youtube con la extension stylish para cambiar el formato de imagenes, estilo etc,. quisiera saber si me podrias ayudar a editar y guardar de manera local un cambio(textos).

by Jose M. Alarcon

Hola Rodrigo:

Lo apunto en la nota del principio. Esm uy sencillo: en el árbol de elementos de la página (en el que has tocado lo de "contenteditable") localiza el elemento raíz (<html>), pulsa con el botón derecho sobre él y escoge la opción de Copiar·Copiar como HTML.

Esto te copiará al portapapeles el contenido HTML exacto que tengas ahora en la página. Solo tienes que pegarlo en el bloc denotas o similar y guardarlo a disco con el nombre que quieras y extensión .html. Con esto tendrás los cambios en local.

Saludos.

Hola rodrigo, saludos y gracias por ser amable en responder dudas.
Yo busco lo mismo que rodrigo, yo sé que obvio no haré cambio en la pagina, ni el que la visite va ver mis cambios ni nada parecido, tal cual lo dices en el post, sólo lo veo yo, pero lo que yo quiero es si hay alguna forma de que al modificar un sitio web / pagina, esta quede así aunque se recargue la pagina (ejemplo si modifico Facebook.com al recargar algo siga apareciendo la URL original y lo modificado). Ya que al guardarlo asi como mencionas en archivo HTML y abrirlo con navegador funciona, recargas la pagina y sigue igual PERO no aparece la url original (facebook.com) si no sale la dirección en donde guarde el archivo de escritorio.
Saludos y gracias

Hola José* disculpa el error jeje

by Jose M. Alarcon

No, no hay manera de hacerlo.

En Firefox existe una extensión llamada GreaseMonkey (addons.mozilla.org/es/firefox/addon/greasemonkey/) que sirve para crear fragmentos de código que se pueden usar sobre páginas específicas cuando carguen para modificarlas y adaptar su comportamiento a nuestras necesidades. Supongo que eso es lo que tú buscas, pero se trata de una cosa totalmente diferente.

Saludos.

hola de nuevo amigo, si, esa extensión sirve para lo que quiero, buscando un poco más me encontré con esta extensión para chrome tampermonkey, hace lo mismo igual a la que me dijiste.
Pero se necesita agregar un script, y no se de donde sacarlo, como lo hago?

Hola, si en vez de modificar el codigo html de una pagina online , modifico el de una pagina creada por mi y no subida a la red , las modificaciones se podrian guardar? , gracias por las molestias!

by Jose M. Alarcon

Sería lo mismo que en una página colgada en Internet. De todos modos, si tienes la página en local, tampoco tendría mucho sentido hacer esto, pues puedes tocar directamente el código en los archivos originales y refrescar la página. O copiar los cambios concretos que hayas hecho desde los nodos del DOM en las herramientas del desarrollador y pegarlos en el archivo que les corresponda.

En el caso de Chrome, sus herramientas de desarrollador se pueden convertir en un editor estilo Sublime y relacionar lo que estás editando con alguna carpeta en disco, de modo que si cambias algo ene l navegador puedas persistirlo directamente a disco. Pero eso es ya una cosa completamente diferente.

nino rinaldi

Cómo agregas fotos o videos?

Como abro las herramientas del desarrollador si tengo un mac

by Jose M. Alarcon

Cmd + Opción + I

Aitor Cami

Buenos dias,

Estoy en un sitio web de una feria comercial, aparecen todos los expositores y si le das en el nombre te lleba a otra pagina con informacion de la empresa.

Necesito tener en un excel todos los nombres de empresa (ya lo he hecho) y en la columna siguiente todos los corres electronicos para poder hacer mailing.

Hay alguna forma de poder editar libremente la web para que al lado del nombre de la empresa aparezca el mail y de esta forma copiar y pegar en excel?

Gracias de antemano


Saludos

Aitor Cami

Muy buen post!

Hola,

Estoy en el departamento comercial de una empresa.  actualemente estoy trabajando sobre una web de una feria comercial. Necesito trasladar el nombre de la empresa y su mail a un excel.

Para que aparezca informacion de cada empresa, deber dar click en su nombre.

existe alguna forma de poder visionar el nombre de la empresa y a continuacion su mail para copiar y pegar en excel? Son unas 1.000 empresas y sera interminable ir uno a uno

Gracias por su tiempo

Saludos

Hola tu  tutorial es muy bueno pero quisiera saber si de alguna manera puedo agregar una imagen desde mis aechivos y si no puedo ahi algun otro programa con el que pueda hacerlo ?

by Jose M. Alarcon

Fácil: simplemente pon la ruta en tu disco duro a esa imagen en una etiqueta de tipo "img".

Saludos.

Buenas, muy buen artículo! Soy bastante primerizo en informática y me gustaría saber si podrías ayudarme a realizar el mismo procedimiento pero con safari. Muchas gracias!

Me explico: No encuentro la manera de añadir un atributo nuevo (es decir, content editable) cuando saco las herramientas del desarrollador de la página que quiero editar localmente. Insisto, me pasa en safari, no sé cómo avanzar a partir de éste punto. Gracias por adelantado

by Jose M. Alarcon

Hola:

No tengo un Safari a mano, pero debería ser muy sencillo: pulsando con el botón secundario debería salirte la opción de "Add attribute" en el menú contextual.

Saludos.

Hola que tal,

Como se podría hacer para que la página quede guardad pero no en el servidor, si no en cache, me refiero a que yo cada vez que entre la vea de una forma distinta al resto.
Se que hay una extensión que es stylish que te guarda el estilo, pero no el HTML...

Si me pudieses ayudar sería genial.

Saludos y gracias de antemano.

Hola José,

Quisiera consultar como resolver un problema: Cree una página web mediante un portal que las crea, pero al publicarla la página queda con el nombre del portal y no me sirve así. Entonces la guardé en mi Pc pero al subirla al host y seleccionar las páginas me lleva a portal donde se creó el sitio web. ¿Como puedo modificar las dirección de las páginas?.

No sé si se entiende la consulta

Desde ya, muchas gracias

Hola estoy intentando cambiar unos números de una pagina y no me funciona con f12 hay alguna otra manera de hacerlo?

by Jose M. Alarcon

Prueba CTRL+MAY+I: te saca también las herramientas del desarrollador en todos los navegadores.

No se aceptan más comentarios