Edita cualquier página web [No-Code Hack #2]
¿Alguna vez has querido saber cómo funciona o qué se esconde detrás de cualquier página web? Si la respuesta es sí, en este post te cuento como hacerlo paso a paso a través del elemento inspeccionar, presente en cualquier navegador moderno.
Elemento Inspeccionar o Inspect
El elemento inspeccionar o “inspect” es una funcionalidad de los exploradores actuales, por medio del cual, cualquiera puede ver y editar el frontend de la página.
¿Cómo puedes acceder a él?
Acceder a Elemento Inspeccionar o Inspect desde cualquier navegador.
Desde Google Chrome, Brave o cualquier explorador con Chromium
- Pincha el botón derecho del ratón en cualquier parte de la web.
2. Selecciona el botón “inspeccionar”, y listo.
A veces, puedes encontrar easter eggs interesantes como este.
Otra opción es:
- Seleccionar la Hamburguesa o los tres puntos en la parte superior derecha de la ventana.
- Buscar donde ponga “más herramientas”.
- Seleccionar “herramientas para desarrolladores”.
- Y listo, ya estarías dentro.
Elemento Inspeccionar en Firefox
- Pincha en el menú hamburguesa que está en la parte superior derecha.
- Elige la opción “Web Developer”.
- Después sobre “Inspector”.
Para acceder por medio del teclado puedes hacerlo de estas dos maneras.
macOS: command + option + C
Windows: Control + Shift + C
Elemento Inspeccionar en Edge
- Pincha en el menú opciones.
- Selecciona herramientas de desarrollo (Dev Tools).
- Abre la página que quieres inspeccionar.
- Haz clic derecho.
- Selecciona inspeccionar.
Elemento Inspeccionar en Safari
Safari — Preferencias — Avanzado — Mostrar el menú desarrollo en la barra de menús
Editar cualquier página web desde Inspect
Para editar cualquier página usando el elemento inspect, solo tienes que acceder a él como lo hemos explicado previamente y podrás borrar, editar o cambiar los textos y el CSS de la página directamente.
Para verlo de forma más clara, mira el siguiente video.
Editar cualquier página con JavaScript y sin conocimientos de programación.
En esta segunda demostración, usaremos directamente un fragmento de código en JavaScript.
javascript:document.body.contentEditable = ‘true’; document.designMode=’on’; void 0
En algunos exploradores puedes simplemente arrastrar el código en el campo de URL.
En otros exploradores el proceso será el siguiente.
- Añade la página que quieras editar a marcadores o favoritos.
- Edita el campo de URL y pega el código.
De esta manera, puedes modificar los elementos de cualquier página web. Y despreocúpate de meter la pata, porque no estás haciendo cambios en la página web original, sino únicamente en la interfaz que visualizas tú.
Estas opciones de edición son muy útiles para cualquier profesional de marketing, diseño, copywriting o curiosos de la tecnología. Dominarlo, te permitirá aprender lo que hay detrás de las páginas web, obtener información sobre tu competencia, descubrir maneras en las que puedes optimizar el frontend de tu sitio, buscar inspiración a la hora de diseñar, editar el copy de una página, evaluar el efecto frente a un cliente y un sinfín de posibilidades más.
