Conozca las novedades del Profiler de Internet Explorer 11

Una de las mayores dificultades con las que nos encontramos, en su momento, algunos incautos al aterrizar en el mundo de la programación web fue la complejidad para poder depurar código y detectar cualquier tipo de anomalía.

Aunque ya hay disponible un depurador en el navegador, no ha sido hasta la llegada de Internet Explorer 11 hasta que se ha tenido una herramienta realmente potente a la altura de lo que cabía esperar. Es por ello que considero interesante repasar algunas de sus características y destacar las novedades más significativas de la que hasta hoy es la última versión del navegador de Microsoft.

Recordemos que para acceder al depurador de Internet Explorer 11 se debe pulsar la tecla F12.

La consola (Ctrl+2)

Esta herramienta permite al usuario ver en la pantallas las salidas de JavaScript. En Internet Explorer 11, entre otras, se han añadido las siguientes características:

Se añade un nuevo nivel de logging llamado debug. Hasta Internet Explorer 10 los niveles disponibles eran log, info, warm y error.
Se añade la expansión de objetos dentro de la consola. Es decir, junto a cada variable o elemento que estemos revisando, puede parecer un símbolo + para expandirlo y ver todas las propiedades de ese objeto.
Se añaden nuevos métodos, como son algunas funciones relacionadas con la medición del tiempo (time/timeEnd). Estos métodos son muy útiles ya que se pueden usar para delimitar el bloque de código cuya duración de ejecución queramos medir. Cuando se ejecuta el método timeEnd, en la consola aparecerá un mensaje con el número de milisegundos que ha durado el bloque.

Otro objetivo de la consola es mostrar los errores de JavaScript. Nos muestra un mensaje con la descripción del error y un enlace que al acceder nos llevará al punto exacto donde se está produciendo ese error. Por motivos de eficiencia, el sistema solamente enviará mensajes críticos, aunque el usuario puede enviar mensajes de distintos niveles de logging. Para ello se usa la siguiente sintaxis:

window.console[NIVEL](mensajeOVariable[, mensajeOvariable, …]);

En Internet Explorer 11, para las variables de objeto que se usen en estos mensajes, también aparece el símbolo + para que puedan desplegarse y ser inspeccionado fácilmente, mientras que en versiones anteriores había que indicar explícitamente el objeto y la propiedad que quería mostrarse.

Otra novedad importante es que se pueden agrupar los mensajes con console.group y console.groupEnd.

Por último recordar que se puede ejecutar cualquier código de JavaScript que esté disponible. El valor devuelto por el método será impreso debajo de la línea de ejecución de la consola.

Debugger (Ctrl+3)

Muestra el código JavaScript de la página y esto nos ofrece la posibilidad de trabajar con él como sucede en otros debuggers. Se acerca mucho más a la funcionalidad que ofrece el debugger de Visual Studio o cualquier otro IDE. Sus principales características son:

Puede añadir puntos de interrupción para detener la ejecución en ese punto. Como novedades destacar:
Los puntos de ruptura se pueden desactivar, de modo que no se detengan la ejecución pero se pueden volver a activar nuevamente por si interesa en un futuro. De este modo no se pierde la localización del punto de interés, cosa que sí sucede cuando se elimina.
Se pueden añadir condiciones en los puntos de interrupción para que solamente se detenga la ejecución cuando se produzca una situación determinada.
Se pueden añadir puntos de interrupción de eventos en el panel de puntos de ruptura.
Puede ejecutar paso a paso a través del código (tecla F10)
Puede realizar pausas en excepciones.
Existe una nueva función llamada “Prettify” que hace más amigable el poder depurar código minimizado en entornos de producción si es necesario. La combinación de teclas para activar dicha funcionalidad es Ctrl+Shift+P.

Esta característica resulta de gran ayuda ya que nos permite poder visualizar código “minificado” e incluso poner puntos de interrupción. Tiene la particularidad además de que al forzar la recarga de la página con Ctrl+F5 se conservan estos puntos de interrupción.

Se incluye una pila de llamada mejorada para ver la secuencia en la que se van ejecutando todos los métodos y así poder determinar desde donde se ejecuta una determinada instrucción.
Puede añadir inspecciones para mostrar en todo momento el valor de una variable.

Explorador del DOM (Ctrl+1)

Permite inspeccionar el estado actual del Document Object Model (DOM), es decir, de todos los elementos que aparecen representados en la página web. Permite que seleccionemos un elemento de la pantalla y automáticamente aparezca el código del elemento seleccionado. Como novedad, en Internet Explorer 11 se permite también justo el proceso contrario. Es decir se permite seleccionar elementos del código y automáticamente saldrán resaltado en la página web el elemento del DOM que le corresponde.

Una vez que se selecciona un determinado elemento, se pueden modificar atributos como el color, texto y tamaño, de modo que estos cambios se van refrescando en la pantalla, lo cual nos ayuda a obtener el aspecto deseado. La novedad en esta versión es que esta lista de cambios se guardan en una pestaña de cambios para que veamos qué cambios se han realizado y tener un control de cómo estaba antes de modificarlo y como lo hemos dejado.

Otra novedad muy interesante de esta pestaña es un panel llamado Eventos en el que se pueden ver todos los eventos asociados del elemento seleccionado en el DOM. Si este elemento incluye otros elementos, también aparecen estos eventos.

Además de todo esto, si se instala Microsoft Web Essentials 2013, tendremos la ocasión de pinchar en la pantalla del navegador y modificar textos, etiquetas y unas series de elementos, y estos cambios se aplicarán en el código de la página.

Red (Ctrl+4)

Esta herramienta muestra las peticiones HTTP y su resultado. Con un aspecto gráfico muy agradable al usuario se pueden ver datos como el tipo de petición, tamaño y tiempo de la descarga e información más detallada haciendo doble clic en cada uno de los registros. Gracias a esto también, entre otras cosas, podemos ver si los archivos grandes viajan comprimidos, podemos detectar errores como 400, 404 y 500.

La herramienta de red muestra los resultados en vivo. Por lo tanto podemos iniciar la captura e ir viendo los resultados de lo que está pasando conforme se está ejecutando.

También es muy útil para depurar llamadas Ajax.

Capacidad de respuesta de la UI (Ctrl+5)

Esta herramienta permite medir el rendimiento de la página web en lo que respecta al renderizado de los elementos de la página. Es muy útil para encontrar cuellos de botella asociados a tiempos de espera o elementos pesados del DOM.

Esta herramienta requiere iniciar la captura de las acciones del usuario y una vez que han finalizado las acciones que se quieren analizar, se finaliza la captura y se lleva a cabo el análisis de lo realizado para mostrar los resultados. NO se hace en vivo como sí sucedía con el monitor de red.

Gráficamente, es de lejos la más espectacular de las herramientas que se incorporan en el depurador, ya que tiene mucha información de todos los elementos que intervienen en la UI, así como gráficas y distintas presentaciones, un TimeLine dinámico, la opción de añadir marcadores de usuario y un largo etcétera de opciones. Hablar de todas se sale del alcance es este artículo así que os invito a que las conozcáis.

Profiler (Ctrl+6)

En las versiones de Internet Explorer 11 en español aparece traducido como “Generador de perfiles” (sin comentarios). Estamos ante el profiler que nos muestra las funciones que JavaScript ejecuta durante una sesión. Incluye detalle acerca del número de veces que se ejecutan, el tiempo que tarda, las relaciones con sus funciones padres e hijas y más información.

También permite ver el árbol de llamadas así como tener en pantalla los distintos informes con las distintas capturas para que podamos comparar los resultados de los cambios que hayamos realizado y ver si tienen el efecto deseado.

Memoria (Ctrl+7)

Esta herramienta permite detectar posibles situaciones donde haya un uso de memoria incorrecto. Nos permite ir realizando distintas fotos de distintos estados y vemos si la memoria se está liberando a medida que se opera con la aplicación.

Existe también una vista de comparación entre esas distintas fotos, donde se da una información mucho más detallada.

Después de todo esto y viendo la notable mejora Microsoft Internet Explorer 11 en todos los aspectos, os animo a todos a usar estas herramientas para obtener el mejor resultado de nuestras aplicaciones web y darle a nuestro trabajo ese toque de calidad que nos distingue del resto.