"Inspeccionar elemento" es una herramienta de desarrollo en el navegador Firefox que puede utilizar para rastrear el código HTML en cualquier página web. Las hojas de estilo HTML y CSS de una página web se pueden editar con "Inspeccionar elemento". Puede intentar editar una página como desee y volver a la forma en que estaba simplemente volviendo a cargar la página web editada.
Paso
Parte 1 de 2: Comprobación de elementos
Paso 1. Actualiza Firefox (opcional)
Es posible que no pueda acceder a las funciones discutidas en este artículo si está usando una versión anterior de Firefox. La actualización se instalará automáticamente cuando verifique qué versión de Firefox está utilizando.
Firefox 9 y las versiones anteriores no tienen la herramienta "Inspeccionar elemento" en absoluto
Paso 2. Haga clic con el botón derecho en cualquier elemento de la página web
Puede hacer clic con el botón derecho en cualquier imagen, texto, fondo o elemento. Si su mouse tiene solo un botón, una combinación de clic izquierdo y la tecla Control resultará en un clic derecho.
Paso 3. Haga clic en "Inspeccionar elemento" en el menú desplegable
Aparecerá una barra de herramientas en la parte inferior de la ventana. También aparecerá un panel debajo de la barra de herramientas y mostrará el código HTML en la página activa.
Paso 4. Conozca las barras de herramientas y los paneles existentes
Cuando utilice "Inspeccionar elemento", se abrirán varios paneles debajo de la ventana del navegador. A continuación se describen los nombres y funciones de las barras de herramientas y paneles en "Inspeccionar elemento":
- En la fila superior está la barra de herramientas de la caja de herramientas. Hay varias herramientas que se pueden encontrar aquí, pero nos centraremos en el botón Inspector a la izquierda. Asegúrese de que este botón esté activo (indicado por el color del botón que se vuelve azul cuando está activo) a lo largo de esta guía.
- Debajo de eso, hay una línea de rutas de navegación de elementos HTML que indican la ubicación del elemento seleccionado actualmente.
- El panel debajo de las indicaciones de navegación muestra el árbol HTML o "Vista de marcado" de la página web. El HTML del elemento seleccionado se marcará y centrará en este panel.
- El panel de la derecha muestra la hoja de estilo CSS de la página web actual.
Paso 5. Seleccione otro elemento
Cuando la barra de herramientas está abierta, puede seleccionar fácilmente otros elementos. Hay tres maneras de hacer esto:
- Desplácese sobre una línea de HTML para marcar el elemento seleccionado (esta función requiere Firefox 34+). Haga clic en HTML para seleccionar ese elemento.
- Haga clic en la herramienta "Seleccionar elemento" en la esquina izquierda de la barra de herramientas: tiene un icono en forma de cursor encima de un cuadro. Mueva el cursor en la página web para marcar un elemento y haga clic para seleccionarlo.
Paso 6. Rastree el código HTML
Haga clic en cualquier parte del panel HTML. Utilice las teclas de dirección izquierda y derecha del teclado para pasar de un código a otro (esta función requiere Firefox 39+). Este método es útil para seleccionar elementos que son demasiado pequeños para ser seleccionados con el cursor.
- HTML atenuado indica elementos que no se muestran en la página. Los elementos incluidos en esto son comentarios, como nodos, y otros elementos ocultos por la propiedad de visualización de CSS.
- Haga clic en la flecha a la izquierda del cuadro para mostrar u ocultar el contenido. Para mostrar todo el contenido, mantenga pulsado alt="Imagen" u opción mientras hace clic en la flecha.
Paso 7. Ubique el elemento
Busque el campo de búsqueda (icono en forma de bucle) en el extremo derecho de la fila de migas de pan. Haga clic para expandir el campo de búsqueda y escriba el código HTML que desea buscar. A medida que escribe, se mostrará una ventana emergente que muestra los resultados de búsqueda coincidentes. Haga clic en un elemento de los resultados de la búsqueda y desplácese por el panel HTML hasta el código que está buscando.
Parte 2 de 2: Edición de HTML
Paso 1. Vuelva a cargar la página para empezar de nuevo
Si es nuevo en las herramientas de desarrollo de sitios web, tenga en cuenta que no realiza cambios permanentes en las páginas que edita. Tus ediciones solo aparecen en tu pantalla hasta que vuelves a cargar o cierras la página. Siéntase libre de experimentar incluso si no sabe lo que sucederá.
Paso 2. Haga doble clic en HTML para editar
Haga doble clic en HTML en línea. Escriba el nuevo texto y presione enter para guardar los cambios.
Paso 3. Haga clic y mantenga presionada la herramienta en la ruta de navegación para que aparezcan más opciones
Tenga en cuenta que la barra de herramientas de ruta de navegación se encuentra entre el árbol HTML y la barra de herramientas que se encuentra encima. Haga clic y mantenga presionada una herramienta en esta fila para abrir más menús. A continuación se muestra una pista de las opciones disponibles (no exhaustivas):
- "Editar como HTML" le permite editar todo el contenido HTML del árbol HTML directamente en lugar de editar cada línea.
- "Copiar HTML interno" copia todo el contenido dentro del nodo, mientras que "Copiar HTML externo" copia el contenido y los nodos (como o
- "Pegar →" muestra varias opciones sobre dónde pegar la copia, como antes del nodo o después del primer hijo del nodo.
- : hover,: active y: focus cambian la apariencia del elemento cuando el usuario interactúa. Los efectos modificados se definen desde 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 de puntos. Mueva la línea hacia arriba y hacia abajo en el árbol y suelte el botón del mouse cuando la línea esté donde lo desee.
Esta función requiere Firefox 39 y posterior
Paso 5. Cierre la barra de herramientas del desarrollador
Para cerrar toda la ventana Inspeccionar elemento, haga clic en el botón X en la esquina superior derecha de la barra de herramientas ubicada sobre el panel CSS.
Consejos
- También puede abrir la barra de herramientas desde las opciones del menú en la parte superior de la ventana:
- Windows: Firefox → Desarrollador web → Herramientas de alternancia
- Mac o Linux: Herramientas → Desarrollador web → Alternar herramientas
- Firefox 40 tiene la opción de ocultar el panel CSS para que tenga más espacio para editar HTML. Busque el icono de flecha en la esquina derecha de la fila de migas de pan y a la derecha del campo de búsqueda. Haga clic en este icono para ocultar el panel CSS y vuelva a hacer clic para que aparezca.
- También puede editar paneles CSS, pero no se enumeran en este artículo. Puede encontrar instrucciones para editar el código CSS en Internet.
