Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Inspector de Página

Utilice el Inspector para examinar y modificar la estructura y el diseño de una página.

Abriendo el Inspector

Hay varias formas de abrir el Inspector:

  • Elegir la opción de "Inspector" en el menú "Web Developer" (que es un submenú en el menú "Herramientas" en Mac)
  • Pulse Ctrl-Shift-C (Cmd + Opción + C en Mac OS X y Linux)
  • Haz clic derecho en un elemento de una página web y selecciona "Inspeccionar elemento"

La Caja de herramientas aparecerá en la parte inferior de la ventana del navegador, con el Inspector activado.

Si ha invocado el Inspector, haga clic en "Inspeccionar elemento", entonces ya estará seleccionado el elemento y el Inspector se mostrará y funcionará como lo hace en la "Selección de elementos" abajo.

De lo contrario, al mover el ratón por la página, el elemento bajo el puntero del ratón se resalta con un borde punteado y una anotación muestra su etiqueta HTML y cualquier atributo de clase o ID. Al mismo tiempo, se muestra la definición de HTML, en el contexto, en el panel de la izquierda del Inspector. Desde Firefox 30, también se muestran las líneas de cuadrícula para el elemento y su modelo de caja:

Desde Firefox 32 la anotación también incluye el tamaño del elemento:

Al hacer clic en el elemento lo selecciona: Después de que hayas seleccionado un elemento, el Inspector se mostrará y funcionará como lo hace en la "Selección de elementos" abajo.

Selección de elementos

Cuando se selecciona un elemento, su marcado se resalta en el panel HTML a la izquierda del Inspector, y el panel de CSS a la derecha del Inspector muestra su información de estilo:

La linea de puntos alrededor del elemento de la página, y la anotación para ello, ya no se muestra una vez que un elemento ha sido seleccionado. Asimismo, el Inspector no está bloqueado en el elemento seleccionado: cuando se mueve el ratón alrededor de la marcación en el panel HTML, la linea punteada se muestra alrededor del elemento correspondiente. Para seleccionar un elemento diferente en la página web, haz clic en el botón "Seleccionar elemento", que aparece en la Caja de herramientas.

Firefox 30 en adelante

De Firefox 30, el comportamiento de la selección es el mismo que en Firefox 29, pero el inspector también muestra el modelo de caja y  rejilla de líneas para los elementos en la página:

Firefox 32 en adelante

Tenga en cuenta que a partir de Firefox 32, el botón "Seleccionar elemento" está en el extremo izquierdo de la barra de herramientas:

Menú emergente del elemento

Puedes llevar a cabo ciertas tareas comunes en un nodo específico mediante un menú emergente. Para activar este menú contextual haz clic en el elemento, en el panel HTML:

El menú ofrece opciones para:

  • Modificar HTML del elemento.
  • Copiar el código HTML interno o externo para el elemento.
  • Copiar un selector CSS que selecciona únicamente el elemento.
  • Pegar el contenido del portapapeles en el nodo como su outerHTML (esto es nuevo en Firefox 32).
  • Eliminar el elemento.
  • Establecer el :hover, :focus, y :active CSS pseudo-classes.

Copiar imagen como URL datos

Desde Firefox 29 en adelante, si el elemento seleccionado en ese momento es una imagen, a continuación, en el menú emergente incluye una opción para copiar la imagen en el portapapeles como una URL de datos:

Edición de HTML

Para editar un elemento de outerHTML, activar el menú emergente del elemento y seleccione "Editar como HTML". Verá un cuadro de texto en el panel HTML:

Puedes agregar cualquier código HTML aquí: cambiar la etiqueta del elemento cambiando los elementos existentes, o añadiendo otros nuevos. Una vez que se hace clic fuera de la caja, los cambios se aplican a la página.

Panel de HTML

El panel de HTML, que muestra el HTML de la página como un árbol. Justo a la izquierda de cada nodo es una flecha: Haz clic en la flecha para expandir el nodo.

Puedes editar el HTML - etiquetas, atributos y contenido - directamente en este panel: Haz clic en el elemento que deseas editar, cambiar, y pulsa Enter para ver los cambios reflejados inmediatamente.

Haciendo click en el contenido de un elemento se muestra un menu emergente para trabajar con ese elemento...

A partir de Firefox 31 en adelante, si se mantiene pulsada la tecla Alt mientras se hace clic en la flecha, se expande el nodo y todos los nodos por debajo de ella.

 A partir de Firefox 32 en adelante, los nodos que están ocultos usando  display:none se muestran descoloridos.

Barra de herramientas del panel HTML

Encima del panel , hay una barra de herramientas dedicada, dividida en dos secciones.

  •  HTML Breadcrumbs: Este muestra la jerarquía completa a través del documento para la rama que contiene el elemento seleccionado. Si se mantiene pulsado el botón sobre uno de los elementos en la barra, aparece un menú emergente que le permite seleccionar uno de los hermanos de ese elemento. Al hacer clic en los pequeños iconos de flecha de los extremos izquierdo y derecho de la barra, se desplazará la barra si es más ancha que el espacio disponible.
  • Search tags: Busca etiquetas para la página que escribes. Al pulsar "Enter" aparece lo que ha encontrado a continuación.

Panel CSS

El panel de CSS muestra la información acerca de los estilos aplicados al elemento actualmente seleccionado. Hay cuatro puntos de vista diferentes: "Reglas", "computarizada", "Fuentes" y "modelo de caja". Se puede cambiar entre ellas utilizando la barra de herramientas en la parte superior del panel:

VISTA DE REGLAS

Esta vista muestra todas las reglas que se aplican al elemento seleccionado, ordenadas desde la más específica, hasta la menos específica:

 

La vista de reglas muestra la lista de seudo-elementos, y las reglas que se aplican.

A partir de Firefox 32 en adelante,el listado de vista de reglas, usuario-agente-estilos (estilos aplicados por el navegador) si la opción de hacerlo se revisa en los ajustes de herramientas de desarrollador. Tenga en cuenta que este ajuste es independiente de la casilla de verificación "Estilos de navegador" en la vista computarizada.

Muestra de reglas

Esta muestra cada regla como una hoja de estilos, con una lista de selectores seguida por una lista de  declaraciones. (property:value;)

Las reglas que se han invalidado por normas posteriores están tachadas. Si se pasa el ratón sobre una declaración, una casilla de verificación aparece junto a ella: Se puede usar esta opción para alternar el estado  de la regla de encendido a apagado.

Usuario-agente-estilos se muestra  en un gris oscuro, y el vínculo y el número de linea contiene el prefijo (user agent):

Vínculo al archivo CSS

En la parte superior derecha de cada regla, el nombre del archivo de procedencia y el numero de linea se muestran como un vínculo: Haciendo click en este ,se abre el archivo en el   Editor de estilos.

El Inspector entiende los mapas de procedencia del CSS. Eso significa que si usted está usando un preprocesador CSS que tiene soporte para mapas fuente, y ha habilitado el apoyo de mapa de origen en los ajustes de editor de estilos , a continuación, el enlace le llevará a la fuente original, no al CSS generado.

Leer más sobre el soporte para  mapas de procedencia de CSS  en la documentación del editor de estilos.

Muestras de color

Verás que aparece una muestra de color junto a sus valores numéricos:

Selector de color

Si haces click en la muestra de color, verás aparecer un selector de color, que te permite  cambiarlo:

A partir de Firefox 31 en adelante, el selector de color incluye un icono de cuentagotas: Al hacer clic en este icono se  permite utilizar el cuentagotas para seleccionar un nuevo color para el elemento de la página:

 

Previsualización de la imagen de fondo

Verás una vista previa de imágenes especificas utilizando Imagen de fondo si te detienes sobre la regla:

Transformar la visualización

Si se pasa sobre una propiedad de transformación en la vista de reglas, se obtiene una información sobre herramientas, que visualiza la transformación  que se lleva a cabo:

Herramienta informativa fuente-familia

Esto es nuevo en Firefox 30.

A partir de Firefox 30 en adelante,  si pasas sobre una propiedad fuente-familia  en la Vista de Reglas, consigues una información con una muestra sobre ese tipo de letra :

Edición de Reglas

Si haces click en una declaración,puedes modificar esa propiedad o valor, y ves el resultado inmediatamente. Para añadir una nueva declaración a una regla, haces click sobre la última linea de la regla (la linea ocupada por la llave de cierre). Si introduces un valor no válido para una propiedad mientras lo estás editando, o el nombre de una propiedad desconocida, un icono de alerta amarillo aparece bajo  la declaración.

Cualquier cambio que se realice es temporal: Al volver a cargar la página , se restablecerá el estilo original.

Consejo: Puedes utilizar las teclas de flecha para aumentar/disminuir reglas numéricas mientras realizas la edición. La flecha hacia arriba cambiará  "1px" a  2px,  y Shift+up/down la aumentará o disminuira en 10. Alt+up/down cambiará los valores en  0.1, y shift+Page up/down  sumará o restará  100 al valor.

Vista computada

Esta vista organiza el estilo del elemento por propiedades. En  esta lista se enumeran todas las propiedades CSS que se han aplicado a este elemento en orden alfabétiico: Muestra el valor calculado que cada propiedad CSS tiene para el elemento seleccionado :

Al hacer click en la flecha junto al nombre de la propiedad ,muestra la regla que establece ese valor , junto a un enlace al nombre del archivo de origen y el número de linea :

Por defecto, solo muestra los valores que han sido explicitamente establecidos para esa página: Para ver todos los valores haz click en el cuadro de "Estilos del navegador" .

Escribir en el buscador realiza un filtrado directo de la lista , por lo que, por ejemplo,si lo que deseas es ver los ajustes relacionados con la fuente, puedes escribir "fuente" en el buscador, y unicamente las propiedades con "fuente" en el nombre seran listadas. Tambien puedes buscar por los valores de las propiedades: Para encontrar la regla responsable de establecer la fuente "Lucida Grande", escribe eso en el buscador.

Vista de fuentes

Esta muestra todas las fuentes utilizadas por el elemento seleccionado. Tenga en cuenta que muestra el tipo de letra utilizado en su sistema, que puede ser diferente a las especificadas en el css:

El texto en la vista de fuentes es  "Abc" por defecto,pero  en realidad  es un area de texto y puede ser editado libremente.

Vista modelo de caja

Esta muestra una representación gráfica de como el  modelo de caja se aplica a este elemento. A partir de  Firefox 30, mientras el ratón está en vista del modelo de caja, las lineas de cuadrícula y el modelo de caja para el elemento de la página son mostradas:

Vista detallada del modelo de caja

 Antes de Firefox 30, la vista del modelo de caja era el siguiente:

  • En la parte superior izquierda  está el espacio total tomado por el elemento en la página.
  • Los números externos  te dicen el tamaño del margen a cada lado del elemento.
  • Los números en los bordes cuadrados  te dicen cual es la anchura del borde de cada lado.
  • La siguiente capa muestra el tamaño del relleno a cada lado del elemento .
  • Finalmente, en el centro, está el tamaño del contenido del elemento.

A partir de Firefox 30, se ha simplificado:

  • La parte superior izquierda todavía muestra el tamaño tomado por el elemento en la página (contenido + relleno).
  • El centro todavía muestra el tamaño del contenido.
  • La parte superior derecha muestra el valor de la propiedad posicion.
  • Los valores individuales para el relleno, borde, y margen están donde podrías esperar.

A partir de Firefox 31, si haces click sobre uno de los números  en la vista modelo de caja, puedes modificar el valor y ver el resultado en la página inmediatamente.

Utilización del Inspector de Página en la Consola Web

El elemento seleccionado en ese momento en el  inspector de página , en su caso, puede ser referenciado en  JavaScript en la Cónsola web utilizando la variable $0.

Además, a partir de  Firefox 30, si pasas sobre el elemento en la salida de la Cónsola Web ,este es resaltado en la pantalla:

 API para desarrolladores

Firefox complementos puede acceder a los siguientes objetos desde chrome://browser/content/devtools/inspector/inspector.xul context:

ventana.inspector

Definido en inspector-panel.js. Atributos y funciones:

  • .selection - información sobre la selección del inspector:
    • .isNode() - devuelve verdadero si la selección es el nodo.
    • .node - devuelve el elemento actual desde la página.
    • .window - El objeto seleccionado de la estructura está en la ventana.
  • .markDirty() - marca la página que ha sido cambiada por el inspector - un aviso será mostrado cuando se abandone la página, ya que los cambios realizados  a traves del inspector, serán incorporados al recargar la página.

Capacidad de enlazar eventos en:

  Markup cargado

LLamado cuando el panel izquierdo ha sido renovado, despues del cambio de página.

Listo

LLamado cuando se ha cargado el primer markup.

Seudoclase

LLamado despues comando de seudoclase.

Cambio de diseño

"Evento de cambio de baja prioridad para cosas como pintar o cambiar el tamaño."

Atajos de teclado

Command Windows OS X Linux
Inspect Element Ctrl + Shift + C Cmd + Opt + C Ctrl + Shift + C

HTML pane

These shortcuts work while you're in the Inspector's HTML pane.

Command Windows OS X Linux
Delete the selected node Delete Delete Delete
Undo delete of a node Ctrl + Z Cmd + Z Ctrl + Z
Redo delete of a node Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
Move to next node (expanded nodes only) Down arrow Down arrow Down arrow
Move to previous node Up arrow Up arrow Up arrow
Expand currently selected node Right arrow Right arrow Right arrow
Collapse currently selected node Right arrow Right arrow Right arrow
Step forward through the attributes of a node Tab Tab Tab
Step backward through the attributes of a node Shift + Tab Shift + Tab Shift + Tab
Start editing the selected attribute Enter Enter Enter
Hide/show the selected node H H H
Focus on the search box in the HTML pane Ctrl + F Cmd + F Ctrl + F
Edit as HTML F2 F2 F2
Copy the selected node's outer HTML (new in Firefox 42) Ctrl + C Cmd + C Ctrl + C
Scroll the selected node into view (new in Firefox 44) S S S
Find the next match in the markup, when searching is active Enter Enter Enter
Find the previous match in the markup, when searching is active (new in Firefox 48) Shift + Enter Shift + Enter Shift + Enter

CSS pane

These shortcuts work when you're in the Inspector's CSS pane.

Command Windows OS X Linux
Step forward through properties and values Tab Tab Tab
Step backwards through properties and values Shift + Tab Shift + Tab Shift + Tab
Increment selected value by one Up arrow Up arrow Up arrow
Decrement selected value by one Down arrow Down arrow Down arrow
Increment selected value by 10 Shift + Up arrow Shift + Up arrow Shift + Up arrow
Decrement selected value by 10 Shift + Down arrow Shift + Down arrow Shift + Down arrow
Increment selected value by 0.1 Alt + Up arrow Opt + Up arrow Alt + Up arrow
Decrement selected value by 0.1 Alt + Down arrow Opt + Down arrow Alt + Down arrow

Atajos globales

These shortcuts work in all tools that are hosted in the toolbox.

Command Windows OS X Linux
Increase font size Ctrl + + Cmd + + Ctrl + +
Decrease font size Ctrl + - Cmd + - Ctrl + -
Reset font size Ctrl + 0 Cmd + 0 Ctrl + 0

 

 

 

Etiquetas y colaboradores del documento

 Colaboradores en esta página: SoftwareRVG, maybe, Jacqueline, MauricioGil
 Última actualización por: SoftwareRVG,