Microsoft Edge Información general sobre herramientas para desarrolladores

Al instalar Microsoft Edge, no solo obtiene un explorador, sino que también obtiene herramientas para desarrolladores, que proporcionan una forma eficaz de inspeccionar, depurar e incluso crear proyectos web. Las herramientas de desarrollador que se suministran con Microsoft Edge se basan en parte en las herramientas del proyecto de código abierto de Chromium, por lo que es posible que ya esté familiarizado con algunas de estas herramientas. Las Microsoft Edge Developer Tools también se _denominan Microsoft Edge DevTools_o simplemente DevTools.

Con DevTools, puede hacer lo siguiente:

• Inspeccionar y cambiar la página web actual en el explorador al momento.
• Emula el comportamiento del producto en diferentes dispositivos y simula un entorno móvil, con condiciones de red diferentes.
• Inspeccionar, ajustar y cambiar los estilos de los elementos en la página web al momento mediante herramientas integradas en una interfaz visual.
• Depurar JavaScript utilizando la depuración de puntos de interrupción y la consola activa.
• Encontrar en sus productos problemas de accesibilidad, rendimiento, compatibilidad y seguridad y aprender a usar DevTools para corregirlos.
• Inspeccionar el tráfico de red y ver dónde se encuentran los problemas.
• Examinar dónde almacena el explorador el contenido en diversos formatos.
• Evaluar el rendimiento del producto para encontrar problemas de memoria y derepresentación.
• Use un entorno de desarrollo para sincronizar los cambios en DevTools con el sistema de archivos y desde la web.

Abrir DevTools

Para abrir DevTools, haga clic con el botón secundario en cualquier elemento de una página web y, a continuación, haga clic en Inspeccionar.

• O bien, F12 presione , o presione Ctrl + Shift + I (en Windows/Linux) o Command + Option + I (en macOS).

Se abre DevTools, con la herramienta Elementos seleccionada.

Hay dos formas principales de interactuar con DevTools.

• Use el mouse.
• Métodos abreviados de teclado. Proporcionan una forma rápida de acceder a la funcionalidad y son necesarias para la accesibilidad. El equipo de Microsoft Edge DevTools está continuamente trabajando para que se pueda acceder a todas las herramientas desde el teclado y con tecnologías de asistencia como los lectores de pantalla. Vea Métodos abreviados de teclado.

Vea también Abrir Microsoft Edge DevTools: cómo abrir las diferentes características en DevTools.

Cambiar dónde Está acoplada DevTools en el explorador

Para cambiar dónde se coloca DevTools dentro de la ventana del explorador:

1. Seleccione el botón Personalizar y controlar DevTools ( ) ... .
2. A la derecha de Placement of DevTools con relación a la página ( Dockside), seleccione una opción de diseño.

Dock to left or Dock to right keeps DevTools side-by-side with your web product, and is excellent when you emulate mobile devices. Las opciones Acoplar a la izquierda y Acoplar a la derecha funcionan a pleno rendimiento con pantallas de alta resolución.

Dock to right es la ubicación predeterminada de DevTools:

Acoplar a la izquierda es otra opción en paralelo:

Acoplar a la parte inferior le ayuda cuando no tiene suficiente espacio para mostrar horizontalmente o desea depurar texto largo en dom o consola:

Desacoplar en una ventana independiente te ayuda a trabajar con varios monitores o si necesitas trabajar en una aplicación a pantalla completa:

Vea también Cambiar la ubicación de DevTools (Undock, Dock to bottom, Dock to left).

Las herramientas principales de la barra de herramientas

DevTools le concede la capacidad de inspeccionar, depurar y modificar el producto 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 de gran utilidad a la hora de refinar la apariencia, navegación o la funcionalidad de un proyecto web sin tener que estar actualizando o compilando. DevTools también le permite cambiar productos de terceros basados en web en su equipo.

Herramientas principales (pestañas) en la barra de herramientas

Hay dos barras de herramientas: la barra de herramientas principal en la parte superior de DevTools y el cajón en la parte inferior si selecciona Esc . La barra de herramientas principal normalmente tiene las siguientes pestañas (o herramientas o paneles):

• Bienvenido. 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. Esta herramienta se coloca en primer lugar.

A continuación, las siguientes herramientas siempre están presentes en la barra de herramientas y no se pueden cerrar:

• Elementos. Permite editar o inspeccionar HTML y CSS. Puede editar en la herramienta mientras muestra los cambios en directo en el explorador.
• Consola. Permite mostrar y filtrar los mensajes de registro. Los mensajes de registro son registros automatizados del explorador, como solicitudes de red y registros generados por el desarrollador. También puede ejecutar JavaScript directamente en la consola en el contexto de la ventana o el marco actual.
• Orígenes. Un editor de códigos y depurador de JavaScript. Puede editar proyectos, mantener fragmentos de código y depurar el proyecto actual.
• 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 adaptarse a sus necesidades y simular diferentes condiciones de red.

Por último, estas herramientas más especializadas (pestañas) están en la barra de herramientas de forma predeterminada:

• Rendimiento
• Memoria
• Aplicación
• Seguridad
• Faro

Herramienta, pestaña o panel

A menudo, las palabras "herramienta", "pestaña" o "panel" se pueden usar indistintamente. 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, seleccione la pestaña Elementos. Hay un botón y una lista más herramientas y hay un botón Más pestañas en la barra de herramientas, que se usan para seleccionar herramientas, que también se denominan paneles.

Secciones de la barra de herramientas

La barra de herramientas principal de DevTools tiene las siguientes secciones:

• Al seleccionar la herramienta Inspeccionar, 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 y una superposición de varios colores que muestre las dimensiones de diseño, el relleno y el margen del elemento de página.

  

• La herramienta Emulación de dispositivos permite visualizar el producto web en un dispositivo emulado. La herramienta ** Emulación de dispositivos** también permite comprobar cómo se comporta un 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.

  

• La barra de herramientas principal contiene pestañas para las herramientas que se usan en varios escenarios. Puede personalizar cada una de las herramientas y el contenido de una herramienta puede cambiar en función del contexto. Para mostrar una herramienta que se encuentra en una pestaña oculta, seleccione el botón Más pestañas ( >> ) . Para agregar una herramienta a la barra de herramientas principal o a la barra de herramientas del cajón, seleccione el botón Más herramientas ( + ). Cada herramienta se presenta a continuación.

• Junto al grupo de pestañas de Herramientas hay accesos directos opcionales a errores y problemas. Los accesos directos se muestran cuando se producen errores o problemas de JavaScript en la página web. El botón Abrir consola para ver # errors, # warnings (JavaScript Errors) muestra un círculo rojo con un , seguido del número de errores de X JavaScript. Para abrir la consola y obtener información sobre el error, seleccione el botón Errores de JavaScript. El botón Abrir problemas para ver # issues (Issues) es un icono de mensaje azul seguido del número de problemas. Para abrir la herramienta Problemas, seleccione el botón Problemas.

• El botón de Configuración muestra un icono de engranaje. Para abrir devTools Configuración página web, seleccione el botón Configuración página web. La página web de Configuración muestra un menú para modificar Preferencias, activar Experimentos y muchas cosas más.

• El botón Enviar comentarios muestra un torso con una burbuja de chat junto a él. Para abrir el cuadro de diálogo Enviar comentarios, seleccione el botón Enviar comentarios. El cuadro de diálogo Enviar comentarios permite informar de lo que haya sucedido e incluye automáticamente una captura de pantalla. Usa Enviar comentarios para conectarte con el equipo de DevTools para informar de problemas, problemas o sugerir ideas.

• El botón Personalizar y controlar DevTools ( ) abre un menú ... desplegable. Le permite definir dónde acoplar DevTools, buscar, abrir diferentes herramientas y mucho más.

Sugerencia: utilice el menú de comandos

DevTools proporciona muchas características y funcionalidades para usar con el producto web. Puede tener acceso a las distintas partes de DevTools de muchas maneras, pero a menudo una forma rápida es usar el menú de comandos.

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, seleccione la pestaña Elementos.

Para abrir el menú de comandos, realice una de las siguientes acciones:

• Presione Control + Shift + P (Windows, Linux) o Command + Shift + P (macOS).
• Haga clic en Personalizar y controlar DevTools ( ) ... y, a continuación, seleccione Ejecutar comando.

El menú de comandos permite escribir comandos para mostrar, ocultar o ejecutar características en DevTools. Con el menú de comandos abierto, escriba la palabra cambiosy, a continuación, seleccione Cajón: Mostrar cambios. Se abre la herramienta Cambios, que resulta útil al editar CSS. En este caso, el menú de comandos proporciona una alternativa rápida a seleccionar Más herramientas (...) y, a continuación, seleccionar Cambios oeditar un archivo en la herramienta Orígenes y, a continuación, hacer clic con el botón secundario y seleccionar Modificaciones .js locales. ****

El menú de comandos muestra las opciones después de escribir changes :

DevTools con la herramienta Cambios abierta:

Vea también Ejecutar comandos con el Microsoft Edge comando DevTools.

Personalizar DevTools

Puede personalizar DevTools para satisfacer sus necesidades para la forma en que trabaja. Para cambiar la configuración, realice una de las siguientes acciones:

• Seleccione Configuración (el icono de engranaje de la parte superior derecha).
• Seleccione F1 o ?.

En la sección Preferencias, puede cambiar varias partes de DevTools. Por ejemplo, puede **** usar la opción Coincidir con el idioma del explorador para usar el mismo idioma en DevTools que se usa en el explorador. Para otro ejemplo, use la configuración Tema para cambiar el tema de color de DevTools.

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

• Áreas de trabajo.

• Lista de omitidos para filtrar código de biblioteca.

• Dispositivos para añadir dispositivos en el modo de simulación y prueba de dispositivos. Para obtener más información, vea Emular dispositivos móviles en Microsoft Edge DevTools.

• Seleccione un perfil de limitación de red.

• Ubicaciones para definir ubicaciones simuladas.

• Personalizar métodos abreviados de teclado. Por ejemplo, para usar los mismos métodos abreviados en DevTools que en Visual Studio Code, seleccione Coincidencia de accesos directosde la configuración > 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 DevTools, seleccione Configuración (el icono de engranaje) y, a continuación, seleccione Experimentos.

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

Consulte también

• DevTools para principiantes: Introducción html y dom
• Inspeccionar y cambiar la página web actual
• Emular el comportamiento del producto en distintos dispositivos
• Inspeccionar, ajustar y cambiar los estilos de los elementos
• Depurar javascript
• Consola en directo
• Problemas de accesibilidad, rendimiento, compatibilidad y seguridad
• Inspeccionar el tráfico de red
• Inspeccionar dónde el explorador almacenaba contenido
• Evaluar el rendimiento
• Problemas de memoria
• Problemas de representación
• Usar un entorno de desarrollo
• Sincronizar cambios en DevTools con el sistema de archivos
• Invalidar archivos de la web