En 20 minutos ... Chrome Developer Tools

Chrome Developer Tools

En 20 minutos ... 5 de Junio, 2014 Alfonso Marín Marín

Chrome Developer Tools En 20 minutos...

•  Presentación de la herramienta y configuración del entorno

•  Panel Elements •  Panel Network •  Panel Resources •  Panel Sources •  Panel Timeline y Profiles •  Panel Audits •  Consola •  Caso práctico de análisis HTTP: autenticación en

webmail

Chrome Developer Tools Presentación de la herramienta

•  Abrir Chrome Developer Tools •  Ctrl+Shift+I /Cmd+Shift+I / F12 •  Botón derecho à Inspeccionar elemento

•  Interfaz


1.  Búsqueda visual de elementos 2.  Paneles de funcionalidades 3.  Mostrar/ocultar “Drawer”

•  También pulsando Esc. 4.  Settings

•  Opciones de configuración de DevTools 5.  Posición del panel

•  Acoplado inferior •  Acoplado latera •  Desacoplado

6.  Contenido del panel actual seleccionado 7.  Drawer

•  Acceso directo a consola, opciones de emulación, etc...


Drawer •  Panel de Emulación: simulación de dispositivos o

funcionalidades. A destacar •  Screen à Emulate Screen: probar distintas resoluciones y tener siempre una

vista completa de la web •  Screen à CSS Media: simular CSS de impresión •  User Agent: Sobreescribir User Agent para simular distintos navegadores •  Sensors à Touch Screen: simular pantalla táctil •  Device: simular determinados dispositivos (activa combinaciones de opciones

anteriores) •  Panel Rendering: Opciones sobre el motor de renderizado para

optimizar operaciones de pintado, que suele ser crítico para aplicaciones móviles

•  Panel Search: Búsqueda global sobre todas las fuentes .js y .css de la página actual. Por texto o por expresión regular

•  Panel Console: acceso directo a la consola JavaScript

Chrome Developer Tools PANEL ELEMENTS

ELEMENTS •  Orientado para maquetación y depurar el layout de la página •  Dos secciones: Vista HTML del DOM actual y paneles auxiliares, donde el

principal es Styles Vista HTML del DOM •  Representación HTML del documento ACTUAL tal cual existe en memoria. •  Versión cocinada: No tiene por qué coincidir con el fuente HTML. (Las

modificaciones hechas via javascript sí las veríamos aquí y en el fuente HTML no)

•  Búsqueda rápida con Ctrl+F •  Seleccionando un elemento podemos editarlo pulsando botón derecho:

•  Editar o añadir atributos (también con doble click sobre el elemento) •  Editar como HTML •  Borrar elemento (tb con tecla borrar o Supr, Ctrl+Z para deshacer)

Chrome Developer Tools PANEL ELEMENTS

Panel Styles •  Estilos que han sido aplicados en el elemento seleccionado actual, así

como su orden según los selectores que le afectan •  Podemos ver los selectores y donde ha sido definido (acceso directo a

panel sources) •  Podemos simular metaclases :hover, :focus, :active, :visited •  A un determinado selector, podremos activar o desactivar reglas CSS,

meter nuevas reglas o modificar el selector •  Buscar reglas CSS en el buscador inferior

Otros paneles •  Panel Computed: Resumen de reglas CSS que finalmente se aplican

sobre el elemento •  Desplegando podemos ver qué selector la aplica y el acceso directo al

fuente •  Event Listeners, DOM Breackpoints y Properties: orientados a

depuración JavaScript

Chrome Developer Tools PANEL NETWORK

NETWORK •  Mostrará toda la actividad de red durante el proceso de carga de la página

y sucesivas peticiones que se realicen vía AJAX o recursos adicionales que se soliciten.

•  Dos usos principales •  Depuración de tiempos de carga, detección de recursos duplicados o

inexistentes, ... •  Trazabilidad y análisis de solicitudes HTTP realizadas durante la

carga del documento o a través de peticiones XHR (AJAX) •  Si nos aparece vacía es porque hemos abierto devtools después de la

carga de la página. Recargar para ver las peticiones


Barra superior de opciones •  Activar / desactivar panel: si no lo vamos a utilizar porque estamos

trabajando con otro panel, mejor deshabilitarlo para que no consuma recursos

•  Borrar histórico actual •  Filtros: permite filtrar los elementos que mostrará la tabla de recursos

cargados, pudiendo filtrar por nombre o por tipo de recursos (documentos, hojas de estilo, ficheros javascript, imágenes, peticiones AJAX,...) •  Ctr+Click para seleccionar varios

•  Conmutar detalle de columnas: indicar si queremos más o menos información por cada elemento en la tabla de operaciones.

•  Preserve Logs: no borra el histórico tras cada recarga. Útil si queremos analizar redirecciones automáticas o generar trazas de navegación (webinject)


TABLA DE OPERACIONES NETWORK •  Visualiza cada recurso cargado, ordenado según el instante en que ha sido

ordenada la carga del mismo •  Detección de fallos de carga de recursos, o recursos duplicados •  Toda la información disponible a través de las columnas

•  Se mostrarán inicialmente las más comunes •  Con botón derecho sobre cualquier cabecera podremos seleccionar otras •  Algunas tienen valor principal y valor secundario (en gris)

•  Timeline: •  Representan el instante en que se solicitó cada recurso y el total de tiempo que

han tardado en cargarse •  Colores según tipo de documento

https://developer.chrome.com/devtools/docs/network#timeline-view •  En atenuado la latencia (tiempo entre la solicitud y la recepción del primer dato)

En color fuerte el tiempo de descarga. •  Si hacemos hover veremos desglose de operaciones realizadas y tiempos

intermedios •  Podemos ordenar por varios criterios: tiempo de carga, de latencia, etc.


Al pinchar en la primera columna sobre un recurso, se mostrarán más detalles de esta solicitud Pestaña Headers •  Cabeceras HTTP enviadas y recibidas •  Formateadas para una mejor visualización, pero podemos ver las cabeceras reales

con 'view source' •  Campos especialmente interesantes

•  Request URL: dirección completa solicitada, incluyendo variables GET •  Request Method: tipo de solicitud HTTP (GET/POST/PUT/DELETE/OPTIONS) •  Status Code: Código HTTP de respuesta •  Request Headers

•  Cookie: las cookies que enviamos junto a la solicitud •  Query String Parameters: desglose de parámetros GET incluidos en la

solicitud •  Form Data: desglose de parámetros POST incluidos en la solicitud

•  Response Headers •  Location: si nos están indicando una redirección •  Set-Cookie: cookies que nos suelta


Pestaña Preview •  Contenido interpretado del contenido de la respuesta

•  Útil para imágenes •  Se puede ver el HTML, JSON o XML devuelto

Pestaña Response •  Visualización en crudo de la respuesta recibida •  Solo disponible para respuestas de texto (HTML, JSON, XML, código JavaScript,

CSS ...) •  En caso de contenido HTML, esto sí es código fuente, no lo que se muestra en

pestaña Elements

Pestaña Cookies •  Información ampliada de las cookies que se han enviado y recibido. •  Si necesitamos analizar cookies, mejor hacerlo desde aquí que desde las cabeceras Pestaña Timing •  La misma información que nos mostraba la columna timeline


Otras opciones Al pinchar con el botón derecho sobre un recurso en particular se nos muestra un menú con distintas opciones. A destacar: •  Copy Response: copiar el contenido de la respuesta (sin cabeceras) al portapapeles

•  Interesante si queremos analizar la respuesta, como por ejemplo un JSON •  Copy as cURL: genera el comando cURL correspondiente a dicha solicitud, con

todas sus cabeceras •  Interesante para incorporar a scripts que necesiten simular la solicitud

•  Copy all HAR / Save as HAR with content: guarda todas las solicitudes mostradas en formato HAR

•  Para utilizar en visualizadores HAR. Ej: http://ericduran.github.io/chromeHAR/ •  Interesante si necesitamos compartir la información que estamos viendo con

alguien •  Clear browser cookies /Clear browser cache: acceso directo a las funciones de

limpieza

Chrome Developer Tools PANEL RESOURCES

RESOURCES Análisis de repositorios de almacenamiento web •  Ficheros cargados (css, js, imágenes, documentos html, fuentes, ...),

agrupados por frames •  Web SQL: bases de datos creadas usando WebSQL de HTML5.

•  Ej. http://jsfiddle.net/bmknight/LCnt2/ •  Visualización de tablas •  Realización de consultas

•  LocalStorage: variables guardadas en almacenamiento HTML5 LocalStorage. •  Ej: en consola à localStorage.setItem('Variable', 'Valor');

•  SessionStorage: similar que el anterior, pero para almacenamiento HTML5 SessionStorage

•  Cookies: listado de cookies que afectan a la página •  Application Cache: información sobre recursos almacenados haciendo

uso de API HTML5 Application Cache

Chrome Developer Tools PANEL SOURCES

SOURCES Principal utilidad: depurador JavaScript •  Panel izquierdo: muestra todas las fuentes JavaScript, HTML y CSS

•  Tip: Si hemos hecho modificaciones desde el panel Elements sobre reglas de algún fichero .css, con botón derecho à Local modifications podremos verlas

•  Panel central: contenido del fichero seleccionado •  Posibilidad de establecer breackpoints (fijos o condicionales) •  Tip: Si el fichero está compactado (normal en javascript y css), icono {} muestra

versión tabulada •  Tip: Ctrl+P: búsqueda rápida de ficheros

•  Panel derecho: herramientas de depuración JavaScript para analizar el estado ante una parada (por ejemplo tras un breakpoint). A destacar

•  Botones de ejecución paso a paso típicos (step over, step into, step out) •  Watches Expressions: Nos permite seguir el valor de ciertas variables •  Call Stack: pila de llamadas javascript realizadas hasta el momento de la parada •  Scope Variables: valor de las variables en el scope local y global

•  Tip: Si pulsamos sobre el último botón de los botones de ejecución, indicaremos que queremos que se incluya un breackpoint automático ante un error javascript, así podremos analizar el estado justo antes de dicho error.

Chrome Developer Tools PANEL SOURCES

SOURCES Posible uso: entorno de desarrollo web •  Panel Sources puede usarse como editor HTML, CSS y JavaScript •  Sólo útil si desde nuestro servidor podemos acceder a las fuentes del

servidor que estamos visualizando, como suele ser normal cuando desarrollamos en un servidor local

•  Botón derecho à Add Folder to workspace •  Añadimos el directorio con las fuentes y nos aseguramos de darle

permiso •  Podremos editar y guardar desde el propio Chrome Dev Tools

Chrome Developer Tools PANELES TIMELINE Y PROFILE

TIMELINE y PROFILES •  Análisis avanzado del rendimiento de nuestra página •  Orientado para aplicaciones SPA (Single Page Application, como gmail) que contienen

mucha lógica JavaScript •  Timeline

•  Análisis de eventos •  Tiempo de renderizado de cada frame •  Uso de memoria para detección de memory leaks •  Por cada registro podremos ver el tiempo empleado por la operación, y en

algunos incluso el código javascript que ha generado dicha operación.

•  Profiles •  Crear snapshots temporales para analizar patrons de uso concretos

Chrome Developer Tools PANELES CONSOLE

CONSOLE •  Evaluación de expresiones desde el contexto global, o en el contexto local si estamos

en un breackpoint •  Ver salidas de logs que podamos haber introducido en nuestro javascript

•  console.log, console.warn, console.error, console.assertion, console.table, ... •  https://developer.chrome.com/devtools/docs/console#using-the-console-api

•  Opciones con botón derecho •  Visualizar peticiones AJAX (Log XMLHttpRequests) •  No borrar la consola tras recargas de página (Preserve Log upon Navigation)

Chrome Developer Tools ANÁLISIS HTTP

CASO PRÁCTICO de análisis HTTP: autenticación webmail •  Caso práctico en el que veremos cómo nos puede ayudar el panel Network para

extraer información de patrones de acceso •  Útil para tests de integración o chequeos con Webinject

•  Analizaremos las solicitudes HTTP que lleva a cabo el navegador para iniciar sesión en webmail.

•  Preparación

•  Limpiamos panel Network •  Filtramos por Documents, XHR y Others •  Marcamos Preserve log •  Botón derecho sobre tabla -> Clear browser cookies •  Criterio de ordenación: Timeline -> Start Time


FASE 1: Acceder a https://webmail.um.es


•  GET http://webmail.um.es •  Response Headers:

•  Status Code: 302 Found •  Cabecera Location: https://webmail.um.es/login.php •  Pestaña Preview / Response: sin contenido pues es una redirección •  Pestaña Cookies: sin cookies en la solicitud y la respuesta incluye 2 cookies

(Horde y cookie de balanceador), que el navegador asocia a webmail.um.es •  Interpretación: se trata de una redirección automática, por lo tanto la siguiente

llamada que nos encontraremos debería ser una solicitud GET a la URL •  GET http://webmail.um.es/login.php

•  Response Headers: •  Status Code: 302 Found •  Location: cas-login.php?url=https%3A%2F%2Fwebmail.um.es%2Flogin.php

•  Pestaña Cookies: envío de cookies asociadas a webmail.um.es, y no se recibe ninguna nueva

•  Interpretación: otra redirección interna al script de autenticación CAS


GET https://webmail.um.es/cas-login.php?url=https%3A%2F%2Fwebmail.um.es%2Flogin.php •  Response Headers:

•  Status Code: 302 Found •  Location: https://entrada.um.es/cas/login?service=http...

•  Pestaña Preview / Response: sin contenido pues es una redirección •  Pestaña Cookies: envío de cookies asociadas a webmail.um.es, y no se recibe

ninguna nueva •  Interpretación: según define el protocolo CAS, si no hay sesión hay que redirigir al

portal de autenticación CAS. GET https://entrada.um.es/cas/login?service=https%3A%2F%2Fwebmail.um.es%2Fcas-login.php%3Furl%3Dhttps%253A%252F%252Fwebmail.um.es%252Flogin.php •  Response Headers:

•  Status Code: 200 Ok •  Pestaña Preview / Response: contenido HTML con el formulario de autenticación CAS •  Pestaña Cookies: cookie JSESSIONID en la respuesta, que el navegador asocia a

entrada.um.es •  Interpretación: ya no hay redirecciones y se nos muestra contenido, fin de esta

primera fase


FASE 2: Introducir credenciales en formulario CAS


POST https://entrada.um.es/cas/login?service=https%3A%2F%2Fwebmail.um.es%2Fcas-login.php%3Furl%3Dhttps%253A%252F%252Fwebmail.um.es%252Flogin.php •  Request Headers:

•  Form Data: variables del formulario de autenticación username: [email protected] password: ***** lt: execution: e4s1 _eventId: submit submit: Acceder

•  Response Headers: •  Status Code: 302 Movido Temporalmente •  Location: https://webmail.um.es/cas-login.php?url=https%3A%2F

%2Fwebmail.um.es %2Flogin.php&ticket=ST-835596-mrAuTRQ5xuuFxFsVLpxK-1entrada

•  Pestaña Cookies: nos devuelve cookie de sesión CAS CASTGC •  Interpretación

•  Gracias a la sección Form Data sabemos qué parámetros POST se envían, algunos ocultos. Si necesitásemos reproducir la llamada, previamente tendríamos que haber capturado el valor de dichos elementos ocultos.

•  Como la autenticación ha sido correcta, siguiendo el protocolo CAS entrada.um.es redirige a la aplicación con el TOKEN CAS


GET: https://webmail.um.es/cas-login.php?url=https%3A%2F%2Fwebmail.um.es%2Flogin.php&ticket=ST-835596-mrAuTRQ5xuuFxFsVLpxK-1entrada •  Response Headers:

•  Status Code: 302 Movido Temporalmente •  Location: https://webmail.um.es/cas-login.php?url=https%3A%2F

%2Fwebmail.um.es%2Flogin.php •  Pestaña Cookies: Nueva cookie Horde que identificará la sesión autenticada •  Interpretación:

•  Webmail recoge el token de autenticación y lo establece como cookie de sesión •  A continuación se producen varias redirecciones internas de aplicación que

resumiremos •  GET: https://webmail.um.es/cas-login.php?url=https%3A%2F%2Fwebmail.um.es

%2Flogin.php à  Location: https://webmail.um.es/login.php

•  GET: https://webmail.um.es/login.php à Location: https://webmail.um.es/imp/

•  GET: https://webmail.um.es/imp/ à Location: /imp/dynamic.php?page=mailbox


GET: /imp/dynamic.php?page=mailbox •  Response Headers:

•  Status Code: 200 Ok •  Pestaña Preview / Response: respuesta HTML con la interfaz webmail de correo •  Interpretación:

•  Tras varias redirecciones internas, llegamos a la página de inicio de webmail, que es la aplicación de correo

POST: https://webmail.um.es/services/ajax.php/imp/dynamicInit •  Request Headers:

•  Form Data: viewport:{"view":"SU5CT1g","initial":1,"after":30,"before":20,"slice":"1:51” view:SU5CT1g token:LzgSW06fHoMYspHQLgbPBg1

•  Pestaña Preview / Response: contenido JSON •  Interpretación:

•  Es una llamada AJAX de inicializacíón

En este punto, si hemos dejado el panel network activado, iremos viendo las llamadas AJAX que realiza la aplicación.

Technology

En 20 minutos ... Chrome Developer Tools