Información general sobre DevTools

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.

Contenido detallado:

Introducción

DevTools proporciona una forma 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:

  • Inspecciona, ajusta y cambia los estilos de los elementos de la página web utilizando herramientas en directo con una interfaz visual. Inspecciona dónde almacena el explorador el contenido para crear la página web, incluidos .html, .css, .jsy los .png formatos de archivo.

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

  • Depure JavaScript utilizando la depuración de puntos de interrupción y la consola activa. Encuentre problemas de memoria y problemas de representación con sus aplicaciones web.

  • Encuentre problemas de accesibilidad, rendimiento, compatibilidad y seguridad en sus productos y use DevTools para corregir los problemas de accesibilidad encontrados.

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

Vídeo: Comprender la interfaz de usuario de DevTools

Imagen en miniatura del vídeo

Este vídeo ligeramente más antiguo, de septiembre de 2022, muestra la interfaz de usuario heredada para DevTools:

  • En lugar de la barra de actividades, 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.

Principales formas:

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

Otras formas:

Acción Herramienta resultante
En la barra de herramientas de Microsoft Edge, selecciona Configuración y más (el icono> "Configuración y más") Más herramientas>:Herramientas de desarrollo. La herramienta utilizada anteriormente o la herramienta 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 la flecha arriba y, después, Entrar. La herramienta Elementos , con el árbol DOM expandido para mostrar el <html> elemento.
Presiona la tecla Tab o Mayús+Tab para colocar el foco en un elemento de página. Después presione Mayús+F10 para abrir el menú contextual. Para seleccionar el comando Inspeccionar , presione la flecha arriba y, después, Entrar. La herramienta Elementos , con el árbol DOM expandido para mostrar el elemento de página enfocado.

Para abrir DevTools, haga 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 seleccionar Inspeccionar:

Haga clic con el botón derecho en un enlace Acerca de nosotros en una página web de demostración y, a continuación, seleccione el comando Inspeccionar

DevTools se abre, con el elemento hecho clic con el botón derecho resaltado en el árbol DOM en 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

Abrir 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 pestaña nueva

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 de la siguiente manera:

    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

    bash shell en Linux:

    microsoft-edge --auto-open-devtools-for-tabs
Deshabilitar el inicio rápido

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 tengas que deshabilitar el inicio rápido en edge://settings/system.

La característica de inicio rápido mantiene un proceso mínimo de Microsoft Edge ejecutándose 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 inicio rápido.

Desactivar el método abreviado de teclado F12

Para evitar que presionar F12 abra DevTools:

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

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

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

Compatibilidad de teclado

Puede interactuar con DevTools con el ratón o el teclado. Los métodos abreviados de teclado son una forma rápida de acceder a las funcionalidades y son necesarios para la accesibilidad. Cada vez se puede acceder más a varias herramientas a través del teclado y tecnologías de asistencia, como los lectores de pantalla.

Vea métodos abreviados de teclado y navegar por DevTools con tecnología de asistencia.

Cambiar la ubicación en el que DevTools está acoplado en el explorador

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

Acercar o alejar DevTools

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

Para ampliar la parte de 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 reducidas

Para ampliar la página representada, haga clic en la página y 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 la página representada.
  2. Presione Ctrl+0, Ctrl+Teclado numérico 0 (Windows o Linux) o Comando+0 (macOS).

Para ampliar la Configuración de DevTools:

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

Para ampliar DevTools mediante el menú de comandos:

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

Información general sobre la interfaz de usuario

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

  • La Barra de Actividades en la parte superior, que contiene iconos que se utilizan para acceder a herramientas, configuraciones, documentación y mucho más.

    • El área de herramientas actual, donde aparece la herramienta que está seleccionada actualmente en la Barra de Actividades .

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

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

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

De forma predeterminada, la Barra de Actividades contiene las siguientes herramientas:

  • Inspeccionar herramienta (icono de inspeccionar herramienta).

  • Herramienta de emulación de dispositivo (icono de emulación de dispositivo).

  • Herramienta Bienvenida (icono de la herramienta Bienvenida).

  • Herramienta Elementos (icono de la herramienta Elementos).

  • Herramienta Consola (icono de herramienta de consola).

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

  • Herramienta Red (icono de herramienta Red).

  • Herramienta Rendimiento (icono de la herramienta Rendimiento).

  • Herramienta Memoria (icono de herramienta Memoria).

  • Herramienta Aplicación (icono de la herramienta Aplicación).

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

  • Herramienta Consola (icono de herramienta de consola).

  • Herramienta Problemas (icono de la herramienta Problemas).

En la Barra de Actividades, las pestañas de herramientas contienen el nombre y el icono de la herramienta, o solo el icono de la herramienta, según el ancho de la ventana DevTools. Si la ventana es lo suficientemente ancha, aparecen el nombre y el icono de la herramienta. Si la ventana es demasiado estrecha, solo aparece el icono de la herramienta y el nombre de la herramienta aparece al mantener el puntero sobre el icono de la herramienta.

Cambiar la ubicación de Vista rápida

De forma predeterminada, el panel Vista rápida se encuentra 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 la tecla 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 Vista rápida acoplar a la derecha (el icono o en el botón Vista rápida acoplar a la parte inferior :

El icono de Vista rápida de acoplar, que se muestra en la barra de herramientas de Vista rápida, en la parte inferior de DevTool

Características de la Barra de Actividades

DevTools le concede la capacidad de inspeccionar, depurar y modificar el sitio web que se muestra en el explorador. La mayoría de herramientas muestran los cambios al instante. Las actualizaciones en tiempo real hacen que las herramientas sean útiles a la hora de refinar la apariencia, navegación o la funcionalidad de una página web sin tener que estar actualizándola o compilándola.

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

Además de la herramienta Inspeccionar y la 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 . Dentro del menú de comandos, 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 actividades y en la barra de herramientas de 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 actividades y en la barra de herramientas de vista rápida .

Pestañas de nivel inferior:

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

La Barra de Actividades y la barra de herramientas de Vista rápida

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

La Barra de Actividades contiene las siguientes características:

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

  • Pestañas de herramientas:

    • Herramienta Bienvenida .
    • Herramienta Elementos . Permanente.
    • Herramienta de consola . Permanente.
    • Herramienta Orígenes . Permanente.
    • Herramienta Red .
    • Herramienta Rendimiento .
    • Herramienta Memoria .
    • Herramienta de aplicación .

  • Iconos:

    • Botón Más herramientas (icono Más herramientas).
    • Personalizar y controlar el botón de menú de DevTools (icono Personalizar).
    • Ayuda (icono Ayuda).
    • Cerrar Botón DevTools (cerrar el icono DevTools).

La Barra de Actividades, con etiquetas que identifican sus características

Las características de la Barra de Actividades se describen a continuación.

Anclar y reorganizar herramientas en la barra de actividades

Además de las herramientas permanentes Elementos, Consola y Orígenes , puede controlar qué herramientas aparecen en la Barra de Actividades para personalizar DevTools y que se centre en sus 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 Actividades, con la lista expandida de todas las herramientas

  2. Seleccione una herramienta para anclarla a la barra de actividades. La herramienta está presente en la barra de actividades cada vez que se abre DevTools.

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

El menú Más herramientas, que muestra algunas herramientas ancladas que no caben en la Barra de Actividades

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

El menú contextual de la pestaña de la herramienta Rendimiento, para quitar la herramienta de la Barra de Actividades

Herramienta Inspeccionar

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

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 de emulación de dispositivo) para mostrar el sitio web actual en un modo de dispositivo emulado. La herramienta de emulación de dispositivo permite ejecutar y probar cómo reacciona el producto al cambiar el tamaño del explorador. Asimismo, le ofrece una idea aproximada del diseño y del comportamiento en un dispositivo móvil.

Visualización de DevTools de este artículo en la emulación de un teléfono móvil

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

Herramienta Bienvenida

Aquí podrá informarse sobre las nuevas características de DevTools, cómo ponerse en contacto con el equipo y el funcionamiento de ciertas características.

Herramienta Elementos

Permite inspeccionar, editar y depurar el HTML y el CSS. Puede editar en la herramienta mientras muestra los cambios en el explorador en tiempo real.

La herramienta Elementos siempre está presente en la Barra de Actividades.

Herramienta de consola

En la herramienta Consola , puedes:

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

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

Consulta Consola.

Herramienta Orígenes

La herramienta Orígenes es un editor de códigos 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 Actividades.

Herramienta Red

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

Consulta Inspeccionar actividad de red.

Herramienta Rendimiento

Consulta Análisis del rendimiento en tiempo de ejecución (tutorial).

Herramienta Memoria

Consulte Solucionar problemas de memoria.

Herramienta Aplicación

Consulte Ver, editar y eliminar cookies.

Botón Más herramientas

Para agregar una herramienta a la Barra de Actividades, 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:

  • Acoplar DevTools.
  • Acoplar la barra de actividades.
  • Seleccionar un tema.
  • Mostrar métodos abreviados de teclado.
  • Cambiar la configuración de DevTools.
  • Abra Emulación de dispositivo.
  • Alternar el panel Vista rápida .
  • Ejecute un comando.
  • Buscar código.
  • Abra un archivo.

Botón de Ayuda

El botón Ayuda (icono 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 debajo o a la derecha de la herramienta que ya está seleccionada en la Barra de Actividades:

  1. Seleccione una herramienta de la Barra de Actividades.

  2. En la barra de herramientas de Vista rápida , haga clic en Más herramientas (icono Más herramientas) y 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 Actividades:

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 de contraer) o Expandir vista rápida (icono de expansión), o presione la tecla Esc .

Información general sobre todas las herramientas

Para obtener un resumen de cada herramienta, consulte Acerca de la lista de herramientas.

Herramienta, pestaña o panel

Las palabras "herramienta", "pestaña" y "panel" son algo intercambiables. En el menú de comandos, 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 de DevTools.

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

Acerca de las herramientas de la Barra de Actividades y Vista rápida

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

Tarea Pasos
Abrir una herramienta en la barra de actividades en la parte superior de DevTools En la barra de actividades de la parte superior de DevTools, haga clic en Más herramientas (icono Más herramientas) y, después, seleccione una herramienta.
Abrir una herramienta en la barra de herramientas de Vista rápida Cuando DevTools tenga el foco, presione Esc para mostrar la barra de herramientas de Vista rápida si aún no se muestra. En la barra de herramientas de Vista rápida , haga clic en el botón Más herramientas (icono Más herramientas) y seleccione una herramienta.
Mover una herramienta de la barra de herramientas de Vista rápida a la Barra de actividades Cuando DevTools tenga el foco, presione Esc para mostrar la Vista rápida. En la barra de herramientas de Vista rápida , haga clic con el botón derecho en la pestaña de la herramienta y seleccione Mover a la barra de Actividades superior.
Mover una herramienta de la barra de actividades a la barra de herramientas de Vista rápida En la Barra de Actividades, haga clic con el botón derecho en la pestaña de la herramienta y seleccione Mover a la vista rápida inferior o Mover a la vista rápida lateral.
Abrir una herramienta en su barra de herramientas predeterminada (Barra de actividades o Vista rápida) Cuando DevTools tenga el foco, abra el menú de comandos 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 la Barra de actividades y Vista rápida , DevTools incluye las siguientes herramientas:

Vea también

Sugerencia: utilice el menú de comandos

DevTools proporciona muchas características y funcionalidades que puede usar en su sitio web. Puede acceder a las distintas partes de DevTools de varias maneras, pero a menudo una forma rápida es usar el menú de comandos.

el menú de comandos en DevTools

En el menú de comandos, las herramientas se llaman "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ú de comandos, 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ú de comandos le permite introducir comandos para mostrar, ocultar o ejecutar características en DevTools.

  2. En el menú de comandos, empiece a escribir el nombre de una herramienta, como cambios, y, a continuación, seleccione un comando Mostrar , como Mostrar cambios. El menú de comandos 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 cuando edita CSS. En este ejemplo, el menú de comandos ofrece una alternativa rápida a la selección de Más herramientas (icono Más herramientas) y la opción Cambios. Este ejemplo también proporciona una alternativa a editar un .js archivo en la herramienta Orígenes y, a continuación, hacer clic con el botón derecho y seleccionar Modificaciones locales.

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

Personalizar DevTools

Puede personalizar DevTools para satisfacer sus necesidades de su forma de trabajar. 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áginaPreferencias de configuración>, puede cambiar varias partes de DevTools. Por ejemplo, puede usar la configuración de 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 de Tema para cambiar el tema de color de DevTools.

Toda la configuración en DevTools

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

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

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

Probar características experimentales

El equipo de DevTools proporciona nuevas características experimentales . Puede activar o desactivar cada uno de los experimentos. Para ver la lista completa de características experimentales de 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 llegarán a DevTools, descargue Microsoft Edge Canary, que se compila todas las noches.

Vea también:

Vea también

  • Se actualizó por última vez el