Introducción a las herramientas de desarrollo de Microsoft Edge (Chromium)

Microsoft Edge ha adoptado el proyecto de código abierto chromium. El nuevo explorador Microsoft Edge crea una mejor compatibilidad web y reduce la fragmentación de distintas plataformas web. El cambio debe facilitar la compilación y prueba de las páginas web en Microsoft Edge. El nuevo Microsoft Edge debe ayudar a que las páginas web funcionen según lo esperado cuando se abran en otros exploradores basados en Chromium. Entre los exploradores basados en Chromium se incluyen Google Chrome, Vivaldi, Opera, Despericio y el nuevo Microsoft Edge.

La web ha aumentado su uso en una matriz cada vez más amplia de tipos de dispositivos. La complejidad y la sobrecarga implicadas en las pruebas de páginas web han aumentado rápidamente. Los desarrolladores web como usted necesitan probar con muchos sistemas diferentes. Para asegurarse de que las páginas web funcionan bien en todos los tipos de dispositivos y exploradores, es posible que le sea casi imposible, especialmente si trabaja en una pequeña empresa. El nuevo Microsoft Edge ahora se basa en Chromium. El equipo de Microsoft Edge ha simplificado la matriz alineando la plataforma web de Microsoft Edge con otros exploradores basados en Chromium. El nuevo Microsoft Edge proporciona la mejor experiencia de desarrollo de su clase. La experiencia se realiza dentro del explorador y junto con las otras herramientas de desarrollo que usas todos los días, como Visual Studio código.

Como desarrollador de exploradores basados en Chromium, debería sentirse cómodo con el nuevo explorador Microsoft Edge. Las DevTools de Microsoft Edge (Chromium) funcionan igual que las herramientas para desarrolladores que ya conoces y usas. Las herramientas de desarrollo de Microsoft Edge (Chromium) a menudo se denominan Microsoft Edge (Chromium) DevTools o DevTools. Para obtener más información, vaya a Novedades de Microsoft Edge (Chromium) DevTools.

Microsoft Edge (Chromium) DevTools

Si anteriormente desarrollaste para Microsoft Edge (EdgeHTML) y estás evaluando el nuevo Microsoft Edge, ahora proporciona nuevas y excelentes herramientas para crear y probar tus páginas web de forma más fácil y rápida.

Abrir DevTools

Las DevTools de Microsoft Edge son un conjunto de herramientas integradas directamente en el explorador Microsoft Edge. DevTools te permite realizar las siguientes tareas directamente en el explorador.

  • Inspeccionar y realizar cambios en la página web HTML
  • Editar CSS y ver al instante la vista previa de cómo se representa la página web
  • Revisar todas las console.log() instrucciones del código JavaScript front-end
  • Depurar el script, establecer puntos de interrupción y paso a paso por el código línea por línea

Más ejemplos de las características que DevTools proporciona para que sea más fácil y rápido compilar y probar tu página web en Microsoft Edge.

Para abrir DevTools

  • Seleccionar F12
  • Seleccione Ctrl + Shift + I (Windows/Linux) o Command + Option + I (macOS)

Si desea ver el CÓDIGO HTML o CSS de un elemento en el sitio, haga clic con el botón secundario en el elemento y elija Inspeccionar para saltar a la herramienta Elementos. Para abrir Las DevTools enmodo inspeccionar elemento, selecciona Ctrl + Shift + C (Windows/Linux) o Command + Option + C (macOS). El modo inspeccionar elemento le permite elegir un elemento en la página web y mostrar el CÓDIGO HTML y CSS en la herramienta Elementos.

Si desea revisar los registros del código javaScript front-end o ejecutar rápidamente algún script, abra la consola. Para iniciar la herramienta de consola en DevTools, selecciona Ctrl + Shift + J (Windows/Linux) o Command + Option + J (macOS).

Herramientas básicas

Herramientas principales de Microsoft Edge (Chromium) DevTools

Las DevTools de Microsoft Edge (Chromium) incluyen las siguientes herramientas.

  • Una herramienta Elements para editar HTML y CSS, inspeccionar las propiedades de accesibilidad, ver agentes de escucha de eventos y establecer puntos de interrupción de mutación dom
  • Una consola para revisar y filtrar mensajes de registro, inspeccionar objetos JavaScript y nodos DOM y ejecutar JavaScript en el contexto de la ventana o el marco seleccionados
  • Una herramienta De orígenes para abrir y editar el código, establecer puntos de interrupción, pasar por el código y mostrar el estado de la página web
  • Una herramienta de red para supervisar e inspeccionar solicitudes y respuestas de la memoria caché de la red y del explorador
  • Una herramienta de rendimiento para perfiles de la hora y los recursos del sistema que necesita el sitio
  • Una herramienta de memoria para medir el uso de recursos de memoria y comparar instantáneas de montón en diferentes estados de tiempo de ejecución de código
  • Una herramienta de aplicación para inspeccionar, modificar y depurar manifiestos de aplicaciones web, trabajadores de servicio y cachés de trabajadores de servicio. También puede inspeccionar y administrar el almacenamiento, las bases de datos y las memorias caché desde la herramienta de aplicación.
  • Una herramienta de seguridad para depurar problemas de seguridad y asegurarse de que ha implementado correctamente HTTPS en su página web. HTTPS proporciona seguridad crítica e integridad de datos tanto para el sitio como para los usuarios que proporcionan información personal en el sitio.
  • Una herramienta de auditoría (ahora se ha cambiado el nombre de Lugar) para ejecutar una auditoría de la página web. Los resultados de la auditoría le ayudarán a mejorar la calidad del sitio de las siguientes maneras.
    • Detectar errores comunes relacionados con hacer que su página web sea accesible, segura, con rendimiento, y así sucesivamente.
    • Se soluciona cada error.
    • Crear un PWA.

Nota

El panel Auditoría proporciona vínculos a contenido hospedado en sitios web de terceros. Microsoft no se responsabiliza y no tiene ningún control sobre el contenido de estos sitios y los datos que pueden recopilar.

Envíe sus comentarios y solicitudes de características.

Extensiones

Es posible que haya accedido a DevTools con extensiones al diagnosticar y depurar problemas mientras creó sus páginas web (o aplicaciones). Microsoft Edge extensions are acquired from Microsoft Edge Add-ons. En los complementos de Microsoft Edge,examine las extensiones de DevTools de la categoría herramientas para desarrolladores o busque una extensión específica.

También puede agregar extensiones de Chrome Web Store.

Chrome Web Store en Microsoft Edge

En la parte superior, elija Permitir extensiones de otros almacenes y, a continuación, elija Permitir en el cuadro de diálogo que aparece.

Nota

Las extensiones instaladas desde orígenes distintos de Microsoft Store no se han confirmado y pueden afectar al rendimiento del explorador.

Elige Agregar a Chrome para agregar la extensión DevTools a Microsoft Edge.

Agregar extensión de Chrome Web Store a Microsoft Edge

Accesos directos

Los siguientes accesos directos controlan la ventana principal de DevTools, funcionan en todas las herramientas o en ambas.

Acción Windows/Linux macOS
Mostrar u ocultar DevTools (se abre en la última herramienta vista) F12 o Ctrl+Shift+I Command+Option+I
Mostrar la consola Ctrl+Shift+J Command+Option+J
Mostrar las DevTools en modo inspeccionar elemento que te permite elegir un elemento y mostrar el CÓDIGO HTML y CSS en la herramienta Elementos Ctrl+Shift+C Command+Option+C
Mostrar configuración ? o Fn+F1 ? o Fn+F1
Mostrar el panel siguiente Ctrl+] Command+]
Mostrar el panel anterior Ctrl+[ Command+[
Acopla las DevTools en la última posición usada. Si Las DevTools permanecen en la posición predeterminada para toda la sesión, el acceso directo desacopla Las DevTools en una ventana independiente Ctrl+Shift+D Command+Shift+D
Alternar modo de dispositivo Ctrl+Shift+M Command+Shift+M
Alternar el modo de inspección de elementos que le permite elegir un elemento y mostrar el CÓDIGO HTML y CSS en la herramienta Elementos Ctrl+Shift+C Command+Shift+C
Mostrar el menú de comandos Ctrl+Shift+P Command+Shift+P
Mostrar u ocultar el cajón Esc Esc
Actualizar Actualiza la página web mediante la memoria caché. F5 o Ctrl+R Command+R
Actualización de forma automática. Fuerza a Microsoft Edge a descargar recursos de nuevo y volver a cargarlos. Los recursos que se usan pueden provienen de una versión almacenada en caché Ctrl+F5 o Ctrl+Shift+R Command+Shift+R
Busque texto en el panel actual. No se admite en las herramientas auditorías, aplicaciones y seguridad Ctrl+F Command+F
Mostrar la herramienta de búsqueda en el cajón, que le permite buscar texto en todos los recursos cargados Ctrl+Shift+F Command+Option+F
Abrir un archivo en el panel Orígenes Ctrl+O o Ctrl+P Command+O o Command+P
Acercar Ctrl+Shift++ Command+Shift++
Alejar Ctrl+- Command+-
Restaurar el nivel de zoom predeterminado Ctrl+0 Command+0
Ejecutar fragmento de código Ctrl+Oo Ctrl + P , escriba ! seguido del nombre del script y, a continuación, presione Enter Presione Command + O o Command + P , escriba seguido del ! nombre del script y, a continuación, presione Enter
Mostrar código fuente HTML no editable en una pestaña nueva Ctrl+U N/D

Nota

Si está depurando y pausado en un punto de interrupción, el acceso directo Actualizar reanuda primero el tiempo de ejecución.

Consulte también

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Si quieres obtener una vista previa de las características más recientes que vienen a DevTools,descarga Microsoft Edge Canary,que se compila todas las noches.