¿Cómo editar una página web con la consola?

Editar página

Nota: Si te estás iniciando en el desarrollo web y en el uso de las herramientas para desarrolladores, nuestros documentos de aprendizaje te ayudarán – consulta Introducción a la web y ¿Qué son las herramientas para desarrolladores del navegador? para obtener buenos puntos de partida.

Las herramientas principalesPuedes abrir las herramientas de desarrollo de Firefox desde el menú seleccionando Herramientas > Desarrollador web > Herramientas de desarrollo web o utilizar el atajo de teclado Ctrl + Shift + I o F12 en Windows y Linux, o Cmd + Opt + I en macOS.

Conexión de las herramientas de desarrolloSi abres las herramientas de desarrollo utilizando los atajos de teclado o los elementos de menú equivalentes, se dirigirán al documento alojado en la pestaña actualmente activa. Pero también puedes conectar las herramientas a una variedad de otros objetivos, tanto dentro del navegador actual como en diferentes navegadores o incluso diferentes dispositivos.

Depuración del navegadorPor defecto, las herramientas de desarrollo se adjuntan a una página o aplicación web. Pero también puedes conectarlas al navegador en su conjunto. Esto es útil para el desarrollo de navegadores y complementos.

Editor html de Chrome

Nota: Antes de seguir los ejemplos que aparecen a continuación, abre el sitio de ejemplo para principiantes que construimos durante la serie de artículos Introducción a la Web. Deberías tenerlo abierto mientras sigues los pasos siguientes.

El Inspector: Explorador del DOM y editor de CSSLas herramientas de desarrollo suelen abrir por defecto el inspector, que se parece a la siguiente captura de pantalla. Esta herramienta muestra el aspecto del HTML de tu página en tiempo de ejecución, así como qué CSS se aplica a cada elemento de la página. También te permite modificar instantáneamente el HTML y el CSS y ver los resultados de tus cambios reflejados en directo en la ventana gráfica del navegador.

Explorar el inspector DOMPara empezar, haz clic con el botón derecho del ratón (Ctrl-clic) en un elemento HTML del inspector DOM y mira el menú contextual. Las opciones de menú disponibles varían entre los navegadores, pero las más importantes son en su mayoría las mismas:

Intenta editar algo de tu DOM ahora. Haz doble clic en un elemento, o haz clic con el botón derecho del ratón y elige Editar como HTML en el menú contextual. Puedes hacer los cambios que quieras, pero no puedes guardar los cambios.Explorando el editor CSSPor defecto, el editor CSS muestra las reglas CSS aplicadas al elemento actualmente seleccionado:

Cómo editar una página web

Además, puedes cambiar el diseño y el aspecto de la página web. Cambiar cualquier color, el peso de las fuentes, la altura de las líneas y las etiquetas para ver el aspecto directamente en el cromo. Así es como el código fuente y la inspección de elementos permiten ver los cambios antes de aplicarlos permanentemente. Y la mayoría de los desarrolladores encuentran esta manera más fácil de gestionar los cambios y el resultado antes de la aplicación.

Usando el navegador Chrome, usted no requiere tener acceso a ningún script especial, hojas de estilo, plantilla o código de servidor back-end del soporte del sitio del cliente para ver cómo se construye el front-end. Estas herramientas le dan un acceso fácil y rápido.

Fácilmente se puede utilizar esta función para editar, borrar o eliminar una página web antes de ir a imprimirla, cambiar cualquier página web para probar cómo se verá o se puede editar una web para simplemente bromear con la gente. La edición de la página web se parece a la edición de un documento de Word, porque no se estropea la codificación HTML necesaria.

Después de eso, cierre la consola si desea editar la página web actualmente abierta como si fuera un modo de documento editable. Puedes editar elementos de forma similar a un documento de Word. Tienes que hacer clic en cualquier lugar para insertar el cursor del ratón y editar o escribir el texto. Al mismo tiempo, puede utilizar suprimir o retroceder para eliminar imágenes, texto y otros elementos.

Broma para cambiar el texto de una página web

Cuando ves una página web, hay un montón de código que no ves, a menos que sepas dónde mirar. Todo está hecho de código, desde la imagen de fondo hasta la tipografía; desde los vídeos hasta los botones. Todo funciona gracias a complejas instrucciones. Pero, ¿cómo se ve el back-end?

Para el visitante medio del sitio, Inspect Element es poco más que una curiosidad, que quizá merezca unos minutos de diversión. Pero para los desarrolladores de sitios, codificadores y aquellos que están interesados en aprender a programar, esta herramienta para desarrolladores ofrece una serie de ventajas.

Si quieres entender realmente algo, es bueno poder experimentar con ello. Inspect Element te da la ventaja de poder juguetear con el código que impulsa un sitio y aprender cómo funciona.

Digamos que estás empezando a codificar. Visitas una página web, y ves que hay un elemento en el sitio que realmente capta tu atención. Tal vez sea algo que te ha interesado incorporar a una página en la que has estado trabajando; tal vez sea algo vanguardista que nunca habías considerado antes. En cualquier caso, sientes curiosidad por el código. Así que utilizas Inspect Element para ver exactamente lo que está pasando.