La herramienta de desarrollo Inspect Element en Firefox te permite identificar el código HTML de cualquier cosa que veas en tu página web. El HTML y la hoja de estilo CSS que lo acompaña son completamente editables una vez que estas herramientas están abiertas. Experimente con los cambios que desee, luego actualice la página para volver a la apariencia deseada de la página web.
Pasos
Parte 1 de 2: Inspección de elementos
Paso 1. Haga clic con el botón derecho en cualquier elemento de la página web
Puede hacer clic con el botón derecho en imágenes, texto, fondos o cualquier otro elemento. Si no tiene un mouse de dos botones, haga clic con el botón izquierdo mientras mantiene presionado Control.
Paso 2. Haga clic en Inspeccionar elemento en el menú desplegable
Debería aparecer una barra de herramientas en la parte inferior de la ventana. También aparecerá un panel debajo de la barra de herramientas, mostrando el código HTML de la página.
Paso 3. Identifique las barras de herramientas y los paneles
Al hacer clic en Inspeccionar elemento, se abrirán varios paneles en la parte inferior de la ventana. Aquí hay un desglose de sus usos y nombres:
- La fila superior es la barra de herramientas de la caja de herramientas. Esto tiene varias herramientas para desarrolladores, pero estamos interesados en Inspector a la izquierda. Mantenga esto seleccionado (resaltado en azul) para toda esta guía.
- Debajo de la barra de herramientas, hay una única fila Breadcrumbs de elementos HTML, que muestra la ruta completa relacionada con el elemento seleccionado.
- El panel debajo de esta fila muestra el árbol HTML o "Vista de marcado" de la página. El HTML del elemento que seleccionó está resaltado y centrado en este panel.
- El panel de la derecha muestra la hoja de estilo CSS de esta página.
Paso 4. Seleccione otro elemento
Una vez que la barra de herramientas está abierta, seleccionar otro elemento es fácil. Aquí hay tres formas de hacerlo:
- Desplácese sobre una línea de HTML para resaltar el elemento correspondiente (requiere Firefox 34+). Haga clic en HTML para seleccionar ese elemento.
- Haga clic en la herramienta Seleccionar elemento en el extremo izquierdo de la barra de herramientas: el icono es un cursor sobre un cuadrado. Mueva el cursor sobre la página para resaltar elementos, luego haga clic para seleccionar un elemento.
Paso 5. Navegue por el código
Haga clic en cualquier parte del panel HTML. Utilice las flechas izquierda y derecha de su teclado para moverse por el código (requiere Firefox 39+). Esto es útil para elementos demasiado pequeños para seleccionarlos a mano.
- El HTML gris se refiere a elementos que no se muestran en la página. Esto incluye comentarios, ciertos nodos como y elementos que se han ocultado con la propiedad de visualización de CSS.
- Haga clic en la flecha a la izquierda de los contenedores para expandir u ocultar su contenido. Para expandir todo el contenido, mantenga presionada la tecla alt="Imagen" u opción mientras hace clic.
Paso 6. Busque un elemento
Busque la barra de búsqueda (icono de lupa) en el extremo derecho de la fila Breadcrumbs. Haga clic aquí para expandirlo, luego escriba el código HTML que está buscando. A medida que escribe, aparecerá una ventana emergente con una lista de los elementos coincidentes. Haga clic en uno para seleccionar ese elemento y desplácese por el panel HTML hasta su código.
Parte 2 de 2: Editar el HTML
Paso 1. Actualice la página para empezar de nuevo en cualquier momento
Si es nuevo en las herramientas de desarrollo web, comprenda que no realizan cambios permanentes. Sus ediciones solo serán visibles en su pantalla, y solo hasta que cierre la página o la actualice. No dude en experimentar incluso si no está seguro de lo que sucederá.
Paso 2. Haga doble clic en HTML para editar el texto
Haga doble clic en una línea de HTML. Escriba el nuevo texto y presione Intro para guardar los cambios.
Paso 3. Haga clic y mantenga presionada una ruta de navegación para ver más opciones
Recuerde, la barra de herramientas Breadcrumb está intercalada entre el árbol HTML completo y la barra de herramientas superior. Haga clic y mantenga presionado en cualquiera de los elementos en esta fila para abrir un menú extenso. Aquí hay una guía incompleta de estas opciones:
- "Editar como HTML" hace que el nodo y todo su contenido sean editables en el árbol HTML, en lugar de tener que editar cada línea individualmente.
- "Copiar HTML interno" copia todo el contenido del nodo, mientras que "Copiar HTML externo" también copia el nodo (como o
- "Pegar →" lleva a varias opciones sobre dónde pegar, como antes de este nodo o después del primer hijo del nodo.
- : hover,: active y: focus cambian la apariencia del elemento cuando el usuario interactúa con él. El efecto exacto está determinado por la hoja de estilo CSS (editable desde el panel de la derecha).
Paso 4. Arrastra y suelta
Para reorganizar elementos en el código, haga clic y mantenga presionado el HTML hasta que aparezca una línea discontinua. Muévalo hacia arriba o hacia abajo del árbol y suéltelo cuando la línea punteada esté en el lugar deseado.
Esto requiere Firefox 39 o posterior
Paso 5. Cierre la barra de herramientas del desarrollador
Para cerrar todas estas elegantes ventanas, simplemente presione la X en la esquina derecha de la barra de herramientas, arriba del panel CSS.
Consejos
- También puede abrir la barra de herramientas con estas opciones del menú superior:
- Windows: Firefox → Desarrollador web → Herramientas de alternancia
- Mac o Linux: Herramientas → Desarrollador web → Alternar herramientas
- Firefox 40 introdujo la opción de ocultar el panel CSS para darle más espacio al editar HTML. Busque el icono de flecha en el extremo derecho de la fila Breadcrumbs, a la derecha de la barra de búsqueda. Haga clic en este icono para ocultar el panel CSS y vuelva a hacer clic en él para expandirlo de nuevo.
- El panel CSS también se puede editar, pero eso está más allá del alcance de esta guía. Este artículo enseña los conceptos básicos de CSS.
