We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Puedes examinar y editar el HTML de la página en el panel HTML.

HTML breadcrumbs (migas de pan)

En la parte inferior del panel HTML hay una barra de navegación de migas de pan. Muestra la jerarquía completa en el documento para la rama que contiene el elemento seleccionado:

Pasar el ratón sobre cada miguita de pan destaca ese elemento de la página.

La barra breadcrumbs tiene sus propios atajos de teclado.

Ten en cuenta que antes de Firefox 48, esta barra de herramientas estaba en la parte superior del panel HTML.

Buscar

A partir de Firefox 45, el campo de búsqueda del Inspector de páginas busca coincidencias en todo el marcado del documento actual y en cualquier frame.

Para empezar a buscar un marcador, haz clic en el cuadro de búsqueda para expandirlo o presiona Ctrl + F , o Cmd + F en Mac.

A medida que escribes, en la ventana emergente se autocompletarán sugerencias con los atributos de clase o de ID que coincidan con el término de búsqueda actual:

Presiona Up y Down para desplazarte por las sugerencias, Tab para elegir la sugerencia actual y entonces Enter para seleccionar el primer nodo con ese atributo.

Si sólo introduces el término de búsqueda sin seleccionar un valor entre las sugerencias, el término de búsqueda se aplicará al texto completo del documento, incluyendo todos los nombres y valores de atributos y el contenido de texto de los nodos.

Para desplazarte por las sugerencias presiona Enter . A partir de Firefox 48 es posible el desplazamiento hacia atrás con Shift + Enter .

Árbol HTML

El resto del panel muestra el HTML de la página como un árbol (esta interfaz de usuario también se llama Vista de marcado). Justo a la izquierda de cada nodo hay una flecha: haz clic en la flecha para desplegar el nodo. Si mantienes pulsada la tecla Alt mientras haces clic en la flecha, se desplegará el nodo y todos los nodos situados debajo de él.

The new Firefox 57 inspector HTML tree.

Mover el ratón sobre un nodo del árbol destaca el elemento en la página.

Los nodos no-visibles se representan descoloridos o desaturados. La invisibilidad puede deberse a razones diversas, entre ellas el uso de display: none, o que el elemento no tenga ninguna dimensión.

A partir de Firefox 53 se muestra una elipsis entre la etiqueta de apertura y cierre de un elemento si el nodo está colapsado y contiene más contenido. Antes de Firefox 53, era imposible determinar si un nodo colapsado tenía hijos. Ahora los hijos se indican en el árbol con este icono:

Nota: Hay atajos de teclado útiles para usar en el árbol HTML — ve a la lista de atajos de teclado del panel HTML.

::before y ::after

Desde Firefox 35 en adelante, puede inspeccionar los pseudoelementos añadidos usando ::before y ::after:

Whitespace-only text nodes

Nuevo en Firefox 52

Los desarrolladores web no escriben todo su código en una sola línea de texto. Introducen espacios en blanco con Space , Return , y Tab entre sus elementos HTML para que el marcado sea más legible.

Normalmente este espacio en blanco parece no tener efecto ni salida visual, pero de hecho, cuando un navegador analiza HTML genera automáticamente nodos de texto anónimos para elementos que no están contenidos en un nodo. Esto incluye los espacios en blanco que hay después de cualquier tipo de texto.

Si estos nodos de texto generados automáticamente están inline level, los navegadores les asignarán una anchura y altura distinta de cero. Así puede que encuentres espacios extraños entre los elementos, incluso si no has puesto ningún margen o relleno en ellos.

Desde Firefox 52, el Inspector muestra los nodos whitespace para que puedas saber de dónde vienen los huecos en su marcado.

Los nodos Whitespace se representan con un punto: y cuando pasas el ratón sobre ellos muestra un tooltip explicativo

Para ver esto en la práctica ve a la demo en https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.

Elemento: menú contextual emergente

Puedes realizar ciertas tareas comunes en un elemento utilizando su menú contextual emergente. Para activar este menú, haz clic derecho en el elemento. El menú contiene los siguientes elementos - haz clic en los enlaces para encontrar la descripción de cada comando en Context menu reference:

* Estas opciones sólo aparecen en determinados contextos, por ejemplo, la opción "Abrir archivo en el editor de estilo" sólo aparece cuando haces clic con el botón contextual sobre el enlace a un archivo CSS.

Context menu reference

Nota: A partir de Firefox 49 el menú contextual se reorganizó significativamente para hacerlo más compacto. No te preocupes si la estructura de tu menú es ligeramente diferente de la que se muestra arriba: estarán disponibles las mismas opciones

Edit as /en-US/docs/HTML

Editar el HTML del elemento

(Copy) Inner HTML Copiar el HTML interno para el elemento.
(Copy) Outer HTML

Copiar el HTML externo para el elemento.

Presione Ctrl + C (o Cmd + C en Mac) realiza la misma acción.

(Copy) Unique Selector/CSS Selector Copiar el selector CSS que selecciona únicamente el elemento
(Copy) CSS Path Copiar el selector CSS que representa la ruta completa al elemento.
(Copy) Image Data-URL Copiar imagen como data:// URL, l elemento selecionado es una imagen
(Copy) Attribute

Copiar el atributo del elemento.

Show DOM P/en-US/docs/roperties Abrir la split console e introducir el comando "inspect($0)" para inspect el elemento actualmente selecionado.
Use in Console Asigna el nodo actualmente seleccionado a una variable llamada temp0 (o temp1 si temp0 esta ya asignado, y así sucesivamente), entonces abre la split console,que le permite interactuar con ese nodo utilizando la línea de comandos de la consola.
Expand All

Nuevo en Firefox 44

En la vista de árbol, expande el elemento actual y todos los elementos debajo de él. Esto equivale a mantener presionada la tecla Alt y hacer clic en el triángulo antes del elemento.
Collapse

Nuevo en Firefox 44

En la vista de árbol, contrae el elemento actual. Esto equivale a hacer clic en la flecha de acceso situada junto al elemento que se ha expandido.
(Paste) Inner HTML Pegar el contenido del portapapeles en el nodo como su HTML interno.
(Paste) Outer HTML Pegar el contenido del portapapeles en el nodo como su HTML externo.
(Paste) Before Pegar el contenido del portapapeles en el documento inmediatamente antes de este nodo
(Paste) After Pegar el contenido del portapapeles en el documento inmediatamente después de este nodo
(Paste) As First Child Pegar el contenido del portapapeles en el documento como primerdescendiente de este nodo
(Paste) As Last Child Pegar el contenido del portapapeles en el documento como último descendiente de este nodo
Scroll Into View

Desplazamiento en la página web para que el nodo seleccionado sea visible.

Desde Firefox 44, pulsando el atajo de teclado S también sirve para desplazarse en la página hasta que el nodo seleccionado está a la vista.

Screenshot Node Hace una captura del nodo seleccionado y la guarda en tu directorio de Descargas. Ver Taking screenshots.
Create New Node Crea un nuevo elemento <div> como último descendiente del elemento actualmente seleccionado. Ver Inserting new nodes.
Duplicate Node

Nuevo en Firefox 44

Crear una copia de este elemento e insertarla inmediatamente antes de este elemento.

Delete Node Elimina el elemento del DOM.
Attribute/Add Attribute

Nuevo en Firefox 44

Añade un atributo al elemento.
Attribute/Edit Attribute

Nuevo en Firefox 44

(solo cuando se invoca en un atributo) Editar el atributo.
Attribute/Remove Attribute

Nuevo en Firefox 44

(solo cuando se invoca en un atributo) Suprimir el atributo.
Open Link in New Tab (solo cuando se invoca sobre un enlace como atributo href) Abrir el item enlazado en una nueva pestaña.
Open File in Debugger (solo cuando se invoca sobre un enlace a un archivo de código JS) Abrir el archivo enlazado en el depurador.
Open File in Style-Editor (solo cuando se invoca sobre un enlace a un archivo de código CSS) Abrir el archivo CSS enlazado en un editor de estilos
Copy Link Address (solo cuando se invoca en una URL) Copiar la URL.
:hover Selecciona la pseudoclase CSS :hover
:active Selecciona la pseudoclase CSS :active
:focus Selecciona la pseudoclase CSS :focus CSS

Editar HTML

 

Puedes editar el HTML - etiquetas, atributos y contenido - directamente en el panel HTML: haz doble clic en el texto que quieras editar, modifícalo y pulsa Enter para ver los cambios reflejados inmediatamente.

Para editar el HTML externo de un elemento (HTML externo), activa el menú emergente del elemento y selecciona "Editar como HTML". Verás un cuadro de texto en el panel HTML:

Edit HTML directly in the Inspector panel in Firefox 57

Aquí puedes añadir cualquier HTML: cambiar la etiqueta del elemento, cambiar elementos existentes o añadir otros nuevos. Una vez que hagas clic fuera del cuadro, los cambios se aplican a la página.

A partir de Firefox 52, si estás editando HTML, el menú contextual que verás es el habitual al trabajar con texto editable:

Copiar y pegar

Puedes usar el menú emergente desplegable para copiar nodos en el árbol HTML y pegarlos en la ubicación deseada.

Arrastrar y Soltar (Drag and drop)

Puedes editar HTML moviendo nodos en el árbol HTML. Simplemente haz clic manteniendo presionado sobre cualquier elemento y arrástralo hacia arriba o hacia abajo en el árbol. Cuando sueltes el botón del ratón, el elemento se insertará en la posición correspondiente:

A partir de Firefox 44, puedes cancelar el arrastrar y soltar pulsando la tecla Esc .

Insertar nuevos nodos

Nuevo en Firefox 48

A partir de Firefox 48, hay un icono "+" en la parte superior de la vista de marcado:

Haz clic en este icono para insertar un <div> vacío en el documento como el último hijo del elemento seleccionado actualmente. A continuación, puedes editar el contenido y el estilo del nuevo nodo tal como lo harías con cualquier otro nodo del documento.

Puedes acceder a la misma funcionalidad utilizando el menú desplegable "Crear nuevo nodo".

Ten en cuenta que este botón está desactivado si el tipo de elemento seleccionado es tal que añadir un último hijo no produciría ningún efecto (por ejemplo, si es un elemento <html> o <iframe>). Sin embargo, está habilitado en lugares donde no es válido insertar <div>, como <style> o <link>. En estos casos, el elemento se añade como texto.

Etiquetas y colaboradores del documento

Colaboradores en esta página: amaiafilo
Última actualización por: amaiafilo,