Este documento presenta las herramientas Chrome Developer Tools. Explica cómo usar los paneles Elements, Network, Resources, Sources, Timeline, Console y realiza un caso práctico de análisis HTTP para la autenticación en un webmail. Muestra las solicitudes HTTP y redirecciones que ocurren durante el proceso de inicio de sesión para extraer información sobre los patrones de acceso.

1. Chrome Developer Tools

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

3. 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

4. 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

5. Chrome Developer Tools
Presentación de la herramienta
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...

6. Chrome Developer Tools
Presentación de la herramienta
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

7. 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)

8. 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

9. 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

10. Chrome Developer Tools
PANEL NETWORK
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)

11. Chrome Developer Tools
PANEL NETWORK
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.

12. Chrome Developer Tools
PANEL NETWORK
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

13. Chrome Developer Tools
PANEL NETWORK
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

14. Chrome Developer Tools
PANEL NETWORK
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

15. 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

16. 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.

17. 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

18. 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

19. 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)

20. 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

21. Chrome Developer Tools
ANÁLISIS HTTP
FASE 1: Acceder a https://webmail.um.es

22. Chrome Developer Tools
ANÁLISIS HTTP
• 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

23. Chrome Developer Tools
ANÁLISIS HTTP
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

24. Chrome Developer Tools
ANÁLISIS HTTP
FASE 2: Introducir credenciales en formulario CAS

25. Chrome Developer Tools
ANÁLISIS HTTP
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: usuario@um.es
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

26. Chrome Developer Tools
ANÁLISIS HTTP
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

27. Chrome Developer Tools
ANÁLISIS HTTP
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.