Desde Firefox 32 la anotación también incluye el tamaño del elemento:Utiliza el Inspector para examinar y modificar el HTML y CSS de una página.
Puedes examinar las páginas cargadas en la copia local de Firefox o en un dispositivo remoto como Firefox para Android. Ver depuración remota para aprender a conectar las herramientas de desarrollo a un dispositivo remoto.
El Tour por la UI es un breve recorrido para aprender a usar el Inspector.
Para saber más sobre lo que puedes hacer con el Inspector, lee las siguientes guías:
Hay varias formas de abrir el Inspector:
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.
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.
{{EmbedYouTube("zBYEg40ByCM")}}
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:
{{EmbedYouTube("y2LcsxE2pR0")}}
Tenga en cuenta que a partir de Firefox 32, el botón "Seleccionar elemento" está en el extremo izquierdo de la barra de herramientas:
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:
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.
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.
Encima del panel , hay una barra de herramientas dedicada, dividida en dos secciones.
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
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.
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):
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.
Verás que aparece una muestra de color junto a sus valores numéricos:
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:
{{EmbedYouTube("0Zx1TN21QOo")}}
Verás una vista previa de imágenes especificas utilizando Imagen de fondo si te detienes sobre la regla:
Transformar la visualizaciónSi 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:
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 :
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.
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.
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.
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:
Antes de Firefox 30, la vista del modelo de caja era el siguiente:
A partir de Firefox 30, se ha simplificado:
posicion.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.
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:
Firefox complementos puede acceder a los siguientes objetos desde chrome://browser/content/devtools/inspector/inspector.xul context:
Definido en inspector-panel.js. Atributos y funciones:
Capacidad de enlazar eventos en:
LLamado cuando el panel izquierdo ha sido renovado, despues del cambio de página.
LLamado cuando se ha cargado el primer markup.
LLamado despues comando de seudoclase.
"Evento de cambio de baja prioridad para cosas como pintar o cambiar el tamaño."
{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}
{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}