Cómo editar una página web en su navegador

Normalmente cuando editamos una página web utilizamos una herramienta de edición específica como Adobe Dreamweaver, CoffeeCup, Bluefish o alguna de las otras herramientas de desarrollo. ¿Pero qué pasa si sólo estamos haciendo una lluvia de ideas o queremos probar algo en una página en vivo? Podríamos hacer una copia de la página en nuestra herramienta de elección y jugar con ella. O podríamos hacerlo dentro de nuestro navegador web. Este tutorial le mostrará cómo editar una página web en su navegador.

Denominada Herramientas de Desarrollo, Firefox llama a la característica Inspeccionar Elemento mientras que Chrome la llama Inspeccionar. De cualquier manera, es una forma de que el navegador se asome al brillo de tu diseño y eche un vistazo al código que lo impulsa. Esta característica es bastante conocida y se usa mucho. Lo que no es tan conocido es la capacidad de hacer cambios en ese código sobre la marcha.

Cualquier cambio que hagas no se guardará y no afectará a la vida. Si no quieres cargar la página en tu herramienta de desarrollo, esta es una buena manera de experimentar.

Edita cualquier página web en tu navegador

Dreamweaver y herramientas como esta tienen un emulador de navegador incorporado que simula cómo se verá un diseño en diferentes navegadores. Por muy buenos que sean, no siempre son exactos y a menudo te encuentras al lanzar un sitio que lo que se veía fantástico en tu herramienta de desarrollo se ve ligeramente diferente en un navegador independiente.

Por lo general, usted lanzaría el sitio en un servidor web interno y lo probaría en un navegador antes de lanzarlo en vivo por esta razón. Si una página ya está activa o si sólo quiere probar algo, no hay necesidad de copiarla y cargarla en su herramienta de desarrollo, sólo puede usar la herramienta de desarrollo del navegador.

Uso Firefox, así que te mostraré cómo usarlo. El cromo es muy similar.

Abra una página web con la que quiera experimentar en su navegador.

Haga clic con el botón derecho del ratón en cualquier parte de la página y seleccione Inspeccionar.

Debería ver su página dividida en dos con un nuevo panel que aparece en la parte inferior con algún código. Este código es el motor de la página que ha seleccionado. Los diferentes elementos de la página son accesibles desde las pestañas en la parte superior de la pestaña inferior. Por ejemplo, vemos Inspector, Consola, Depurador, Editor de Estilo y así sucesivamente en Firefox.

Si pasa el cursor por encima de las líneas del panel inferior verá diferentes partes de la página web resaltadas. La línea de código en la que estás durante el resaltado es el código que influye en esa parte de la página.

Si quiere jugar con el aspecto de la página, pruebe el Editor de estilo.

Si quiere jugar con el funcionamiento de la página, pruebe Consola o Accesibilidad.

Si desea anular errores o resolver un problema, utilice la Consola o el Depurador

El rendimiento es útil para el SEO in situ, pero la memoria, la red y el almacenamiento no se utilizan tanto.

Recuerde que puede jugar con las herramientas de desarrollo tanto como desee y que no afectará al sitio. Cualquier cambio sólo se realiza en la forma en que la página se muestra en su navegador individual, no afecta al sitio web en sí. Una vez que cierras la herramienta, todos los cambios se pierden.

Realizar cambios en una página

Ahora que sabes que puedes cambiar todo lo que quieras sin afectar al sitio web real, vamos a divertirnos un poco. Encuentra un elemento en la página que te gustaría editar. Puedes cambiar una fuente, un color de fuente, una imagen de fondo o lo que quieras. Para este ejemplo, voy a cambiar el color de la fuente del encabezado del banner.

Haga clic con el botón derecho del ratón en el elemento exacto que desea cambiar y seleccione Inspeccionar.

Resalte la línea con «title» o «H1» para que el texto se resalte en el panel superior.

Navegue hacia los dos paneles de la izquierda y encuentre el color de la fuente.

Cambie el valor a algo diferente o seleccione el punto de color para usar un selector.

Su cambio aparecerá de forma dinámica a medida que finalice el cambio. Puedes cambiar el color, el tamaño, la fuente, el fondo y todo lo relacionado con la fuente. No puede guardar el trabajo pero sus cambios permanecerán para esa sesión.

Puedes cambiar todo en la página, lo cual es ideal si tienes una idea y quieres comprobarla rápidamente antes de poner en marcha todas tus aplicaciones de desarrollo. Todo lo que tienes que hacer es recordar qué cambios hiciste y dónde, ya que no puedes guardarlos aquí. Tendrás que hacer una captura de pantalla o grabar los cambios y replicarlos dentro de tus herramientas de desarrollo para que se peguen.

La edición de una página web en su navegador es una forma muy sencilla de experimentar o jugar con las páginas. También es una buena manera de aprender un poco sobre el desarrollo web sin tener que comprar costosas herramientas de desarrollo. Ahora ya sabes cómo, ¡vete a jugar!

Cómo mostrar vistas previas de iconos de PSD en el Explorador de archivos de Windows 10

De forma predeterminada, Windows no tiene una utilidad para abrir estos archivos, ya que los archivos PSD están diseñados en ...
Leer Más

Cómo encontrar a una persona en línea si tiene su nombre y ciudad

Encontrar a las personas puede ser muy difícil si la información que tiene sobre ellas es limitada. Entre los motores ...
Leer Más

Cómo cambiar el sonido de inicio en Windows 10

Posiblemente la familia de sistemas operativos más exitosa de todos los tiempos, Windows ha construido una gran reputación de muchas ...
Leer Más

Cómo grabar audio de ordenador en su Mac con Audacity

Por defecto, Audacity está configurado para grabar el audio del núcleo y del micrófono incorporado en estéreo (dos canales). Puede ...
Leer Más

Qué hacer si KB4056892 no se instala correctamente en el dispositivo de Windows

Si tiene problemas con KB4056892, es probable que Windows Update haya hecho lo suyo y haya dicho que necesitaba reiniciarse ...
Leer Más

Las mejores extensiones de cromo para ocultar su ubicación o país

Con más de 3.000 servidores en 160 ubicaciones diferentes, ExpressVPN es, sin duda, la mejor extensión VPN completa que puede ...
Leer Más

Cómo mantener la pantalla encendida en Windows 10

Selecciona el menú desplegable Protector de pantalla y haz clic en (None) desde allí. Haz clic en Aplicar y Aceptar ...
Leer Más

Cómo configurar un enrutador de TP-Link

Configuración del router Es posible que tenga que configurar su módem en modo sólo-módem, pero eso depende totalmente de su ...
Leer Más

Qué hacer cuando el tema oscuro en el Explorador de archivos no funciona

Solución 1 - Actualice su Windows 10 Si no puede encontrar el tema oscuro en su PC, eso probablemente significa ...
Leer Más

Cómo usar la vista de lectura en Microsoft Edge para Windows 10

Con el artículo cargado, busque y haga clic en el icono de Vista de Lectura en el lado derecho de ...
Leer Más

Deja un comentario