Saltar al contenido
wandres.dev
Iniciar sesión

Chrome DevTools

Las herramientas por dentro: Elements y la cascada real, breakpoints que no son de línea, el waterfall, el flame chart, cazar fugas y automatizar.

30 unidades · 150 temasEmpezar la ruta
  1. 00

    Nivel 0

    5 temas
    1. 01Qué son las DevTools por dentrohechoen curso
    2. 02El mapa de los paneles: cuatro familias, no veinte pestañashechoen curso
    3. 03Del síntoma al panel: el árbol de decisiónhechoen curso
    4. 04Observar frente a intervenir: las dos modalidadeshechoen curso
    5. 05El método: reproducir, reducir, aislar, confirmarhechoen curso
  2. 01

    Nivel 1

    5 temas
    1. 01Abrir por la puerta correcta y los atajos que ahorran horashechoen curso
    2. 02El menú de comandos: la única interfaz que no envejecehechoen curso
    3. 03Docking, el cajón y la disposición del espaciohechoen curso
    4. 04Los ajustes que cambian cómo depurashechoen curso
    5. 05Experimentos, canales de Chrome y depurar las propias DevToolshechoen curso
  3. 02

    Nivel 2

    5 temas
    1. 01El DOM no es tu HTML: qué muestra realmente el panelhechoen curso
    2. 02Navegar el árbol sin perdersehechoen curso
    3. 03Buscar en el árbol: texto, selectores CSS y XPathhechoen curso
    4. 04Editar el DOM en vivo sin engañartehechoen curso
    5. 05Forzar estados: inspeccionar lo que solo existe mientras no mirashechoen curso
  4. 03

    Nivel 3

    5 temas
    1. 01Leer el panel de estilos como lo que es: la cascada resueltahechoen curso
    2. 02Por qué está tachado: las cinco causas y cómo distinguirlashechoen curso
    3. 03Editar estilos en vivo: el ciclo de iteración de un segundohechoen curso
    4. 04El panel de computados y de dónde sale cada valorhechoen curso
    5. 05Capas, especificidad y el orden real de la cascadahechoen curso
  5. 04

    Nivel 4

    5 temas
    1. 01El inspector de grid: ver las líneas que no existenhechoen curso
    2. 02El inspector de flex y el reparto del espaciohechoen curso
    3. 03El modelo de caja, las guías y de dónde sale ese espaciohechoen curso
    4. 04Scroll y scroll-snap: quién desplaza y por qué no enganchahechoen curso
    5. 05Container queries en el inspector: qué contenedor consulta cada elementohechoen curso
  6. 05

    Nivel 5

    5 temas
    1. 01El árbol de accesibilidad: el otro documento que el navegador construyehechoen curso
    2. 02Nombre, rol y estado: el algoritmo que casi nadie conocehechoen curso
    3. 03Propiedades ARIA computadas: lo implícito frente a lo declaradohechoen curso
    4. 04Contraste: el ratio de WCAG 2, sus fallos y el cálculo de APCAhechoen curso
    5. 05Simular deficiencias de visión y preferencias del usuariohechoen curso
  7. 06

    Nivel 6

    5 temas
    1. 01Los niveles de log y el filtrado que hace la consola usablehechoen curso
    2. 02table, dir y group: dar forma a la salidahechoen curso
    3. 03Contar y medir: count, time y sus límiteshechoen curso
    4. 04trace y assert: descubrir quién llama y qué invariante se rompióhechoen curso
    5. 05Formato: especificadores, estilos con %c y sus límiteshechoen curso
  8. 07

    Nivel 7

    5 temas
    1. 01Las utilidades de selección: $0, $$, $x y el puente con Elementshechoen curso
    2. 02Inspeccionar eventos: getEventListeners, monitorEvents y el panelhechoen curso
    3. 03copy, queryObjects y el resto del arsenal de la consolahechoen curso
    4. 04El contexto de ejecución: iframes, workers y por qué tu selector devuelve nullhechoen curso
    5. 05Expresiones en vivo y preservar el registrohechoen curso
  9. 08

    Nivel 8

    5 temas
    1. 01Anatomía del panel de Sourceshechoen curso
    2. 02Breakpoints de línea, de columna y la lista que los gobiernahechoen curso
    3. 03Breakpoints condicionales y logpoints: instrumentar sin tocar el códigohechoen curso
    4. 04El paso a paso: cuatro modos y cuándo usar cada unohechoen curso
    5. 05Leer el call stack y navegar por los marcoshechoen curso
  10. 09

    Nivel 9

    5 temas
    1. 01Cuando no sabes dónde poner el breakpointhechoen curso
    2. 02Breakpoints de evento: parar en la interacción, no en el códigohechoen curso
    3. 03Breakpoints de DOM: quién ha tocado mi nodohechoen curso
    4. 04Breakpoints de red: cazar la petición fantasmahechoen curso
    5. 05Pausar en excepciones: incluidas las que alguien se tragahechoen curso
  11. 10

    Nivel 10

    5 temas
    1. 01El panel de scope: leer los closures que no sabías que teníashechoen curso
    2. 02Expresiones vigiladas: el panel que convierte el paso a paso en observaciónhechoen curso
    3. 03La pila asíncrona: cómo se reconstruye lo que el motor ya olvidóhechoen curso
    4. 04La lista de ignorados: el ajuste que hace usable el depuradorhechoen curso
    5. 05Depurar cuando la pila pasa por una libreríahechoen curso
  12. 11

    Nivel 11

    5 temas
    1. 01Anatomía de un source map: VLQ, mappings y sourcesContenthechoen curso
    2. 02Cuando el source map falla: los siete modos de fallohechoen curso
    3. 03Depurar TypeScript: lo que sobrevive a la compilación y lo que nohechoen curso
    4. 04Local overrides: editar producción de forma persistentehechoen curso
    5. 05El workspace: editar tu proyecto desde el navegadorhechoen curso
  13. 12

    Nivel 12

    5 temas
    1. 01Snippets: consola guardada que se ejecuta en cualquier páginahechoen curso
    2. 02Snippets de inspección del DOMhechoen curso
    3. 03Snippets de rendimiento y de tamañohechoen curso
    4. 04Snippets de red, almacenamiento y observaciónhechoen curso
    5. 05Diseñar tu caja de herramientashechoen curso
  14. 13

    Nivel 13

    5 temas
    1. 01Anatomía del panel de red: las columnas que importanhechoen curso
    2. 02El desglose del timing: las ocho fases de una peticiónhechoen curso
    3. 03Leer la forma de la cascadahechoen curso
    4. 04Prioridades: por qué el navegador pide las cosas en ese ordenhechoen curso
    5. 05Diagnosticar una carga lenta de principio a finhechoen curso
  15. 14

    Nivel 14

    5 temas
    1. 01Los filtros avanzados del panel de redhechoen curso
    2. 02Bloquear peticiones: la tijera que corta el cablehechoen curso
    3. 03Throttling: simular una red lenta y saber qué simulahechoen curso
    4. 04Desactivar la caché con criterio, y por qué te engañahechoen curso
    5. 05Reproducir las condiciones del usuario que reporta el bughechoen curso
  16. 15

    Nivel 15

    5 temas
    1. 01Leer las cabeceras de caché en el panelhechoen curso
    2. 02Por qué esto no se cachea: las nueve causashechoen curso
    3. 03Diagnosticar un CORS: la preflight y la cabecera que faltahechoen curso
    4. 04El panel de seguridad: certificado, conexión y contenido mixtohechoen curso
    5. 05El HAR: compartir un problema de red sin regalar la sesiónhechoen curso
  17. 16

    Nivel 16

    5 temas
    1. 01Grabar un perfil limpio: todo lo que va antes de pulsar el botónhechoen curso
    2. 02Las pistas del timeline y qué mide cada unahechoen curso
    3. 03Leer un flame chart: la forma dice más que los númeroshechoen curso
    4. 04La pista del hilo principal: el recurso más escaso del navegadorhechoen curso
    5. 05Encontrar la tarea larga y saber a quién pertenecehechoen curso
  18. 17

    Nivel 17

    5 temas
    1. 01Las métricas en vivo: medir mientras usas la páginahechoen curso
    2. 02Las métricas dentro del perfil: de la cifra al instantehechoen curso
    3. 03El desglose de LCP en sus cuatro subparteshechoen curso
    4. 04El desglose de INP en sus tres faseshechoen curso
    5. 05Los diagnósticos automáticos del panel: qué detecta y qué se le escapahechoen curso
  19. 18

    Nivel 18

    5 temas
    1. 01La tabla de formas: si el perfil tiene esta silueta, mira aquíhechoen curso
    2. 02El perfil del layout thrashing: franjas moradas dentro del scripthechoen curso
    3. 03El perfil de un tercero pesado: medir lo que no controlashechoen curso
    4. 04El perfil de la hidratación: la página que se ve y no respondehechoen curso
    5. 05Los dos perfiles que no son picos: repintado continuo y degradación progresivahechoen curso
  20. 19

    Nivel 19

    5 temas
    1. 01Resaltado de repintado: ver exactamente qué se redibujahechoen curso
    2. 02Regiones de salto de disposición: ver el contenido que se muevehechoen curso
    3. 03Bordes de capa: ver el modelo de composición del navegadorhechoen curso
    4. 04Estadísticas de fotogramas y problemas de desplazamientohechoen curso
    5. 05Emular preferencias del sistema, esquema de color y visiónhechoen curso
  21. 20

    Nivel 20

    5 temas
    1. 01Qué es un heap snapshot y qué le hace a tu páginahechoen curso
    2. 02Leer un snapshot: las vistas, la distancia y los nodos sintéticoshechoen curso
    3. 03Tamaño superficial frente a tamaño retenidohechoen curso
    4. 04El camino de retención: leer por qué algo sigue vivohechoen curso
    5. 05Encontrar qué mantiene vivo un objeto concretohechoen curso
  22. 21

    Nivel 21

    5 temas
    1. 01La técnica de los tres snapshots y por qué treshechoen curso
    2. 02La línea de tiempo de asignaciones: cuándo se creó lo que no se liberahechoen curso
    3. 03Nodos separados: elementos que ya no están en la página y siguen en memoriahechoen curso
    4. 04Escuchas que nunca se quitan y otras suscripciones huérfanashechoen curso
    5. 05Una fuga de principio a fin: el caso completohechoen curso
  23. 22

    Nivel 22

    5 temas
    1. 01Almacenamiento web: el panel, sus dos ámbitos y sus tres límiteshechoen curso
    2. 02IndexedDB en el inspector: bases, almacenes, índices y versioneshechoen curso
    3. 03Cookies en el panel: los atributos que deciden si viajanhechoen curso
    4. 04Cache storage y el manifiesto de la aplicación webhechoen curso
    5. 05La cuota de almacenamiento y la política de desalojohechoen curso
  24. 23

    Nivel 23

    5 temas
    1. 01El ciclo de vida del service worker, visible en el panelhechoen curso
    2. 02Forzar la actualización: skipWaiting, claim y actualizar al recargarhechoen curso
    3. 03Provocar eventos: modo desconectado, push y sincronizaciónhechoen curso
    4. 04Inspeccionar y purgar la caché del workerhechoen curso
    5. 05El bug clásico: el worker que sirve una versión antigua para siemprehechoen curso
  25. 24

    Nivel 24

    5 temas
    1. 01Capturar animaciones: qué ve el panel y qué es invisible para élhechoen curso
    2. 02La línea de tiempo del grupo: leer la coreografíahechoen curso
    3. 03Ralentizar: ver lo que ocurre en trescientos milisegundoshechoen curso
    4. 04Editar curvas y tiempos en vivohechoen curso
    5. 05El flujo completo de ajuste fino de una transiciónhechoen curso
  26. 25

    Nivel 25

    5 temas
    1. 01Qué mide Lighthouse y cómo lo simulahechoen curso
    2. 02Laboratorio frente a campo: dos números que no miden lo mismohechoen curso
    3. 03La puntuación: qué significa el número y qué nohechoen curso
    4. 04El treemap: de dónde sale cada kilobyte de tu paquetehechoen curso
    5. 05Los tres modos de auditoría y para qué sirve cada unohechoen curso
  27. 26

    Nivel 26

    5 temas
    1. 01El panel de cobertura: qué se ejecutó y qué nohechoen curso
    2. 02Cobertura de CSS: por qué siempre sale un número escandalosohechoen curso
    3. 03Cobertura de JavaScript: granularidad, ramas y carga diferidahechoen curso
    4. 04Los límites reales de la cobertura y qué se le escapahechoen curso
    5. 05La vista general del CSS: colores, tipografías y complejidadhechoen curso
  28. 27

    Nivel 27

    5 temas
    1. 01La emulación de dispositivo: qué cambia realmentehechoen curso
    2. 02En qué miente la emulación de dispositivohechoen curso
    3. 03El throttling de CPU: qué hace el multiplicador por dentrohechoen curso
    4. 04Depuración remota por USB: las DevTools sobre un dispositivo realhechoen curso
    5. 05Port forwarding y la inspección de un WebViewhechoen curso
  29. 28

    Nivel 28

    5 temas
    1. 01El protocolo por debajo: ver el tráfico que genera cada clichechoen curso
    2. 02Dominios, comandos y eventos: el mapa del protocolohechoen curso
    3. 03La grabadora: capturar un flujo de usuario y reproducirlohechoen curso
    4. 04Exportar a Puppeteer: de la grabación al scripthechoen curso
    5. 05Automatizar auditorías de rendimiento en integración continuahechoen curso
  30. 29

    Nivel 29

    5 temas
    1. 01El método completo de depuraciónhechoen curso
    2. 02La tabla síntoma, panel, acción: el índice completo del trackhechoen curso
    3. 03La bisección como técnica generalhechoen curso
    4. 04Cuándo dejar de depurar y volver a leer el códigohechoen curso
    5. 05Los hábitos que separan diez minutos de un día enterohechoen curso