Acerca de la lista de herramientas

DevTools proporciona más de 30 herramientas, que constan de herramientas predeterminadas y más herramientas.

Herramientas predeterminadas

De forma predeterminada, las siguientes herramientas se muestran en la barra de actividades en la parte superior de DevTools:

• Inspeccionar herramienta
• Emulación de dispositivo
• Bienvenida
• 
• Consola
• 
• Red
• Rendimiento
• Memoria
• Aplicación

Información general sobre las herramientas predeterminadas

Herramienta	Objetivo	Artículo
Inspeccionar Inspeccionar	Use la herramienta Inspeccionar para ver información sobre un elemento dentro de una página web representada. Cuando la herramienta Inspeccionar está activa, pasa el ratón por encima de los elementos de la página web, y DevTools agrega una superposición de información y un resaltado de cuadrícula en la página web.	Analizar páginas con la herramienta Inspeccionar
Emulación de dispositivo	Usa la herramienta de emulación de dispositivo , también denominada modo de simulación de dispositivo o modo de dispositivo, para aproximar el aspecto y la respuesta de la página en un dispositivo móvil.	Emular dispositivos móviles (emulación de dispositivo)
Bienvenida	La herramienta de bienvenida se abre la primera vez que abre DevTools. Muestra vínculos a documentos para desarrolladores, las características más recientes, notas de la versión y una opción para contactar con el equipo Microsoft Edge DevTools.	Herramienta Bienvenida
	Inspeccione, edite y depure el HTML y el CSS. Puede editar en la herramienta mientras muestra los cambios en el explorador en tiempo real. Depure el HTML con el árbol DOM e inspeccione y trabaje en el CSS de la página web.	Inspección, edición y depuración de HTML y CSS con la herramienta Elementos
Consola	Una línea de comandos inteligente y enriquecida dentro de DevTools. Una gran herramienta complementaria para usar con otras herramientas. Proporciona una manera eficaz de programar la funcionalidad de scripts, inspeccionar la página web actual y manipular la página web actual con JavaScript.	Información general sobre la consola
	Use la herramienta Orígenes para ver, modificar y depurar código JavaScript front-end, e inspeccionar y editar los archivos HTML y CSS que componen la página web actual.	Información general sobre la herramienta Orígenes
Red	Use la herramienta Red para asegurarse de que los recursos se descargan o cargan según lo previsto. Inspeccione las propiedades de un recurso individual, como los encabezados HTTP, el contenido o el tamaño.	Inspeccionar actividad de red
Rendimiento	Analizar el rendimiento en tiempo de ejecución, que es el rendimiento de la página cuando se está ejecutando, en lugar de cargarse.	Analizar el rendimiento en tiempo de ejecución (tutorial)
Memoria	Encontrar problemas de memoria que afecten al rendimiento de la página, como pérdidas de memoria, hinchazón de memoria y recolecciones frecuentes de elementos no utilizados.	Solucionar problemas de memoria
Aplicación	Use la herramienta Aplicación para administrar el almacenamiento de páginas de aplicaciones web, incluidos manifiestos, trabajos de servicio, almacenamiento local, cookies, almacenamiento de caché y servicios en segundo plano.	La herramienta Aplicación, para administrar el almacenamiento

Las herramientas Elementos, Consola y Orígenes (pestañas) son permanentes en la barra de actividades. Las otras pestañas de herramientas se pueden quitar o mover hacia abajo a la barra de herramientas de Vista rápida .

Más herramientas

El botón Más herramientas () de la Barra de Actividades muestra otras herramientas opcionales que se pueden agregar a la Barra de Actividades.

También hay un botón Más herramientas () en la barra de herramientas de Vista rápida en la parte inferior de DevTools. Para mostrar u ocultar el panel Vista rápida , presione Esc; o haga clic en Personalizar y controlar DevTools (...) en la esquina superior derecha y, a continuación, haga clic en Alternar el panel Vista rápida.

Información general sobre herramientas en el menú Más herramientas

Herramienta	Objetivo	Artículo
Vista 3D	Explore la página web traducida a una perspectiva 3D. Depure la página web navegando por el contexto de apilamiento DOM o índice z.	Navegar por las capas de página web, índice z y DOM mediante la herramienta Vista 3D
Animaciones	Inspeccione y modifique los efectos de animación CSS mediante el Inspector de animación de la herramienta Animaciones .	Inspeccionar y modificar efectos de animación CSS
Cambios	Realiza un seguimiento de los cambios realizados en CSS o JavaScript en DevTools. Muestra qué cambios realizar en los archivos de origen reales después de usar DevTools para modificar los archivos de página web enviados desde el servidor.	Realizar un seguimiento de los cambios en los archivos mediante la herramienta Cambios
Cobertura	Le ayuda a encontrar código JavaScript y CSS sin usar, para acelerar la carga de su página y ahorrar datos móviles a sus usuarios móviles.	Buscar código JavaScript y CSS sin usar con la herramienta Cobertura
Analizador de bloqueos	Analice los bloqueos de la aplicación web. Puede introducir un seguimiento de pila de producción de JavaScript, por ejemplo, para excepciones de JavaScript no graves, y después aplicar los mapas de origen al seguimiento de pila para que pueda depurar más rápido.	Herramienta Analizador de bloqueos
Información general de CSS	Ayudarle a comprender mejor el CSS de la página e identificar posibles mejoras.	Herramienta de información general de CSS
Recursos para programadores	Muestra direcciones URL de recursos de la página web.	Herramienta Recursos para desarrolladores
Issues	La herramienta Problemas analiza automáticamente la página web actual, informa de los problemas agrupados por tipo y proporciona documentación para ayudar a explicar y resolver los problemas.	Buscar y corregir problemas con la herramienta Problemas
Faro	Use la herramienta Lighthouse para identificar y corregir problemas comunes que afectan al rendimiento, la accesibilidad y la experiencia del usuario de su sitio.	Herramienta Faro
Media	Use esta herramienta para ver información y depurar los reproductores multimedia por pestaña del explorador.	Ver y depurar información del Reproductor multimedia (herramienta multimedia)
Inspector de memoria	Inspeccionar ArrayBuffer de JavaScript con el inspector de memoria.	Inspección de un arrayBuffer de JavaScript con la herramienta Inspector de memoria
Condiciones de red	Utilice la herramienta Condiciones de red para deshabilitar la caché del explorador, establecer la limitación de red, establecer la cadena de agente de usuario y establecer codificaciones de contenido como deflate, gzip y br.	Herramienta Condiciones de red
Consola de red	Utilice la herramienta Consola de red para realizar cambios en las solicitudes de red (llamadas de red) para ver por qué se producen errores. Cambie y reproduzca cualquiera de las solicitudes de red y realice llamadas API de red detalladas.	Herramienta Consola de red
Bloqueo de solicitudes de red	Use la herramienta Bloqueo de solicitudes de red para probar el bloqueo de solicitudes de red en un patrón de dirección URL especificado y ver cómo se comporta una página web.	Herramienta Bloqueo de la solicitud de red
Monitor de rendimiento	Proporciona una vista en tiempo real del rendimiento en tiempo de ejecución de una página web para determinar de dónde proceden los problemas de rendimiento, lo que hace que un sitio web se ejecute lentamente. Comprueba si los problemas se deben al uso elevado de memoria o CPU, a los cálculos de diseño y estilo demasiado frecuentes o a demasiados nodos DOM y detectores de eventos.	Medir el rendimiento en tiempo de ejecución de una página mediante la herramienta Monitor de rendimiento
Origen rápido	Use la herramienta Origen rápido para mostrar o editar archivos de origen cuando utilice una herramienta distinta de la herramienta Orígenes .	Mostrar o editar archivos de origen con la herramienta Origen rápido
Grabadora	Use la herramienta Grabadora para registrar los flujos de usuario manualmente y, a continuación, reproducirlos automáticamente para acelerar las pruebas y las investigaciones de rendimiento.	Registrar y reproducir flujos de usuario y medir el rendimiento
Representación	Use la herramienta Representación para ver cómo se ve su página web con diferentes opciones de visualización o deficiencias de visión.	Herramienta de renderización, para ver cómo se ve una página web con diferentes opciones de visualización o deficiencias de visión
Búsqueda	Usa la herramienta de búsqueda para buscar archivos de origen específicos para una página web, incluidos archivos HTML, CSS, JavaScript y de imagen.	Buscar archivos de origen para una página con la herramienta Búsqueda
Seguridad	Inspecciona la seguridad de una página.	Comprender los problemas de seguridad mediante la herramienta Seguridad
Sensores	Invalide la geolocalización, simule la orientación del dispositivo, fuerce eventos táctiles al hacer clic y emule el estado inactivo del dispositivo.	Emular sensores de dispositivo
Monitor de mapas de origen	Utilice la herramienta Monitor de mapas de origen para supervisar los mapas de origen.	Herramienta Monitor de mapas de origen
WebAudio	Use la herramienta WebAudio para supervisar el tráfico de WebAudio. La herramienta WebAudio usa la API WebAudio.	Herramienta WebAudio
WebAuthn	Use la herramienta WebAuthn para crear autenticadores virtuales basados en software e interactuar con ellos.	Emular autenticadores y depurar WebAuthn

El menú Más herramientas (+) de la barra de Actividades y de la barra de herramientas Vista rápida es dinámico: omite las herramientas de pestaña que están abiertas en esa barra de herramientas.

Otras formas de acceder a las herramientas

Las siguientes características son formas adicionales de acceder a las herramientas:

• El panel Vista rápida es una barra de herramientas adicional y un área para guardar herramientas, debajo o a la derecha del panel de la Barra de Actividades .

• El menú de comandos es una forma de usar directamente las características de las herramientas.

• Las páginas de configuración pueden activar características adicionales de herramientas.

Herramientas experimentales

Microsoft Edge DevTools puede incluir herramientas adicionales si selecciona la casilla del experimento en la configuración >de experimentos de DevTools. Por ejemplo:

Herramienta	Objetivo	Artículo
Monitor de protocolo	Muestra los mensajes del protocolo DevTools que DevTools envía y recibe para depurar la página inspeccionada.	Monitor de protocolo en Características experimentales.

Herramientas de la barra de actividades frente a herramientas de vista rápida

Las herramientas de la Barra de Actividades se abren en la Barra de Actividades (el panel superior) de forma predeterminada. Las herramientas de Vista rápida se abren en el panel Vista rápida (el panel inferior) de forma predeterminada. Para mostrar u ocultar el panel Vista rápida : cuando el foco esté en DevTools, presione la tecla Esc.

En primer lugar, el menú de comandos muestra las herramientas de la Barra de actividades (indicadas por la etiqueta del Panel ) y, a continuación, las herramientas de Vista rápida :

Para mover una herramienta a la otra barra de herramientas, haga clic con el botón derecho en la pestaña de la herramienta y después seleccione Mover a la vista rápida inferior, Mover a la vista rápida lateral o Mover a la barra de actividades superior:

Para abrir el menú de comandos, presione Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS). O bien, haga clic en el botón Personalizar y controlar DevTools () y seleccione Ejecutar comando.

Cerrar pestañas de herramientas

Para cerrar una pestaña de herramientas que se encuentra en una barra de herramientas, haga clic con el botón secundario en la pestaña y, a continuación, seleccione Quitar de la Barra de Actividades o Quitar de la Vista rápida:

Las herramientas Elementos, Consola y Orígenes son pestañas permanentes y no se pueden cerrar ni mover de la Barra de Actividades al panel Vista rápida . Puede arrastrar sus pestañas para reordenarlas en la Barra de Actividades.

La herramienta Consola es también una pestaña permanente en la barra de herramientas de Vista rápida . En cambio, se puede quitar la herramienta Problemas de la barra de herramientas de Vista rápida .

Restaurar las pestañas de herramientas predeterminadas

Para restaurar todas las pestañas de herramientas predeterminadas de la Barra de Actividades y la Vista rápida:

1. En DevTools, seleccione Personalizar y controlar DevTools () >Configuración () >Preferencias.

2. Haga clic en el botón Restaurar valores predeterminados y actualizar . DevTools se reinicia y las pestañas predeterminadas aparecen en ambas barras de herramientas.

Vea también

• Información general sobre DevTools : similar al presente artículo, pero con una cobertura más amplia, con una introducción de nivel superior a DevTools.