Cómo usar la herramienta Inspeccionar elemento en Mozilla Firefox

PDF download Descargar el PDF
PDF download Descargar el PDF

La herramienta de desarrollador "Inspeccionar elemento" te permite identificar con precisión el código HTML de todos los elementos que ves en una página web. El HTML y las hojas de estilo CSS que lo acompañan son completamente editables una vez que has abierto estas herramientas. Experimenta haciendo los cambios que tú quieras y luego actualiza la página para visualizar la página web con el aspecto deseado.

Parte 1
Parte 1 de 2:

Inspeccionar elementos

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Puedes hacer clic derecho en imágenes, texto, fondos o en cualquier otro elemento. Si no tienes un ratón con dos botones, haz clic izquierdo mientras mantienes presionada la tecla Control .
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d1\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d1\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Deberá aparecer una barra de herramientas en la parte inferior de la ventana. También aparecerá un panel debajo de la barra de herramientas donde se mostrará el código HTML de la página.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Cuando hagas clic en "Inspeccionar elemento" se abrirán varios paneles en la parte inferior de la ventana. Aquí tienes una descripción los nombres y el uso de cada uno de ellos por separado: [1]
    • La fila superior es la "Caja de herramientas". Cuenta con varias herramientas de desarrollador, pero debes concentrarte en la que dice Inspector a la izquierda. Mantenla marcada durante toda la guía (debe estar seleccionada en azul).
    • Debajo de la barra de herramientas, verás una única fila de breadcrumbs (en español, "migas de pan") con los elementos HTML que muestra la ruta completa del elemento seleccionado.
    • El panel que está debajo muestra el árbol HTML o la "Vista de marcas" de la página. En este panel aparecerá seleccionado y centrado el código HTML del elemento elegido.
    • El panel que aparece a la derecha muestra el código de las hojas de estilo CSS de la página.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/95\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/95\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Una vez que está abierta la barra de herramientas, seleccionar otro elemento es fácil. Aquí tienes tres formas de hacerlo:
    • Pasa el puntero del ratón sobre una línea de HTML para seleccionar el elemento correspondiente (debes tener Firefox versión 34 o posterior). [2] Haz clic en el código HTML para seleccionar ese elemento.
    • Haz clic en la opción "Elegir un elemento de la página" en el extremo izquierdo de la barra de herramientas: el ícono es un puntero sobre un cuadrado. Mueve el puntero del ratón sobre la página para elegir el elemento y luego haz clic para seleccionarlo.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Haz clic en cualquier lugar del panel HTML. Utiliza las flechas izquierda y derecha en tu teclado para desplazarte a través del código (debes tener Firefox versión 39 o posterior). [3] Esto es muy útil para los elementos que son demasiado pequeños para seleccionarlos a mano.
    • Los elementos HTML de color gris son los elementos que no se muestran en la página. Esto incluye comentarios, ciertos nodos como <head> y otros elementos que se han ocultado con la propiedad "display" (mostrar) de CSS. [4]
    • Haz clic en la flecha que aparece a la izquierda de los contenedores para expandir u ocultar su contenido. Para expandir todo el contenido, mantén presionada la tecla Alt u Opción al hacer clic. [5]
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/62\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/62\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ve a la barra de búsqueda (la que tiene el ícono de una lupa), que está en el extremo derecho de la fila de breadcrumbs . Haz clic en la barra para expandirla y luego escribe el código HTML que quieras buscar. Mientras escribas aparecerá una lista con los elementos que coinciden con el texto buscado. Haz clic en alguno de ellos para seleccionar el elemento que buscas y deslizar el panel de HTML hasta el lugar donde está ese código.
    Anuncio
Parte 2
Parte 2 de 2:

Editar el código HTML

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ee\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ee\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si no tienes mucha experiencia con las herramientas de desarrollador, comprende que no hacen ningún cambio permanente. Tus ediciones solo serán visibles en tu pantalla y lo serán hasta que cierres la página o la actualices. No dudes en experimentar, incluso si no estás seguro de qué es lo que sucederá.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ef\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Haz doble clic en una línea de HTML. Escribe texto nuevo y presiona ↵ Enter para guardar los cambios.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/aa\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/aa\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Recuerda: la barra de herramientas de breadcrumbs está intercalada entre el árbol completo de HTML y la barra de herramientas superior. Haz clic en cualquiera de los elementos de esta fila y mantenlo presionado para abrir un menú extensivo. Aquí tienes una guía (incompleta) de las opciones disponibles: [6]
    • La opción "Editar como HTML" hace que el nodo y todo el contenido del árbol HTML sea editable, para que no tengas que editar cada línea en forma individual.
    • La opción "Copiar el HTML interno" copia todo el contenido del nodo, mientras que "Copiar el HTML externo" copia también el nodo (such as <div> or <body>
    • "Pegar →" conduce a varias opciones acerca de dónde pegar el texto copiado. Por ejemplo, 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 con él. El efecto exacto se determinará de acuerdo con la hoja de estilo CSS (editable desde el panel del lado derecho).
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/44\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/44\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para reordenar elementos en el código, haz clic y mantén presionado el HTML hasta que aparezca una línea discontinua. Muévelo hacia abajo o hacia arriba del árbol y suéltalo cuando la línea discontinua esté en el lugar deseado.
    • Para esto, es necesario tener Firefox 39 o una versión posterior. [7]
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/79\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/79\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para cerrar todas estas lindas ventanas, simplemente presiona X en la esquina superior derecha de la barra de herramientas, arriba del panel de código CSS.
    Anuncio

Consejos

  • También puedes abrir la barra de herramientas con estas opciones del menú superior: [8]

    • Windows: Firefox → Desarrollador web → Mostrar herramientas
    • Mac o Linux: Tools → Desarrollador web → Mostrar herramientas
  • Firefox 40 introdujo la opción de ocultar el panel CSS para darte más espacio al editar el HTML. [9] Busca el ícono de la flecha en el extremo derecho de la fila de breadcrumbs que está a la derecha de la barra de búsqueda. Haz clic en este ícono para ocultar el panel CSS y haz clic en él otra vez para volver a expandirlo.
  • El panel CSS también puede editarse, pero eso está fuera del alcance de esta guía. Puedes buscar un tutorial básico de CSS en Internet.
Anuncio

wikiHows relacionados

Cómo
descargar todas las imágenes de una página web de una sola vez
Cómo
hacer que Firefox vaya más rápido
Cómo
configurar un proxy en Firefox
Cómo
resetear Firefox
Cómo
regresar a una versión anterior de Firefox
Cómo
usar Tor con Firefox
Cómo
bloquear y desbloquear sitios de Internet con Firefox
Cómo
desactivar el script que evita hacer clic derecho en Firefox
Cómo
bloquear sitios web en Firefox
Cómo
activar Java en Firefox
Cómo
tomar una captura de pantalla en Firefox
Cómo
iniciar Firefox en modo seguro
Cómo
crear una cuenta de Firefox
Cómo
hacer que Firefox deje de consumir tantos ciclos de CPU
Anuncio

Referencias

  1. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour
  2. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  3. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element
  4. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  5. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  6. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  7. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  8. ↑ https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox
  9. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 46 968 visitas.

¿Te ayudó este artículo?

Anuncio