En este tutorial aprenderás a conocer las herramientas de desarrollador de Microsoft Edge, que son en muchos aspectos similares a las herramientas de desarrollador de Google Chrome. Descubrirás cómo abrir y utilizar eficazmente las herramientas, así como las diferencias entre las dos herramientas de desarrollo del navegador.
Principales conclusiones
Las herramientas de desarrollo de Edge ofrecen una interfaz de usuario casi idéntica a la de las herramientas de desarrollo de Chrome cuando se trata de funciones básicas. Las diferencias radican principalmente en la interfaz de usuario y en algunas funciones adicionales, mientras que las herramientas y atajos clave siguen siendo en gran medida iguales.
Guía paso a paso
Para abrir las herramientas de desarrollo de Edge, dispones de diferentes opciones. Una forma es presionar F12. Si estás usando un Mac, puedes utilizar la combinación de teclas Comando + Opción + I. Los usuarios de Windows también pueden utilizar la combinación Control + Shift + I. Si deseas abrir las DevTools a través del menú contextual, haz clic con el botón derecho en el encabezado del sitio web y selecciona "Inspeccionar".
La interfaz de las herramientas de desarrollo de Edge te resultará familiar de inmediato si ya has trabajado con las herramientas de desarrollo de Chrome. Las pestañas están ahí, los iconos se ven un poco diferentes y las herramientas adicionales se acceden a través de un símbolo de "más" en la barra superior. En Chrome, estas herramientas adicionales se accedían a través del menú principal.
Si deseas agregar una nueva pestaña a las herramientas de desarrollo de Edge, simplemente haz clic en el símbolo de "más". Por ejemplo, puedes agregar la herramienta de animación. Esta se mostrará en la parte superior de la barra de pestañas, al igual que en las herramientas de desarrollo de Chrome.
También hay una pestaña "Bienvenida", similar a la página "Novedades" en Chrome. Aquí puedes obtener una visión general de las funciones de las DevTools. Te recomiendo revisar esta pestaña para descubrir consejos útiles que posiblemente no hayamos abordado en el curso.
Otra característica útil de las herramientas de desarrollo de Edge es la posibilidad de mover la barra de pestañas a la izquierda, lo que permite una disposición vertical. Los iconos entonces aparecen como tooltips, lo que ahorra espacio y brinda más espacio para las propias herramientas.
Las herramientas de diseño en sí mismas se pueden modificar a través de diferentes configuraciones que son similares a las configuraciones de Chrome. Puedes personalizar los menús desplegables, la documentación y la barra de actividades. De esta forma, mantienes un entorno de trabajo familiar.
Una de las pocas diferencias es el símbolo adicional para Azure DevOps en las herramientas de Edge, que no se encuentra en Chrome. Esto es especialmente útil para los desarrolladores que trabajan en el entorno de Azure.
Una vez que estés en las respectivas pestañas, notarás que la estructura y las funciones en ambas herramientas son casi idénticas. Puedes utilizar los estilos, los diseños calculados y todo lo demás que estés acostumbrado a hacer en Chrome también en Edge.
Las actualizaciones de funciones pueden variar ligeramente. Si Chrome agrega una nueva función, es posible que esta esté disponible en Edge un poco más tarde o viceversa. Por lo tanto, es recomendable verificar regularmente qué nuevas funciones se están agregando a las diferentes herramientas.
Esto es todo lo que necesitas saber sobre las herramientas de desarrollo de Edge. Si ya estás familiarizado con las herramientas de desarrollo de Chrome, te adaptarás rápidamente a las herramientas de desarrollo de Edge.
Resumen
En este tutorial has aprendido sobre las similitudes y diferencias entre las herramientas de desarrollo de Google Chrome y Microsoft Edge. Ahora sabes cómo abrir las herramientas y qué funciones tienes a tu disposición para trabajar eficientemente en tus proyectos web.
Preguntas frecuentes
Cómo abrir las Herramientas de desarrollador de Microsoft Edge?Pulsa F12 o utiliza la combinación Control + Shift + I en Windows.
¿Existen grandes diferencias entre las Herramientas de desarrollador de Edge y Chrome?Las diferencias son mínimas, principalmente en la interfaz de usuario y algunas funciones adicionales.
Puedo personalizar la barra de pestañas en Edge?Sí, al hacer clic en el símbolo de plus puedes añadir nuevas pestañas y desplazar la barra de pestañas a la izquierda.
¿Son similares los atajos de teclado en Edge y Chrome?Sí, la mayoría de los atajos son idénticos.
¿Microsoft Edge también introduce actualizaciones futuras?Sí, sin embargo, las características pueden aparecer con cierto retraso en comparación con Chrome.
