Comparteix a través de

Introducción a DevTools

  • Article

El explorador Microsoft Edge incluye herramientas de desarrollo web integradas, denominadas Microsoft Edge DevTools. DevTools es un conjunto de herramientas de desarrollo web que aparece junto a una página web representada en el explorador. DevTools proporciona una manera eficaz de inspeccionar y depurar páginas web y aplicaciones web. Incluso puede editar archivos de origen y crear proyectos de sitio web, todo dentro del entorno de DevTools.

Con DevTools, puede hacer lo siguiente:

  • Inspeccione, ajuste y cambie los estilos de los elementos de la página web mediante herramientas dinámicas con una interfaz visual. Inspeccione dónde almacenó el contenido del explorador para construir la página web, incluidos .htmllos formatos de archivo , .css, .jsy .png .

  • Emula cómo se comporta el sitio web en diferentes dispositivos y simula un entorno móvil, completo con diferentes condiciones de red. Inspeccione el tráfico de red y vea la ubicación de los problemas.

  • Depuración de JavaScript mediante la depuración de puntos de interrupción y con la consola en directo. Busque problemas de memoria y problemas de representación con las aplicaciones web.

  • Busque problemas de accesibilidad, rendimiento, compatibilidad y seguridad en sus productos y use DevTools para corregir los problemas de accesibilidad que se encuentran.

  • Use un entorno de desarrollo para sincronizar los cambios en DevTools con el sistema de archivos y desde la web.

Vídeo: Descripción de la interfaz de usuario de DevTools

Imagen en miniatura del vídeo

En este vídeo de septiembre de 2022, un poco más antiguo, se muestra la interfaz de usuario heredada para DevTools:

  • En lugar de la barra de actividad, el vídeo muestra la barra de herramientas principal heredada.
  • En lugar del panel Vista rápida (en la parte inferior de DevTools), el vídeo muestra el cajón.

Abrir DevTools

En Microsoft Edge, puede abrir DevTools con el mouse o el teclado de cualquiera de las siguientes maneras. La herramienta que se abre depende de cómo abra DevTools.

Formas principales:

Acción Herramienta resultante
Haga clic con el botón derecho en cualquier elemento de una página web y, a continuación, seleccione Inspeccionar. La herramienta Elementos , con el árbol DOM expandido para mostrar el elemento de página con el botón derecho.
Presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). La herramienta usada anteriormente o la herramienta de bienvenida .
Presione F12. La herramienta usada anteriormente o la herramienta de bienvenida .

Formas adicionales:

Acción Herramienta resultante
En la barra de herramientas de Microsoft Edge, seleccione Configuración y mucho más (el icono ") >Más herramientas>Herramientas de desarrollo. La herramienta usada anteriormente o la herramienta de bienvenida .
Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola .
Presione Ctrl+Mayús+C (Windows, Linux) o Comando+Opción+C (macOS). La herramienta Elementos , con el árbol DOM expandido para mostrar el <body> elemento.
Presione Mayús+F10 para abrir el menú contextual. Para seleccionar el comando Inspeccionar , presione Flecha arriba y, a continuación, Entrar. La herramienta Elementos , con el árbol DOM expandido para mostrar el <html> elemento.
Presione Tab o Mayús+Tab para poner el foco en un elemento de página. A continuación, presione Mayús+F10 para abrir el menú contextual. Para seleccionar el comando Inspeccionar , presione Flecha arriba y, a continuación, Entrar. La herramienta Elementos , con el árbol DOM expandido para mostrar el elemento de página centrado.

Abra DevTools haciendo clic con el botón derecho en un elemento de una página web.

Una buena manera de abrir DevTools es hacer clic con el botón derecho en un elemento de una página web y, a continuación, seleccionar Inspeccionar:

Haga clic con el botón derecho en un vínculo Acerca de nosotros en una página web de demostración y seleccione el comando Inspeccionar.

Se abre DevTools, con el elemento con el botón derecho resaltado en el árbol DOM de la herramienta Elementos :

DevTools abierto en el lado derecho de Microsoft Edge, con un elemento DOM seleccionado en el árbol DOM de la herramienta Elementos

Abra DevTools mediante la barra de herramientas de Microsoft Edge.

En la barra de herramientas de Microsoft Edge, seleccione Configuración y más (...) >Más herramientas>Herramientas de desarrollo:

El menú

Hacer que DevTools se abra automáticamente al abrir una nueva pestaña

Para que DevTools se abra automáticamente cada vez que abra una nueva pestaña en el explorador:

  1. En la línea de comandos, abra Microsoft Edge y pase la --auto-open-devtools-for-tabs marca, como se indica a continuación:

    Símbolo del sistema de Windows:

    start msedge --auto-open-devtools-for-tabs

    Windows PowerShell:

    Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs"

    terminal macOS:

    /Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabs

    Shell de bash en Linux:

    microsoft-edge --auto-open-devtools-for-tabs
Deshabilitación de la optimización de inicio

Importante: No debe haber procesos de Microsoft Edge en ejecución al iniciar a través de auto-open-devtools-for-tabs, por lo que es posible que tenga que deshabilitar la optimización de inicio en edge://settings/system.

La característica de optimización de inicio mantiene un proceso mínimo de Microsoft Edge en ejecución en segundo plano. Esto interfiere con la auto-open-devtools-for-tabs característica y tendría que deshabilitarse para usarla. Para obtener más información, consulte Obtener ayuda con el aumento de inicio.

Desactivar el método abreviado de teclado F12

Para evitar que presionar F12 abra DevTools:

  1. En Microsoft Edge, vaya a edge://settings/system.

  2. Desplácese hacia abajo hasta la sección Herramientas de desarrollo y, a continuación, desactive la tecla Usar F12 para abrir el botón de alternancia de Herramientas de desarrollo.

    La página Configuración perimetral, con la sección Herramientas de desarrollo y el botón de alternancia para deshabilitar la tecla F12

Compatibilidad con teclado

Puede interactuar con DevTools con el mouse o el teclado. Los métodos abreviados de teclado proporcionan una forma rápida de acceder a la funcionalidad y son necesarios para la accesibilidad. Varias herramientas son cada vez más accesibles a través del teclado y las tecnologías de asistencia, como los lectores de pantalla.

Consulta Métodos abreviados de teclado y Navegar por DevTools con tecnología de asistencia.

Cambiar dónde está acoplado DevTools en el explorador

Puede acoplar DevTools en la parte derecha, izquierda o inferior del explorador, o desacoplarla en una ventana independiente. Vea Cambiar la ubicación de DevTools (Desacoplar, Acoplar a la parte inferior, Acoplar a la izquierda).

Acercar o alejar DevTools

La interfaz de usuario de DevTools se implementa mediante HTML y CSS, como páginas web, para que pueda acercar y alejar mediante los métodos abreviados de teclado estándar. Los niveles de zoom de DevTools y la página representada son independientes.

Para acercar la parte DevTools del explorador:

  1. Si el foco aún no está en DevTools, haga clic en algún lugar de DevTools.
  2. Presione Ctrl++ o Ctrl+- (Windows o Linux). O bien, presione Comando++ o Comando+- (macOS).

DevTools se ha acercado

Para acercar la página representada, haga clic en la página y, a continuación, use los mismos métodos abreviados de teclado que antes.

Para restaurar el zoom al 100 %:

  1. Asegúrese de que el foco esté en la parte deseada del explorador, ya sea DevTools o en la página representada.
  2. Presione Ctrl+0 o Ctrl+NumPad0 (Windows o Linux) o Comando+0 (macOS).

Para acercar la configuración de DevTools:

  1. En Configuración de DevTools, haga clic en Cerrar (x) en la esquina superior derecha.
  2. Cambie el nivel de zoom de DevTools, como se describió anteriormente.
  3. Haga clic en el botón Configuración (icono Configuración).

Para acercar DevTools mediante el menú Comando:

  1. Haga clic en el botón de menú Personalizar y controlar DevTools (icono Personalizar) y, a continuación, seleccione Ejecutar comando.
  2. En el menú Comando, empiece a escribir zoom y, a continuación, seleccione un comando de zoom:
    • Restablecer el nivel de zoom
    • Acercar
    • Alejar

Información general de la interfaz de usuario

La interfaz de usuario de DevTools tiene las siguientes áreas principales:

  • La barra de actividad en la parte superior o en el lado izquierdo, que contiene iconos que se usan para acceder a herramientas, configuraciones, documentación y mucho más.

    • Área de herramientas actual, donde aparece la herramienta seleccionada actualmente en la barra de actividad .

  • La barra de herramientas vista rápida , en la parte inferior, que contiene las pestañas usadas para acceder a las herramientas.

    • Área de herramientas inferior, donde aparece la herramienta seleccionada actualmente en la barra de herramientas Vista rápida .

Microsoft Edge, con DevTools abierto en el lateral, con las 4 áreas principales de la interfaz de usuario resaltadas

De forma predeterminada, la barra de actividad contiene las siguientes herramientas:

  • Botón de alternancia Inspeccionar herramienta (icono inspeccionar herramienta).

  • Botón herramienta emulación de dispositivo (icono de emulación de dispositivo).

  • Herramienta de bienvenida (icono de herramienta de bienvenida).

  • Herramienta Elementos (icono de la herramienta Elementos).

  • Herramienta de consola (icono de herramienta de consola).

  • Herramienta Orígenes (icono de herramienta Orígenes).

  • Herramienta de red (icono de herramienta de red).

  • Herramienta de rendimiento (icono de herramienta de rendimiento).

  • Herramienta Memoria (icono de herramienta Memoria).

  • Herramienta de aplicación (icono de herramienta de aplicación).

De forma predeterminada, la barra de herramientas Vista rápida contiene las herramientas siguientes:

  • Herramienta de consola (icono de herramienta de consola).

  • Herramienta Problemas (icono de la herramienta Problemas).

En la barra de actividad, las pestañas de herramientas contienen el nombre de la herramienta y el icono, o simplemente el icono de herramienta, dependiendo del ancho de la ventana DevTools. Si la ventana es lo suficientemente ancha, aparecerán el nombre de la herramienta y el icono. Si la ventana es demasiado estrecha, solo aparece el icono de herramienta y el nombre de la herramienta aparece al mantener el puntero sobre el icono de herramienta.

Si la barra de actividad se encuentra en el lado izquierdo de la ventana DevTools, verticalmente, solo aparecen los iconos de herramientas y los nombres de las herramientas aparecen al mantener el puntero sobre los iconos de la herramienta.

Cambiar la ubicación de la barra de actividad

De forma predeterminada, la barra de actividad se muestra horizontalmente en la parte superior de la ventana DevTools. Para maximizar el espacio de pantalla utilizable en una variedad de ubicaciones y tamaño de ventana de DevTools, puede cambiar la ubicación de la barra de actividad al lado izquierdo de la ventana DevTools o establecerse automáticamente en función de la ubicación de acoplamiento de la ventana DevTools.

La barra de actividad puede estar en una de las siguientes ubicaciones:

  • Superior (valor predeterminado): la barra de actividad siempre será horizontal.

  • Lado izquierdo: la barra de actividad siempre será vertical.

  • Adaptar a la ubicación de acoplamiento: la barra de actividad estará en una orientación horizontal o vertical en función de dónde esté acoplado DevTools.

    • Cuando DevTools está acoplado a la izquierda o a la derecha de la ventana del explorador, la barra de actividad es vertical.

    • Cuando DevTools está acoplado al lado inferior de la ventana del explorador o desacoplado en su propia ventana, la barra de actividad es horizontal.

Cuando la barra de actividad es horizontal, los nombres de las herramientas aparecen junto a los iconos de herramientas si hay espacio suficiente para mostrarlos.

Si no hay suficiente espacio para mostrar todos los nombres de herramientas, la barra de actividad horizontal muestra algunas pestañas con iconos y nombres de herramientas, y algunas pestañas con iconos que tienen información sobre herramientas en su lugar:

Barra de actividad horizontal con ancho limitado, por lo que algunas herramientas no tienen una etiqueta, sino solo un icono con información sobre herramientas

Para cambiar la ubicación de la barra de actividad, realice una de las siguientes acciones:

  • Haga clic en el botón Personalizar y controlar DevTools (Personalizar y controlar DevTools) y, a continuación, seleccione una ubicación en Ubicación de la barra de actividad:

    El menú

  • En la barra de actividad, haga clic en Mover barra de actividad a la izquierda (icono Mover barra de actividad a la izquierda) o Mover barra de actividad a la parte superior (icono Mover barra de actividad a la parte superior).

  • Use el menú Comando. Presione Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS), escriba la barra de actividad de palabras y, a continuación, seleccione Mover barra de actividad a la izquierda o Mover barra de actividad a la parte superior. Consulte Power tip: Use the Command Menu (Sugerencia de energía: usar el menú de comandos).

Cambiar la ubicación de la vista rápida

De forma predeterminada, el panel Vista rápida está en la parte inferior de DevTools. También puede colocar el panel Vista rápida en el lado derecho de DevTools.

Para mostrar el panel Vista rápida , presione Esc.

Para cambiar la ubicación del panel Vista rápida , en la barra de herramientas Vista rápida , haga clic en el botón Acoplar vista rápida a la derecha (icono o acoplar vista rápida al botón inferior :

Icono de la vista rápida de acoplamiento, que se muestra en la barra de herramientas vista rápida, en la parte inferior de DevTool

Características de la barra de actividad

DevTools le ofrece una increíble cantidad de energía para inspeccionar, depurar y cambiar el sitio web que se muestra actualmente en el explorador. La mayoría de las herramientas muestran los cambios en vivo. Las actualizaciones dinámicas hacen que las herramientas sean útiles para refinar la apariencia y la navegación o la funcionalidad de una página web sin necesidad de actualizarla o compilarla.

Paneles de herramientas con pestañas que contienen pestañas y páginas

Aparte de la herramienta Inspeccionar y emulación de dispositivo, DevTools se divide en un conjunto de herramientas con pestañas, como la herramienta Elementos , la herramienta Consola y la herramienta Orígenes . En el menú Comando, las herramientas se conocen como paneles. La pestaña de una herramienta contiene un panel que contiene la interfaz de usuario de la herramienta.

Pestañas de nivel superior:

Las herramientas se organizan en un conjunto de pestañas en la barra de actividad y en la barra de herramientas vista rápida . La mayoría de las herramientas también se denominan paneles. Un panel es la interfaz de usuario interna de una herramienta. Una herramienta tiene una pestaña que puede estar presente en la barra de actividad y la barra de herramientas de vista rápida .

Pestañas de nivel inferior:

Dentro del panel de algunas herramientas, hay uno o varios conjuntos de pestañas (paneles con pestañas). Por ejemplo, la herramienta Elementos contiene un conjunto de pestañas que incluyen las pestañas Estilos, Agentes de escucha de eventos y Accesibilidad . Para otras herramientas, el panel de la herramienta tiene páginas enumeradas a lo largo del lado izquierdo.

Barra de actividad y barra de herramientas de vista rápida

Hay dos barras de herramientas: la barra de actividad en la parte superior de DevTools y la barra de herramientas Vista rápida en la parte inferior al presionar Esc.

La barra de actividad contiene las siguientes características:

  • Herramientas de icono:
    • Botón de alternancia Inspeccionar herramienta (icono inspeccionar herramienta).
    • Botón Emulación de dispositivo (icono emulación de dispositivo).

  • Pestañas de herramientas:

    • Herramienta de bienvenida .
    • Herramienta Elementos . Permanente.
    • Herramienta de consola . Permanente.
    • Herramienta Orígenes . Permanente.
    • Herramienta de red .
    • Herramienta de rendimiento .
    • Herramienta de memoria .
    • Herramienta de aplicación .

  • Iconos:

    • Mueva la barra de actividad a la izquierda (icono Mover barra de actividad a la izquierda).
    • Botón Más herramientas (icono Más herramientas).
    • Personalizar y controlar el botón de menú DevTools (personalizar icono).
    • Botón Ayuda (icono de Ayuda).
    • Cerrar Botón DevTools (cerrar icono de DevTools).

Barra de actividad, con etiquetas que identifican sus características

Las características de la barra de actividad se describen a continuación.

Anclar y reorganizar herramientas en la barra de actividad

Además de las herramientas permanentes Elements, Console y Sources , puedes controlar qué herramientas aparecen en la barra de actividad, para personalizar DevTools y centrarte en tus actividades actuales.

  1. Haga clic en el botón Más herramientas (icono Más herramientas) para mostrar todas las herramientas disponibles:

    El menú Más herramientas de la barra de actividad, con la lista expandida de todas las herramientas

  2. Seleccione una herramienta para anclarla a la barra de actividad. A continuación, la herramienta está presente en la barra de actividad cada vez que se abre DevTools.

Si no hay suficiente espacio en la barra de actividad para mostrar todas las herramientas ancladas, las herramientas que están abiertas pero no se muestran se mueven al menú Más herramientas :

El menú Más herramientas, en el que se muestran algunas herramientas ancladas que no caben en la barra de actividad

Para desanclar una herramienta de la barra de actividad, haga clic con el botón derecho en la pestaña de la herramienta y, a continuación, seleccione Quitar de la barra de actividad:

Menú contextual de la pestaña De la herramienta Rendimiento para quitar la herramienta de la barra de actividad

Herramienta de inspección

Al hacer clic en el botón Inspeccionar herramienta (icono inspeccionar herramienta), puede seleccionar un elemento en la página web actual. Mientras la herramienta Inspeccionar está activa, puede mover el mouse sobre diferentes partes de la página web para obtener información detallada sobre los elementos de página, junto con una superposición multicolor que muestra las dimensiones de diseño, el relleno y el margen del elemento page.

La herramienta Inspeccionar mientras mantiene el puntero sobre el primer título de este artículo

Emulación de dispositivo

Haga clic en el botón Emulación de dispositivo (icono emulación de dispositivo) para mostrar el sitio web actual en un modo de dispositivo emulado. La herramienta Emulación de dispositivos le permite ejecutar y probar cómo reacciona el producto al cambiar el tamaño del explorador. También proporciona una estimación del diseño y el comportamiento en un dispositivo móvil.

Presentación de DevTools de este artículo en un teléfono móvil emulado

Consulte Emulación de dispositivos móviles (emulación de dispositivo).

Herramienta de bienvenida

Incluye información sobre las nuevas características de DevTools, cómo ponerse en contacto con el equipo y proporciona información sobre ciertas características.

Herramienta Elements

Permite inspeccionar, editar y depurar el CÓDIGO HTML y CSS. Puede editar en la herramienta mientras muestra los cambios en directo en el explorador.

La herramienta Elementos siempre está presente en la barra de actividad.

Herramienta de consola

En la herramienta Consola , puede hacer lo siguiente:

  • Vea y filtre los mensajes registrados desde solicitudes de red o desde instrucciones de registro de JavaScript.
  • Escriba instrucciones de JavaScript para evaluar en tiempo real. Las expresiones se evalúan en el contexto actual, como cuando el depurador de JavaScript de la herramienta Orígenes está en pausa en un punto de interrupción.

La herramienta Consola siempre está presente en la barra de actividad y en la barra de herramientas vista rápida .

Consulte Consola.

Herramienta Orígenes

La herramienta Orígenes es un editor de código y un depurador de JavaScript. Puede editar proyectos, mantener fragmentos de código y depurar el proyecto actual.

La herramienta Orígenes siempre está presente en la barra de actividad.

Herramienta de red

La herramienta Red le permite supervisar e inspeccionar las solicitudes o respuestas de la red y la caché del explorador. Puede filtrar las solicitudes y respuestas para satisfacer sus necesidades y simular diferentes condiciones de red.

Consulte Inspección de la actividad de red.

Herramienta de rendimiento

Consulte Introducción a la herramienta de rendimiento.

Herramienta memoria

Consulte Corrección de problemas de memoria.

Herramienta de aplicación

Consulte Visualización, edición y eliminación de cookies.

Botón Más herramientas

Para agregar una herramienta a la barra de actividad, haga clic en el botón Más herramientas (icono Más herramientas).

Personalizar y controlar el menú DevTools

El botón Personalizar y controlar DevTools (Personalizar y controlar DevTools) abre un menú desplegable para:

  • Dock DevTools.
  • Acoplar la barra de actividad.
  • Seleccione un tema.
  • Mostrar métodos abreviados de teclado.
  • Cambie la configuración de DevTools.
  • Abra Emulación de dispositivo.
  • Cambie el panel Vista rápida .
  • Ejecute un comando.
  • Busque código.
  • Abra un archivo.

Botón de Ayuda

El botón Ayuda (icono de Ayuda) abre un menú desplegable que tiene los siguientes elementos:

Cerrar el botón DevTools

Haga clic en el botón Cerrar DevTools (icono Cerrar DevTools) en la esquina superior derecha de DevTools para cerrar DevTools y usar toda la ventana para mostrar la página web actual.

Características de la barra de herramientas de vista rápida

Use el panel Vista rápida para abrir una segunda herramienta a continuación o a la derecha de la herramienta que ya está seleccionada en la barra de actividad:

  1. Seleccione una herramienta en la barra de actividad.

  2. En la barra de herramientas Vista rápida , haga clic en Más herramientas (icono Más herramientas) y, a continuación, seleccione otra herramienta de la lista.

Por ejemplo, abra la herramienta Representación en el panel Vista rápida , debajo de la herramienta Red que está abierta en la barra de actividad:

DevTools con la herramienta Red en la parte superior y la herramienta Representación en la parte inferior

Para ocultar o expandir la vista rápida, haga clic en Contraer vista rápida (icono Contraer) o Expandir vista rápida (icono Expandir), o bien presione la tecla Escape .

Introducción a todas las herramientas

Para obtener un resumen de cada herramienta, consulte Información general de todas las herramientas en Acerca de la lista de herramientas.

Herramienta, pestaña o panel

Las palabras "tool", "tab" y "panel" son algo intercambiables. En el menú Comando, las herramientas se denominan paneles; por ejemplo, la herramienta Elementos se denomina panel Elementos . Para cambiar a la herramienta Elementos , haga clic en la pestaña Elementos . Hay un botón Más herramientas (icono Más herramientas) y una lista que se usan para seleccionar herramientas. Las herramientas de DevTools también se denominan paneles DevTools.

Puede personalizar cada una de las herramientas y el contenido de una herramienta puede cambiar en función del contexto.

Acerca de las herramientas de barra de actividad y vista rápida

El botón Más herramientas (icono Más herramientas) se muestra en la barra de actividad y en la barra de herramientas vista rápida . Al abrir una herramienta de la lista Más herramientas que se encuentra en la barra de actividad, la herramienta aparece en la barra de actividad. Al abrir una herramienta desde la lista Más herramientas de la barra de herramientas Vista rápida , la herramienta se abre en el panel Vista rápida .

Tarea Pasos
Abra una herramienta en la barra de actividad de la parte superior de DevTools. En la barra de actividad de la parte superior de DevTools, haga clic en Más herramientas (icono Más herramientas) y seleccione una herramienta.
Abrir una herramienta en la barra de herramientas vista rápida Cuando DevTools tenga el foco, presione Esc para mostrar la barra de herramientas vista rápida si aún no se muestra. En la barra de herramientas Vista rápida , haga clic en el botón Más herramientas (icono Más herramientas) y, a continuación, seleccione una herramienta.
Mover una herramienta de la barra de herramientas vista rápida a la barra de actividad Cuando DevTools tenga el foco, presione Esc para mostrar la vista rápida. En la barra de herramientas Vista rápida , haga clic con el botón derecho en la pestaña de la herramienta y, a continuación, seleccione Mover a la barra de actividad superior o Mover a la barra de actividad izquierda.
Mover una herramienta de la barra de actividad a la barra de herramientas de vista rápida En la barra de actividad, haga clic con el botón derecho en la pestaña de la herramienta y, a continuación, seleccione Mover a la parte inferior vista rápida o Mover a la vista rápida lateral.
Abrir una herramienta en su barra de herramientas predeterminada (barra de actividad o vista rápida) Cuando DevTools tenga el foco, abra el menú Comando presionando Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS). Escriba el nombre de la herramienta y, a continuación, seleccione un comando Mostrar <herramienta> .

Además de las herramientas de barra de actividad y vista rápida , DevTools incluye las siguientes herramientas:

Vea también

Sugerencia de alimentación: Use el menú Comandos

DevTools proporciona una gran cantidad de características y funcionalidad para usar con su sitio web. Puede acceder a las distintas partes de DevTools de muchas maneras, pero a menudo una manera rápida es usar el menú de comandos.

el menú Comando de DevTools

En el menú Comando, las herramientas se denominan "paneles"; por ejemplo, la herramienta Elementos se denomina panel Elementos . Para cambiar a la herramienta Elementos , seleccione la pestaña Elementos .

  1. Para abrir el menú Comando, realice una de las siguientes acciones:

    • Haga clic en el botón Personalizar y controlar DevTools (Personalizar y controlar DevTools) y, a continuación, seleccione Ejecutar comando.
    • Presione Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS).

    El menú Comando permite escribir comandos para mostrar, ocultar o ejecutar características en DevTools.

  2. En el menú Comando, empiece a escribir el nombre de una herramienta, como los cambios, y, a continuación, seleccione un comando Mostrar , como Mostrar cambios. El menú Comando muestra los comandos coincidentes:

    El menú Comando muestra las opciones después de escribir

  3. Presione Entrar para seleccionar un comando Mostrar , como Mostrar cambios. La herramienta seleccionada se abre en el panel Vista rápida , en la parte inferior:

    DevTools con la herramienta Cambios abierta en el panel Vista rápida

    La herramienta Cambios es útil al editar CSS. En este ejemplo, el menú Comando proporciona una alternativa rápida a seleccionar Más herramientas (icono Más herramientas) y, a continuación, seleccionar Cambios. En este ejemplo también se proporciona una alternativa a la edición de un .js archivo en la herramienta Orígenes y, a continuación, se hace clic con el botón derecho y se seleccionan Modificaciones locales.

Consulte también Ejecutar comandos con el menú Comando de Microsoft Edge DevTools.

Personalización de DevTools

Puede personalizar DevTools para satisfacer sus necesidades de la forma en que trabaja. Para cambiar la configuración, haga clic en el botón Personalizar y controlar DevTools (Personalizar y controlar DevTools) y, a continuación, seleccione Configuración (icono Configuración) o presione F1.

En la páginaPreferenciasde configuración>, puede cambiar varias partes de DevTools. Por ejemplo, puede usar la configuración del idioma de la interfaz de usuario del explorador para usar el mismo idioma en DevTools que se usa en el explorador. En otro ejemplo, use la configuración Tema para cambiar el tema de color de DevTools.

Toda la configuración de DevTools

También puede cambiar la configuración de las características avanzadas, como:

  • Agregue archivos locales a un área de trabajo.
  • Filtre el código de la biblioteca mediante la lista Omitir.
  • Defina los dispositivos que desea incluir en el modo de simulación y prueba de dispositivos. Para obtener más información, consulte Emulación de dispositivos móviles (Emulación de dispositivos).
  • Seleccione un perfil de limitación de red.
  • Definir ubicaciones simuladas.
  • Personalizar métodos abreviados de teclado. Por ejemplo, para usar los mismos accesos directos en DevTools que en Visual Studio Code, seleccione Coincidencia de accesos directos de preset>Visual Studio Code.

Todos los métodos abreviados de teclado y el menú para que coincidan con los accesos directos de Visual Studio Code

Probar características experimentales

El equipo de DevTools proporciona nuevas características como experimentos en DevTools. Puede activar o desactivar cada uno de los experimentos. Para ver la lista completa de características experimentales en Microsoft Edge DevTools, en DevTools, seleccione Configuración (icono Configuración) y, a continuación, seleccione Experimentos.

Para obtener una vista previa de las características más recientes que llegan a DevTools, descargue Microsoft Edge Canary, que se compila cada noche.

Vea también:

Vea también