Share
Renuncia: Trabajo para Microsoft Corporation.
En enero, lo acompañé a través de las características de las Herramientas de desarrollo F12 de Internet Explorer 10. La reciente versión de Microsoft de Windows 8.1 Preview trae consigo, no solo una actualización de Internet Explorer (ahora en v11) sino también una actualización de bienvenida para las herramientas de desarrollo F12. Lo último es especialmente importante ya que los desarrolladores dependen de ellos para solucionar problemas relacionados con el sitio desde IE. Hasta ahora, las herramientas han resuelto la mayoría de los casos de uso de depuración, pero está claro que a medida que los sitios se vuelven más complejos, los desarrolladores necesitan herramientas más ricas para trabajar. Esta actualización apunta a brindar una nueva apariencia y capacidades expandidas para los desarrolladores con un fuerte enfoque en lo siguiente:
Algunas de las actualizaciones son simplemente características de conveniencia destinadas a optimizar el flujo de trabajo del desarrollador (por ejemplo, elementos de navegación), mientras que otras tendrán un impacto dramático en la mejora del rendimiento y la representación de las aplicaciones web.
En esta publicación, veremos algunas de las actualizaciones y características más recientes de las Herramientas de desarrollo IE11 F12 y, en algunos casos, le mostraré las claras diferencias en las características de las versiones anteriores..
Desde su inicio, las herramientas F12 han mantenido una IU bastante consistente utilizando menús desplegables y una metáfora basada en pestañas para presentar las diversas opciones disponibles. Pero algunas nits que siempre parecían interferir eran cosas como las herramientas que emergían en su propia ventana durante una sesión de depuración y las pestañas que tomaban preciosos bienes inmuebles verticales. Con IE11, las herramientas F12 se han rediseñado en gran medida para hacer que la interfaz de usuario sea más intuitiva aprovechando un sistema de navegación basado en gráficos que se coloca como una cinta de desplazamiento en el lado izquierdo del panel del depurador:
Los menús que solían alinearse en la parte superior de las herramientas se han eliminado para proporcionar una mayor claridad a la interfaz de depuración, así como para liberar bienes raíces para trabajar. Además, el diseño del depurador en sí se ha renovado enormemente, pasando de una interfaz de usuario de Windows 7 a una apariencia más moderna de Windows 8. Puedes ver la principal diferencia a continuación:
La nueva interfaz de usuario es claramente más consistente con los elementos modernos introducidos en Windows 8.
Si bien la herramienta de inspección DOM original proporcionó una experiencia decente, careció de algunas características clave. Los puntos principales para mí fueron la falta de actualización de DOM en vivo, el orden de visualización de los estilos CSS y la incapacidad de ver eventos adjuntos a los elementos DOM. Afortunadamente, estos se han abordado en esta actualización.
Ya que me concentro mucho en JavaScript, encontrar eventos adjuntos fue especialmente frustrante, ya que requería mucho código de depuración basado en consola y prueba y error para concretar la combinación de evento / método llamado. Mirando la captura de pantalla a continuación, puede ver cómo puedo hacer clic en un elemento específico, ver el evento que se le adjunta y el método que se llamará cuando se dispare el evento. Este es un gran ahorro de tiempo desde una perspectiva de depuración.
Y si bien puede parecer obvio, un cambio leve pero importante en la forma en que las herramientas muestran el CSS aplicado a un elemento, hace que las cosas sean mucho más fáciles. Antes de esta actualización, las herramientas F12 mostrarían primero los estilos heredados, lo que obligaría a desplazarse hacia abajo en el panel de estilos para obtener el estilo real utilizado para el elemento.
El equipo ha actualizado la pantalla para que se muestren primero los estilos más recientes, lo que en mi opinión tiene mucho más sentido, especialmente desde una perspectiva de depuración:
Algunas otras grandes características nuevas que definitivamente son agradables tener son:
Anteriormente, tenía que abrir las herramientas F12, hacer clic en la flecha del inspector de DOM y hacer clic en un elemento. Esto simplifica las cosas bastante y pone esa experiencia a la par con otras herramientas de depuración.
La ruta de navegación proporciona una forma intuitiva de examinar la estructura jerárquica de un elemento DOM, lo que le permite hacer clic fácilmente en cualquier parte de la ruta de navegación para desplegar el elemento padre individual:
Con la nueva funcionalidad de estilo Intellisense, cuando edita un estilo o agrega una nueva regla, se le presenta inmediatamente una ventana emergente que le ofrece acceso rápido a las reglas y valores de CSS. Si bien algunos de ustedes pueden ser enciclopedias CSS, por mi parte, aprecio no tener que recordarlos todos. :)
Por último, con DnD dentro del explorador DOM, puede probar interactivamente cómo se verán y reaccionarán sus elementos cuando cambie su posición dentro del diseño de la página. Los cambios se realizan en vivo, por lo que recibe una respuesta inmediata al reposicionar su elemento..
Hay mucho MUCHO más código colocado en el lado del cliente que nunca antes. Los marcos como Ember.js y Angular hacen que sea mucho más fácil para los desarrolladores crear aplicaciones web de una sola página y los desarrolladores están aprovechando las funciones basadas en HTML5 para crear juegos inmersivos que requieren altas tasas de cuadros y tiempos de respuesta. Con eso, viene un nuevo conjunto de consideraciones sobre el rendimiento de la página y las nuevas herramientas F12 ofrecen una nueva herramienta para ayudarlo a crear un perfil y medir la capacidad de respuesta de su interfaz de usuario. La herramienta de respuesta de la interfaz de usuario es un generador de perfiles que le permite medir las tasas de cuadros y el uso de la CPU para identificar cualquier problema de rendimiento de la interfaz de usuario.
Al iniciar el generador de perfiles, puedo hacer un seguimiento de cómo reacciona mi CPU a mi página y de qué rendimiento visual (cuadros AKA por segundo) es como puntos diferentes en el ciclo de carga de la página..
El panel de detalles de la línea de tiempo me ofrece detalles aún más precisos sobre cómo los eventos específicos o las solicitudes de red afectaron el rendimiento de la página, lo que me permite profundizar en cualquier problema y realizar ajustes para mejorar el rendimiento de mi sitio..
Al observar cada elemento de la línea de tiempo, puede ver cómo las acciones específicas, por ejemplo, el estilo, pueden afectar el rendimiento del renderizado..
Se puede imaginar cuán valiosos son estos datos, especialmente para los desarrolladores de juegos que desean aprovechar las capacidades nativas del navegador para juegos y están acostumbrados a tener herramientas de depuración robustas en otras herramientas de desarrollo basadas en complementos como Flash..
De todos los cambios, los más impactantes para mí han sido los del depurador de scripts, principalmente porque ayudaron a prevenir la ira que sentía cuando lo usaba. Fue principalmente un problema de UX, ya que en el momento en que optó por ejecutar el depurador, todo el panel de herramientas saldría de la ventana del navegador y en su propia ventana emergente independiente. Fue una experiencia discordante para decir lo menos. Esta actualización resuelve eso y garantiza que el depurador permanezca firmemente en su lugar.
Otra gran mejora es el uso de una metáfora de pestañas para mostrar cada archivo abierto que está depurando. La versión anterior de la herramienta lo obligó a volver a abrir cada archivo que necesitaba para depurar. La nueva versión muestra una pestaña para cada archivo con el que está trabajando, lo que facilita considerablemente la navegación.
Además, las opciones que generalmente estaban ocultas en menús contextuales ahora están resaltadas firmemente y son fácilmente detectables. Es sorprendente la cantidad de veces que los desarrolladores se sorprendieron cuando les mostré la bonita función de impresión para formatear JavaScript, a pesar de que había estado allí desde IE8. La función ahora está resaltada a través de un icono en la parte superior del panel de depuración junto al icono de ajuste de palabras.
Por último, pero no menos importante, olvídate de console.log (). Las nuevas herramientas ahora admiten Tracepoints, lo que le permite monitorear valores específicos de la misma manera que lo haría con console.log ().
Pegar problemas de memoria siempre ha sido un obstáculo, especialmente si se trata de un problema de degradación de memoria lenta. Las nuevas herramientas F12 pretenden abordar esto con su nuevo generador de perfiles de memoria. La herramienta le permite tomar instantáneas del uso de la memoria de su sitio o aplicación durante un período de tiempo que le permite identificar qué acciones o áreas de su aplicación pueden ser la causa raíz del problema..
Al crear una instantánea de línea base de su huella de memoria seguida de instantáneas subsiguientes, puede comparar los datos recopilados para determinar la cantidad de objetos activos y qué tipos de objetos persisten. Esto incluye elementos HTML, nodos DOM y objetos JavaScript, y puede profundizar en las comparaciones de las instantáneas para ver el cambio en la memoria entre ellos para objetos individuales.
Probablemente esté muy familiarizado con los complejos menús desplegables llamados "Modo de navegador" y "Modo de documento". Su objetivo era ayudar a los desarrolladores a resolver problemas relacionados con versiones no modernas de Internet Explorer. En realidad, eran un poco confusos de usar y solo ofrecían un soporte de prueba marginal para los IEs no modernos. Con esta nueva actualización, las herramientas F12 han optimizado esto para ayudar a los desarrolladores a enfocar las pruebas en la versión de IE más compatible con los estándares, especialmente si su sitio se está ejecutando actualmente en algún modo de compatibilidad.
Al cambiar el modo de documento a "Borde", un desarrollador puede obligar a su sitio a mostrarse en el modo de estándares más reciente compatible con esa versión de IE y trabajar para realizar los cambios necesarios basados en estándares para que su sitio sea de navegador cruzado. Además, se proporciona un enlace informativo directamente en la herramienta que lleva a los desarrolladores directamente a modern.IE, un recurso en línea que ofrece un escáner para problemas de compatibilidad comunes, máquinas virtuales para las diferentes versiones de Internet Explorer y las mejores prácticas para garantizar el sitio. Compatibilidad en versiones modernas de IE..
Una nueva característica que se dirige explícitamente a dispositivos móviles y tabletas es la simulación de Geolocalización. Esto le permite aprovechar la API de geolocalización incluso si su dispositivo no está conectado.
Esta es una gran actualización de un conjunto de herramientas que nos han servido bien, pero que definitivamente necesitaban un poco de renovación. Hubo un claro enfoque en ofrecer herramientas que lo ayudaron a solucionar problemas relacionados con el rendimiento, algo que es increíblemente importante, especialmente con las tendencias que se dirigen hacia aplicaciones de una sola página, de estilo nativo..
.
Accentsconagua