En 20 minutos ... Chrome Developer Tools

1,922 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,922
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

En 20 minutos ... Chrome Developer Tools

  1. 1. Chrome Developer Tools
  2. 2. En 20 minutos ... 5 de Junio, 2014 Alfonso Marín Marín
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21. Chrome Developer Tools ANÁLISIS HTTP FASE 1: Acceder a https://webmail.um.es
  22. 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. 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. 24. Chrome Developer Tools ANÁLISIS HTTP FASE 2: Introducir credenciales en formulario CAS
  25. 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. 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. 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.

×