this.slides.reverse();

¡Gracias!

Eduardo Sada

@aeroalquimia

Lo que hemos visto

🎁 Novedades de la Devtools

Invalidations

⚡️Performance Auditing

PWA Panel

CodeCoverage

🔥Network Performance

Blackboxing

Quicksource

Node Debug

Timeline

Auditorías de Performance

Técnicas Forenses Debugging

Y por último...

¡La app funcionando perfectamente!

Enlace..

{

  Presentaría la app. Diría lo que hace.

  Oops.. un error.

  ¿Cómo lo arreglo?

}

Debugging is easy

console.log(allTheThings);

click en un botón, abre un popup pero se ve que ha pasado algo feo.. error asincrono en la consola

Aquí viene un ejemplo fácil de arreglar

Es POLYMER

Primera regla del debugging

1. Aísla el problema

Inspecciono evento click en la consola (desde el panel Events)

Aparece Polymer, pero hago blackboxing para ver dónde está mi código

Blackboxing

Consola Verbosa

Mostrar un error de consola verbosa que podamos arreglar fácilmente.. la del evento pasivo del scroll puede ser

DOM is slow

Layout invalidations

// Arreglar una layout trashing

Workflow

Danceflow

🕺🏻

Devtools as an IDE

Quicksource

Arrastrar folder y guardar

Diff

Performance Auditing

Lighthouse Integrado

Quiero crear mi PWA

Service Workers

Manifest

Instalar como Home App

Network Performance

Network Timing

Minimizador de CSS

// Error en la tarea GULP

Debugging en Node

node --inspect --debug-brk gulp css

Performance People & Githubs

@addy osmani

@paul irish

@paul lewis

@aeroalquimia

Eduardo Sada

@aeroalquimia

¡Hola!

¡Gracias!

Eduardo Sada

@aeroalquimia