Instruido por el gran: Diego De Granda
Enlaces de Interés:
Documentación oficial DevTools
0:37 Cursos previos recomendados: Curso de Desarrollo Web Online Curso Práctico de HTML y CSS Curso Básico de JavaScript
1:06 ¿Por qué Debugging? ¿De dónde viene eso?. Es el proceso de encontrar y resolver defectos o problemas dentro de un programa (software) que impide el funcionamiento correcto del programa o sistema.
2:24 Historia del primer debugging documentado. El reporte contiene pegado el insecto que ocasionaba el mal funcionamiento. Wikipedia
0:04 Overview para los estudiantes que no conocen nada de DevTools.
0:43 Sección Elementos.
1:23 Seleccionando un elemento en la página.
2:45 Modificando los nodos del HTML.
3:25 Moviendo los nodos.
5:21 Shorcuts para acceder a las funcionalidades del inspector con más eficiencia.
Enlaces de la clase:
Chrome DevTools | Tools for Web Developers | Google Developers
Enlaces complementarios:
Get Started With Viewing And Changing The DOM
Comentarios valiosos de la comunidad:1
1:08 Modificando Estilos. Experimentando.
4:14 Usando las flechas Up y Down para modificar valores de las propiedades.
5:44 Sección :hov nos permite acceder a los estados de las pseudo clases.
Enlaces de la clase:
Live Server - Visual Studio Marketplace
Enlaces complementarios:
Get Started With Viewing And Changing CSS
Comentarios valiosos de la comunidad:1
0:43 ¿Cómo extraer colores o generar colores con el inspector?
3:27 Agregando colores base de tu proyecto como valores customizados.
4:38 Extraer colores con Color Picker.
Enlaces de la clase:
Enlaces complementarios:
Modificar colores con el Selector de colores
Comentarios valiosos de la comunidad:1
1:46 Generando sombra sobre un elemento imagen.
3:18 Creando sombra sobre un elemento tipo Texto.
Enlaces de la clase:
Enlaces complementarios:
Comentarios valiosos de la comunidad:1
1:34 Accediendo a herramienta de Animaciones: Menú > More tools > Animations
Enlaces de la clase:
Curso de Animaciones para la Web
Animate.css
Enlaces complementarios:
Inspeccionar animaciones
Comentarios valiosos de la comunidad:1, 2
2:08 ¿Cómo podemos verificar cuál es la cantidad de código que no ocupamos?. Accediendo a: Menú > More tools > Coverage
2:34 Comenzando a grabar: Lo Rojo es código que no usamos. Lo verde es código que si ocupamos.
Enlaces complementarios:
Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools
Comentarios valiosos de la comunidad:1, 2, 3
0:58$0 nos trae el elemento seleccionado del DOM.
1:13JS Path nos permite obtener el elemento seleccionado con una función de JS (document.querySelector(“body > header”). Incluye ejemplo de cómo usarlo.
2:49 Desde la Consola podemos con JS: seleccionar elementos, agregar estilos, agregar nuevos elementos al DOM.
Enlaces de la clase:
Enlaces complementarios:
Tutorial de Eduardo P. Rivero complementando algunas cosas no dichas en la clase.
Comentarios valiosos de la comunidad:1, 2
1:09 Conectando nuestros archivos locales al FileSystem del DevTools para guardar de forma dinámica todos los cambios que hagamos sobre nuestros archivos directamente desde el navegador.
Enlaces complementarios:
Tutorial Overrides, cómo activarlo y usarlo de George Hossa
Edit Files With Workspaces
Comentarios valiosos de la comunidad:1
1:31 Alternando vista con Toggle device toolbar.
2:06 Break Points (media querys). Dimensiones más comunes.
3:39 Emulando dispositivos móviles.
8:01 Mostrar media querys del proyecto.
8:18 Agregando Tipo de dispositivo. Si se trata de un dispositivo móvil touch o no touch, o si se trata de un desktop touch o no touch.
9:04 Mostrar el frame del dispositivo móvil. No está disponible para todos los dispositivos.
9:56 Device pixel ratio. Es una forma de modificar los pixels del dispositivo que se está emulando.
12:36 Online. Para emular una conexión media o baja típica de un operador móvil.
Enlaces de la clase:
Curso de Responsive Design
Enlaces complementarios:
Simulación de dispositivos móviles con Device Mode en Chrome DevTools
Comenzar con la depuración remota de dispositivos Android
Depurar Progressive Web App
WebViews con depuración remota
Comentarios valiosos de la comunidad:1, 2, 3
1:59 Modificando el Performance para emular redes de baja velocidad y CPU menos potentes.
Performance > Network:
Performance > CPU:
5:38 Emular sensores de locación y orientación. Menú > More tools > Sensors
Enlaces complementarios:
Override Geolocation With Chrome DevTools
Simulate Device Orientation With Chrome DevTools
Comentarios valiosos de la comunidad:1, 2
2:45 Activando Event Listener para escuchar el evento Click. Sources > Event Listener Breakpoints > Mouse > click. Esto lo que hace es generar un breakpoint que detiene la ejecución del código en la línea de la función asociada al evento que estamos “escuchando”.
Enlaces de la clase:
Demo: Get Started Debugging JavaScript with Chrome DevTools
Enlaces complementarios:
Comenzar a depurar JavaScript en Chrome DevTools
0:41 Continuando el debugging de la clase anterior.
5:54 Generando un breakpoint desde la línea manualmente.
1:36 Iniciando Network. Para que funcione debemos refrescar la página ya que solo captura la data cuando el network está abierto.
2:34 Descripción:
Name: nombre de los archivos
Status: respuesta del servidor
Type: tipo de archivo
Initiator: archivo que generó se petición y descarga
Size: tamño del archivo (minificado y sin minificar)
Time: tiempo de descarga
Waterfall: cascada de tiempo en forma de gráfico de barras.
Enlaces de la clase:
Inspect Network Activity Demo
Enlaces complementarios:
Tutorial ¿Qué es Minificar archivos?
Inspect Network Activity In Chrome DevTools
2:33 Mostrando más propiedades: Domain. Para mostrar el dominio de donde proviene el archivo.
5:03 Simulando conexiones de red: Online (Normal) Fast 3GSlow 3GOfflineCustom
6:40 Filtrando o bloqueando archivos para que no se descarguen en el navegador. Ctrl+Shift+P > Show Request blocking > + > Archivo.ext
Enlaces de la clase:
HTTP Cats
Enlaces complementarios:
Los códigos de estado de HTTP
Códigos de estado de respuesta HTTP | MDN
11:46 Reto de la clase.
Enlaces de la clase:
Get Started With Analyzing Runtime Performance
Enlaces complementarios:
Tutorial ¡Aprende a optimizar tus sitios web! - Resolviendo el reto de la clase de optimización de RetaxMaster
Comentarios valiosos de la comunidad:1
1:15 Inspeccionando Sindelantal.mx
5:49 Inspeccionando Rappi.com.mx
Enlaces de la clase:
Accessibility | Web Fundamentals | Google Developers
Tu primera Progressive Web App | Web Fundamentals | Google Developers
Enlaces complementarios:
Lighthouse
0:25 Auditando Sindelantal.mx (desktop)
2:15 Auditando Rappi.com.mx (desktop)
Comentarios valiosos de la comunidad:1
Enlaces de la clase:
Curso de JavaScript Engine (V8) y el Navegador
Curso Básico de JavaScript
Curso Profesional de JavaScript
Curso de Progressive Web Apps con React.js
Curso de Progressive Web Apps con Angular
Obtén un mes gratis en Platzi
0:47 Pre-caché. Estrategia por medio del manifiesto.
1:55 Una PWA tiene que correr rápido. Una página debe poder generar interacción con el usuario en 2 segundos. Es una buena práctica.
3:19 Creación de un acceso directo al escritorio del dispositivo. Allí podemos customizar toda la vista del navegador para que el usuario no detecte que está en un navegador.
3:55 Generar push notifications.
Enlaces de la clase:
Tu primera Progressive Web App | Web Fundamentals | Google Developers
Gracias