Cómo editar páginas web en Safari usando Inspect Element

Con su herramienta Inspect Element, Safari te permite jugar con el código frontal de cualquier página web. Si desea probar cómo se vería una página con diferentes textos o imágenes, puede hacerlo modificando su código con Inspect Element.

Esta es una guía simple dirigida a principiantes para explicar cómo puede comenzar a experimentar con Inspect Element en Safari para editar el texto y las imágenes de un sitio web con un conocimiento mínimo de codificación.

¿Qué es el elemento de inspección?

Inspect Element es una herramienta para desarrolladores. Está disponible en Safari, aunque también en otros navegadores web como Chrome, Firefox y Edge. Con Inspect Element, puede mirar detrás de la cortina de un sitio web para revelar su código frontal, como HTML y CSS. Sin embargo, no le otorga visibilidad del back-end, como sus bases de datos.

No solo puede ver este código, sino que también puede modificarlo. Esto significa que puede cambiar la apariencia de un sitio web. Puede reemplazar una imagen, reformular un texto, usar una fuente diferente, cambiar su combinación de colores y más. Sin embargo, estas ediciones son locales. No se le aparecerán a nadie más que a ti; desaparecen una vez que actualiza o se aleja de la página.

¿Por qué debería utilizar el elemento de inspección?

Inspect Element es una gran herramienta si eres un desarrollador web en ciernes. Literalmente, puede ver el código que impulsa su sitio web favorito, modificándolo como desee en un entorno del mundo real. Hay muchos Información divertida que puede obtener al usar Inspect Element.

Por ejemplo, los dueños de negocios pueden buscar palabras clave incluidas en el sitio web de un competidor, o los diseñadores pueden use Inspeccionar elemento para identificar una fuente que encuentran atractivos o para probar rápidamente un esquema de color diferente en su sitio web.

Por ahora, nos vamos a centrar en editar los aspectos básicos de una página web mediante Inspect Element.

Cómo acceder a Inspeccionar elemento en Safari

Puede abrir Inspeccionar elemento en Safari usando el menú del desarrollador:

1. Abre Safari.
2. Hacer clic Safari en la barra de menú superior.
3. En el menú desplegable, seleccione preferencias.
4. Selecciona el Avanzado opción.
5. Marque la casilla que dice Mostrar el menú Desarrollar en la barra de menú.

Después de seleccionar esta opción, puede botón derecho del ratón en una página web y seleccione Inspeccionar elemento. Como alternativa, puede seleccionar Desarrollar en la barra de menú y luego Mostrar inspector web.

Cómo encontrar elementos web en Inspeccionar elemento

Para comenzar a editar un elemento, botón derecho del ratón lo que desea editar y haga clic en Inspeccionar elemento. Esto abrirá la ventana del desarrollador, con la sección relevante resaltada. Es posible que encuentre que el elemento particular que desea agregar (la imagen o el texto, por ejemplo) está oculto; para localizarlo, utilice el flechas a la izquierda para expandir las secciones anidadas.

Para ayudar a reducir su selección, haga clic en el icono de objetivo de la barra de herramientas Inspeccionar elemento. Ahora, mientras navega por el código, resalta esa sección en el sitio web. O puede usar su cursor para señalar una sección en el sitio. Esto es útil cuando desea concentrarse en algo en particular en un área concurrida de una página web.

Cómo editar el texto de un sitio web usando el elemento de inspección

Para hacer que un fragmento de texto sea editable después de encontrarlo en el código fuente de un sitio, haga doble clic eso. Puede escribir texto nuevo directamente en el código o eliminar el texto existente. Cuando la edición esté completa para una cadena de texto determinada, presione Ingresary el texto de la página web cambiará.

¡Es realmente tan simple como eso! Las únicas veces que esto no funcionará es cuando el texto es en realidad parte de una imagen, como un logotipo.

Cómo editar las imágenes de un sitio web usando el elemento de inspección

Si bien las imágenes aparecen visualmente en el front-end, en el código del sitio web aparecen como enlaces. Puede botón derecho del ratón e imagen y elige Inspeccionar elemento para saltar a donde está esa imagen en el código. Las imágenes de sitios web suelen tener extensiones de archivo JPG, GIF o PNG, aunque no exclusivamente.

Haga doble clic estas cadenas de imágenes y puede editarlas, o simplemente guardarlas en su sistema si lo desea. Si desea reemplazar la imagen, cámbiela por una URL de imagen de reemplazo. O puede eliminar la cadena de código por completo para quitar la imagen de la vista.

Profundice en los sitios web usando Safari

La herramienta Inspeccionar elemento de Safari te permite encontrar y cambiar fácilmente el código correspondiente a texto e imágenes, lo cual es tan fácil como cambiar una cadena de texto o URL. Una vez que haya terminado de editar un sitio web con Inspect Element, simplemente actualice la página y todo volverá a la normalidad.

Cómo cambiar el agente de usuario de su navegador y los sitios web engañosos

Leer siguiente

Sobre el Autor