DevTools Showdown Edge's F12 vs Firefox vs Chrome

Developer Tools de Microsoft Edge, el nuevo navegador predeterminado de Windows 10 tiene un diseño moderno y algunas características nuevas en comparación con su predecesor, las herramientas de desarrollo F12 de Internet Explorer 11.

La pregunta de si las herramientas de desarrollo de Microsoft Edge están a la altura de sus competidores populares, las herramientas de desarrollo en otros navegadores modernos como Mozilla Firefox y Google Chrome, naturalmente surge en la mente de muchos desarrolladores..

En esta publicación, intentamos responder a esta pregunta y descubrir si las Herramientas de desarrollo F12 de Edge realmente valen la pena utilizarlas. Compararemos sus características con las de las herramientas de desarrollo de Firefox y las herramientas de desarrollo de Google Chrome..

Abre las herramientas de desarrollo

Al presionar F12, se abren las herramientas de desarrollo en los 3 casos: Herramientas de desarrollador en Firefox, DevTools en Chrome y F12 Dev Tools en Microsoft Edge. Este es el atajo de teclado donde el nombre oficial de Edge's F12 Dev Tools viene de.

Cuando abres las herramientas de desarrollo de Edge, puedes experimentar al mismo tiempo una de sus deficiencias más conocidas: actualmente es imposible fijar las herramientas en una ventana existente. Si bien puedes seguir lo que está sucediendo en la pantalla en las Herramientas para desarrolladores de Firefox y en las Herramientas de desarrollo de Chrome al fijar la ventana de herramientas de desarrollo en la parte inferior de la pantalla, (actualmente) no puedes hacer lo mismo con Edge.

Los desarrolladores de Microsoft afirman que solucionarán este problema en una futura actualización.

Inspeccionar el DOM

los DOM Explorer La herramienta (acceso directo: CTRL + 1) es la primera pestaña de las herramientas de desarrollo F12 de Microsoft Edge. Su diseño y diseño general es bastante similar al Elemento pestaña de Chrome y la Inspector pestaña en Firefox, sin embargo las capacidades difieren visiblemente.

En Edge puede ver el documento HTML representado, los estilos CSS relacionados y los controladores de eventos registrados en cada elemento. También puede encontrar el pequeño gráfico sobre el modelo de caja CSS con los valores calculados, ya conocido por los dos navegadores de la competencia..

Usted puede experimentar con reglas CSS borrando los actuales y agregando otros nuevos, y podrá ver su cambios resumidos en una subpestaña llamada “Cambios” (Se encuentra en el lado izquierdo). Esta última es una característica que no está integrada en Firefox Developer ni en Chrome DevTools. Puede dar un resumen rápido al usuario, por lo que es una opción muy útil.

Hay algunas características en las herramientas de desarrollo de Firefox que ni Edge ni Google Chrome actualmente proporcionan, pero pueden ayudar significativamente a la vida de un diseñador: La fuente y las herramientas del analizador de animación..

En Edge hay un selector de color fresco aunque eso puede compensar un poco al usuario por ello.

Interactuar con JavaScript

los Consola La pestaña (Atajo: CTRL + 2) en Microsoft Edge te permite interactuar con el JavaScript de tu sitio, al igual que en Firefox y Chrome Dev Tools. Los tres le permiten seguir los errores de JavaScript en tiempo real y también puede analizarlos ingresando su propia entrada.

La herramienta de consola de Edge's F12 Dev Tools tiene un buen característica de autocompletar Eso te ayuda con los comandos, sin embargo parece ser menos conocedor comparado con el de Firefox y Chrome Dev Tools.

Borde separa errores, advertencias y mensajes que es una gran ayuda, aunque no es algo que los otros dos juegos de herramientas no tengan.

La consola de Firefox parece ser la más profesional de las tres herramientas de desarrollo, ya que también muestra por separado otro tipo de problemas: red, CSS, errores de seguridad y mensajes de registro, y le permite interactuar con estos a través de la Interfaz de consola, no solo con los errores de JavaScript.

Entender lo que está haciendo su código

los Depurador La herramienta (Método abreviado: CTRL + 3) lo ayuda a comprender lo que le está sucediendo a su código al encontrar posibles errores. Puede configurar relojes y puntos de interrupción, y ver pilas de llamadas.

El panel de Relojes muestra valores variables, el modo Callstack muestra la cadena de llamadas de función que llevaron al estado actual, y el modo Puntos de interrupción muestra una lista de los puntos de interrupción que ha establecido.

Las herramientas de desarrollo F12 de Edge te permiten pausa tu código en el medio de la ejecución, y paso a través de ella línea por línea. También tienes la opción de Mejorar la legibilidad de un archivo JavaScript compilado o minificado., y tu puedes depurar diferentes recursos (JavaScript, extensiones, etc.) uno por uno.

Firefox y Chrome DevTools ofrecen todas estas funcionalidades, por lo que Edge no ofrece una experiencia de depuración excepcional, sino que brinda al usuario una herramienta sólida y confiable que está a la par con sus competidores.

Echa un vistazo a la comunicación navegador-servidor

los Red La herramienta (acceso directo: CTRL + 4) ha sido completamente rediseñada para Microsoft Edge desde Internet Explorer 11. Con la ayuda de esta práctica herramienta, puede Seguir la comunicación entre el servidor y el navegador., e inspeccionar las solicitudes individuales.

Usted puede filtrar los resultados por tipo de contenido como hojas de estilo, imágenes, medios, fuentes, XHR y muchos otros. Tú también puedes depurar AJAX Con la ayuda de la herramienta Red..

La pestaña Red de Edge y Firefox ofrece capacidades e interfaz de usuario bastante similares. Ambos tienen un panel de barra lateral fácil de usar que le permite echar un vistazo al encabezado HTTP, el cuerpo HTTP, los parámetros, las cookies relacionadas y los tiempos del recurso seleccionado elemento por elemento..

La pestaña de Red de DevTools de Chrome no tiene un panel como este, pero si hace clic en las solicitudes una por una, puede ver la misma información. Aunque es una solución menos intuitiva.

Rastrear páginas lentas

los Actuación La pestaña (Atajo: CTRL + 5) lo ayuda a comprender las razones detrás de una página web lenta. Con la herramienta Performance, Microsoft dio un gran salto al combinar el anterior Capacidad de respuesta de la interfaz de usuario y perfilador herramientas para crear una vista completa de todas las secuencias de comandos y visualizar el rendimiento.

Esta práctica herramienta le proporciona informes sobre diferentes tipos de uso de la CPU, le proporciona información sobre la pintura de marco de su sitio, y también es posible aísla diferentes escenarios de usuarios estableciendo etiquetas en la línea de tiempo.

Durante el proceso de prueba, encontramos que la herramienta Performance en Edge nos proporcionó Más información sobre temas de velocidad. que Firefox Developer o Chrome DevTools. La interfaz de usuario de la pestaña Rendimiento en Edge está bastante bien diseñada, nos ayuda con muchas indicaciones visuales y es relativamente fácil de usar. Si desea saber más sobre cómo usarlo, lea los documentos detallados.

Diagnosticar problemas de memoria

los Memoria La herramienta (Atajo: CTRL + 6) hace posible encontrar fugas de memoria que también puede ralentizar su página web, además puede impactar la estabilidad de tu sitio.

Con la ayuda de un buen gráfico, puede comprender fácilmente dónde está aumentando el uso de la memoria y puede hacer instantáneas en puntos específicos que permiten analizar el uso de la memoria. Tú también puedes Compara dos instantáneas hechas en diferentes puntos. del ciclo de vida de la página para entender la diferencia entre ellos..

Chrome DevTools también tiene un buen generador de perfiles de memoria en la pestaña Perfiles, mientras que Firefox Developer no proporciona esta función de forma predeterminada, pero puedes descargar e instalar complementos como este si lo deseas. El perfilador de memoria de Chrome DevTools es bastante avanzado y ofrece más funciones que las de Edge, por ejemplo, le permite registrar asignaciones de objetos JavaScript en el tiempo Eso puede ayudarte a aislar las fugas de memoria..

Pruebe su sitio en diferentes tamaños de pantalla

los Emulación La herramienta (Atajo: CTRL + 7) le permite probar su sitio en diferentes circunstancias. Puede elegir entre dos perfiles de navegador, Desktop y Windows 10 Mobile, y entre muchos agentes de usuario diferentes, incluidas todas las versiones de escritorio y móvil de Internet Explorer, hasta IE6, junto con muchos de los competidores de Edge, Chrome, Firefox, Safari, etc..

Es interesante que tengas la opción de tomar un mira tu página como un Bing Bot. Tú también puedes emular un GPS, y establecer Diferentes resoluciones y orientaciones..

Firefox Developer Tools no tiene una herramienta de emulación de dispositivo, pero Chrome DevTools tiene un emulador tan sofisticado que Edge's apenas puede competir con él.

Por ejemplo, la pantalla de emulación de Chrome tiene un cuadrícula precisa donde se inserta la vista emulada en, y no solo puede elegir entre perfiles de navegador y agentes de usuario, sino también entre muchos dispositivos como el diferentes versiones de iPhone o Samsung Galaxy y muchos otros. El emulador de Chrome DevTools también tiene un práctico Opción de zoom y puedes probar tu sitio en diferentes redes como 3G, 4G, DSL, WiFi, etc..

Resumen

En general, F12 Dev Tools de Microsoft Edge parece ser sorprendentemente bueno. Proporciona funciones muy similares a los populares kits de herramientas de desarrollo web de otros navegadores modernos. Hay dos áreas donde Edge F12 Dev Tools es bastante fuerte: interfaz de usuario eso es realmente intuitivo, fácil de usar y bien diseñado, y el herramientas de diagnóstico de rendimiento.

Para estas dos características puede valer la pena considerar cambiar a, o al menos probar, Edge. El mayor defecto es la falta de la posibilidad de colocar las herramientas de desarrollo en la parte inferior de la pantalla, pero esperemos que Microsoft solucione este problema rápidamente.