Share
Mis dos artículos anteriores se centraron en las herramientas de depuración, por lo que es justo que continúe con este tema. Al depurar el código de front-end, tiende a pasar mucho tiempo revisando cómo CSS y JavaScript afectan la representación de su página; igualmente importante es cómo las solicitudes de red afectan a su sitio. En muchos casos, trabajamos localmente y olvidamos que el tamaño de la página, la latencia y la carga y el bloqueo de scripts pueden afectar en gran medida la forma en que un usuario experimenta su sitio. Por lo tanto, contar con un buen conjunto de herramientas para inspeccionar el tráfico de red es vital para redondear su conjunto de herramientas de depuración..
Afortunadamente, todos los principales navegadores modernos proporcionan herramientas de depuración que le permiten inspeccionar el tráfico de red, y las herramientas de terceros como Fiddler y Charles no solo le permiten ver solicitudes de red, sino que también ofrecen capacidades ampliadas para interactuar con su sitio..
Exploraremos ambos tipos de herramientas..
Como mencioné, cada navegador principal tiene herramientas de depuración integradas. Éstos incluyen:
Cada conjunto tiene sus propias capacidades únicas, pero cada uno tiene la capacidad de recopilar tráfico de red. Si observamos las siguientes imágenes, puede ver que, si bien las IU pueden variar, los datos recopilados y mostrados son muy similares:
El resultado final es una lista de las solicitudes de red del navegador relacionadas con la descarga de los activos o datos de nuestras páginas. La herramienta de red puede interceptar estas solicitudes para mostrarle datos importantes, tales como:
Fiddler tomará la solicitud de su URI y la reemplazará con un archivo local.
Entonces, si observamos los resultados de Firebug, podemos ver que la solicitud retiró la página principal y sus archivos CSS y JavaScript asociados, incluidos los activos de AWS de Amazon. Debido a las restricciones de imagen, no puedo mostrarle todo lo que cargó, pero también se devolvieron archivos de imagen y Flash swf.
Al tener esta información, ahora puedo profundizar en solicitudes específicas para determinar si estoy recibiendo los datos correctos, o por qué podría tener una solicitud de larga duración. Supongamos que miro la solicitud del archivo JavaScript de Webtrend. La descarga tardó 1.2 segundos, y quiero ver cómo se maneja la solicitud. Puedo expandir la solicitud y determinar si está siendo comprimido (es):
y si ha sido minificado:
En este caso, el archivo no se ha reducido, y puedo hacer un seguimiento con el desarrollador para determinar si tiene sentido hacerlo. Por supuesto, es un archivo 2K, pero cada byte es importante y esta información me permite optimizar mejor mi sitio.
La latencia de la red puede ser un asesino, especialmente para aplicaciones de una sola página que dependen de API externas o múltiples archivos de script para su capacidad. La mayoría de los navegadores intentan cargar activos de forma asíncrona cuando pueden, pero algunos, como los archivos JavaScript, pueden provocar eventos de bloqueo. Es importante poder identificarlos para optimizar la carga de recursos tanto como sea posible. Si observamos esta imagen, podemos ver que el archivo tardó 1,4 segundos en cargarse:
Al pasar por encima de las líneas de tiempo, obtenemos un diálogo que nos da un desglose de cómo progresó la solicitud:
Parte de eso se debió a que se bloqueó la carga durante 760 ms. Si esto resultó ser un problema generalizado, podría considerar el uso de un cargador de scripts como RequireJS para administrar mejor la carga de scripts y las dependencias..
Debido a que las aplicaciones dinámicas son tan generalizadas, es vital poder inspeccionar las llamadas de XHR. Anteriormente, viste una tonelada de solicitudes de red, y tratar de filtrarlas para encontrar tus llamadas XHR no es eficiente. Debido a esto, la mayoría de las herramientas le permiten elegir qué tipo de solicitudes desea que se muestren. Aquí estoy filtrando por solicitudes XHR para poder evaluar la solicitud y la respuesta:
Al profundizar en la solicitud, puedo evaluar detalles importantes sobre la solicitud, como los encabezados y el estado, el método de solicitud, las cookies y, lo que es más importante, la respuesta que se devolvió:
HTML fue devuelto en este caso, pero la respuesta podría ser cualquier cosa, incluyendo texto, JSON o XML. Lo mejor es que puedo inspeccionarlo por completo en caso de que tenga algún problema..
Las cookies son increíblemente útiles, y como las usamos ampliamente, tener una forma fácil de inspeccionar sus valores hace que la vida sea más fácil. Las herramientas para desarrolladores facilitan hacerlo al mostrarle qué cookies se enviaron y recibieron:
Si alguna vez ha realizado el desarrollo del lado del servidor sin las herramientas del lado del cliente, sabrá por qué esto es tan increíble.
En general, lo mejor de esto es que la capacidad está justo en su navegador, lo que hace que sea increíblemente conveniente abrir el depurador y verificar las cosas. A veces, sin embargo, necesitas un poco más de potencia..
Las aplicaciones HTTP Proxy como Fiddler y Charles Web Debugging Proxy son los hermanos mayores de los rastreadores de tráfico de red basados en navegador. No solo pueden interceptar solicitudes de red desde el navegador, sino también otras aplicaciones en su máquina, lo que las hace mucho más versátiles para la depuración. También tienden a ofrecer características más ricas, tales como:
Uso ampliamente el Fiddler increíblemente rico en funciones basado en Windows (¡es gratuito!). También se usa mucho dentro de Microsoft debido a su robusto conjunto de características. El desarrollador de Fiddler, Eric Lawrence, trabajó anteriormente en Microsoft y aún mantiene la aplicación..
Si nos fijamos en la interfaz de usuario, verá similitudes en la salida de lo que vimos en las herramientas del navegador. Todas las solicitudes de red aparecen junto con información clave sobre las solicitudes.
Y al profundizar en una solicitud, puedo ver muchos detalles al respecto, incluida la fuente minificada de la biblioteca jQuery:
Gran parte de esa información se puede extraer a través de las herramientas basadas en el navegador, pero ¿qué sucede cuando desea ver si una biblioteca específica está explotando su sitio? Definitivamente puedes intercambiar bibliotecas y solucionar problemas. Una mejor ruta sería construir un Autorretratador de Fiddler que intercepte su solicitud y reemplace la biblioteca de producción con una de su elección. Piense en eso por un segundo. Fiddler tomará la solicitud de su URI y la reemplazará con un archivo local. Vamos a ver.
Primero, necesito identificar el URI que quiero reemplazar. En este caso, veo que el tema de mi blog es jQuery v1.2.6. Eso es una locura, pero antes de dejarlo y causar estragos en mi sitio, me gustaría ver si jQuery v1.8.3 funciona como se esperaba.
Hago clic en la entrada para jQuery v1.2.6. En la columna derecha de Fiddler, selecciono la pestaña "AutoResponder" y selecciono "Habilitar respuestas automáticas". Poner en marcha el respondedor es tan simple como arrastrar el URI al editor de reglas. Notará que comienza la regla comparando el URI. Si coincide, responderá con un evento de su elección..
Ya que quiero probar jQuery 1.8.3, quiero que la regla cambie la versión de producción con una copia local de jQuery que tengo en mi computadora.
Guardo la regla y recargo mi página. El resultado final es que, si bien el URI puede verse igual, al inspeccionar los resultados se verifica que jQuery v1.8.3 se inyectó, lo que me permite probar esto sobre la marcha sin realizar cambios en el sitio:
Desde la perspectiva de la depuración, no puedo enfatizar lo útil que es esto, especialmente cuando intentas solucionar un error en versiones anteriores de un marco o biblioteca..
Mi buen amigo Jonathan Sampson hizo un gran screencast al usar esta función.
>La latencia de la red puede ser un asesino, especialmente para aplicaciones de una sola página.
Fiddler se beneficia de un extenso ecosistema complementario que amplía su funcionalidad a través de la interfaz iFiddlerExtension. Hay complementos que permiten:
Por sí mismo, Fiddler tiene un montón de características, demasiadas para describir en esta publicación. Es por eso que hay un libro de 330 páginas sobre cómo aprovecharla al máximo. Solo cuesta $ 10 y te ayudará a aprender los entresijos de esta gran herramienta..
Si está en OSX o Linux, la mejor opción es el Proxy de depuración web de Charles. Es una aplicación excelente y bien soportada, y si bien es comercial, vale cada centavo. He buscado buenas alternativas que se centran en el desarrollo web, y Charles realmente se destacó.
La interfaz es similar a Fiddler, pero ofrece dos formas diferentes de analizar el tráfico de red:
El estilo es totalmente tuyo. Tiendo a inclinarme hacia la vista estructurada porque se siente un poco más organizado, pero es un poco más de trabajo averiguar dónde está un URI específico.
Al igual que Fiddler, Charles también ofrece una capacidad de respuesta automática. Se llama "Mapa Local ...", y se accede haciendo clic con el botón derecho del ratón en un URI específico. Esto le permite elegir un archivo local para trabajar con.
Cuando vuelva a cargar la página, ahora tendré jQuery v1.2.6 reemplazado por la copia local de jQuery v1.9 que estaba en mi computadora.
Otra gran característica de Charles es la capacidad de acelerar sus solicitudes de red para simular velocidades específicas de ancho de banda. Recuerdo los días de los módems de 56k y sus increíbles velocidades, por lo que al usar esto me trae buenos recuerdos (um, a la derecha):
Charles también puede trabajar en Windows, ya que ofrece una interfaz de usuario multiplataforma completa.
Uso todas estas herramientas todo el tiempo porque pruebo en todos los navegadores principales. Tener esta capacidad realmente facilita la resolución de problemas. Naturalmente, elegir si usar un rastreador basado en el navegador o un proxy basado en una aplicación de hardware depende completamente de sus necesidades de depuración.
Si solo tiene que inspeccionar algo de tráfico y verificar los resultados, lo más probable es que un rastreador basado en el navegador sea adecuado para usted..
Por otro lado, si necesita un control granular de cómo responden los URI o si desea la flexibilidad para crear scripts de prueba personalizados, entonces debe ir a una herramienta como Fiddler o Charles. Lo mejor es que tenemos opciones sólidas para ayudarnos a hacer esto, especialmente a medida que aumenta la complejidad de nuestros proyectos..
Accentsconagua