Herramientas de desarrollo de Chrome (Tutorial)

Idioma: Alemán

Utilizar eficazmente las Herramientas de Desarrollo de Chrome (Tutorial)

Con las Herramientas de desarrollo de Chrome, puedes analizar y editar tus páginas web, realizar análisis de rendimiento y probar tus páginas en diferentes dispositivos y tamaños de pantalla. Aprende en este tutorial las funciones principales de las DevTools. Cómo detectar errores en HTML, CSS y JavaScript, encontrar formas de optimizar el rendimiento y el consumo de memoria, y mejorar los diseños de tus páginas - ¡El instructor Stephan Haewß te mostrará en ejemplos prácticos cómo proceder!

Aprende las funciones principales de las herramientas para desarrolladores de Chrome
Depurar y optimizar código HTML, CSS y JavaScript
Seguir el flujo del código, identificar y corregir errores
Adaptar animaciones, estilos y diseños CSS
Mejorar el rendimiento y el consumo de memoria de los sitios web
Para sitios web sin errores y rápidos con diseños optimizados - un curso de más de seis horas del instructor Stephan Haewß

Un código limpio contribuye significativamente a la visibilidad de tus páginas web. Aprende ahora cómo utilizar las herramientas de desarrollo de Chrome para analizar y optimizar tus páginas.

detalles

Contenido: 6 h Formación en vídeo
Licencia: privada y comercial Derechos de uso

Categorías

Diseño web, CMS y desarrollo

Creado con amor por:

Stephan Haewß

Introducción al curso sobre las Herramientas de Desarrollo de Chrome

Herramientas de desarrollo de Chrome: 1.1 | ¿Qué aprendes en este curso?

Gratuito

Chrome Developer Tools: 1.1 | ¿Qué aprenderás en este curso?

Aquí se dará una visión general de todos los temas que se tratarán en este curso.

Chrome Developer Tools: 1.2 | Crear la aplicación web de prueba

Gratuito

Chrome Developer Tools: 1.2 | Crear aplicación web de prueba

Se crea la primera aplicación web, donde se explican los primeros pasos para usar las herramientas de desarrollo.

Herramientas de desarrollo de Chrome: 1.3 | Primera visión general de las funcionalidades

Gratuito

Chrome Developer Tools: 1.3 | Primera visión general de las funcionalidades

Introducción a los diferentes paneles de DevTools y su funcionamiento básico.

Estilo, diseño, apariencia a través de la pestaña Elementos

Herramientas para desarrolladores de Chrome: 2.1 | Inspeccionar la estructura del DOM en la pestaña Elementos

Herramientas de desarrollo de Chrome: 2.1 |Inspeccionar la estructura del DOM en la pestaña Elementos

Detalle de la estructura HTML de una página web y cómo seleccionar y editar elementos en la pestaña de Elementos.

Herramientas de desarrollador de Chrome: 2.2 | Cambiar estilo

Herramientas para desarrolladores de Chrome: 2.2 | Cambiar estilo

Edición en vivo de estilos CSS y examen de la influencia en la visualización del sitio web.

Herramientas de desarrollo de Chrome: 2.3 | Editar HTML, DOM

Cambiar la estructura HTML y observar el impacto en el DOM.

Herramientas para desarrolladores de Chrome: 2.4 | Vista móvil - Probar diseño adaptable

Chrome Developer Tools: 2.4 | Vista móvil - Probar diseño responsivo

Simulación de diferentes tamaños de dispositivos y verificación de la adaptabilidad del sitio web.

Chrome Developer Tools: 2.5 | Ejercicio práctico: Reparar menú de páginas

Corrección de un error en un menú de la página.

Chrome Developer Tools: 2.6 | Ejercicio práctico: Reparar Layout/Overflow

Herramientas de desarrollo de Chrome: 2.6 | Ejercicio práctico: Reparar el diseño/desbordamiento

Solución de problemas de diseño y errores de desbordamiento.

Depuración de scripts a través de Sources y Console

Herramientas de desarrollo de Chrome: 3.1 | Introducción: Depuración de scripts y establecimiento del primer breakpoint

Chrome Developer Tools: 3.1 | Presentación: Depuración de scripts y establecimiento del primer punto de interrupción

Introducción a la depuración de código JavaScript y cómo establecer puntos de interrupción.

Herramientas de desarrollo de Chrome: 3.2 | Ejercicio práctico: Depurar la aplicación TypeScript

Herramientas de desarrollo de Chrome: 3.2 | Ejercicio práctico: depurar aplicación TypeScript

Depuración de código TypeScript con las DevTools.

Herramientas de desarrollo de Chrome: 3.3 | Ejercicio práctico: Depuración - Encontrar errores al eliminar de un array

Herramientas de desarrollo de Chrome: 3.3 | Ejercicio práctico: Depuración - Encontrar errores al borrar de un Array

Búsqueda y corrección de un error al eliminar elementos de un array.

Herramientas de desarrollo de Chrome: 3.4 | Ejercicio práctico: depurar la aplicación React

Herramientas de desarrollo de Chrome: 3.4 | Ejercicio práctico: Depurar aplicación React

Técnicas de depuración específicas para aplicaciones de React.

Herramientas de desarrollo de Chrome: 3.5 | Puntos de interrupción condicionales

Herramientas para desarrolladores de Chrome: 3.5 | Interrupciones condicionales

Establecimiento de puntos de interrupción que solo se activan bajo ciertas condiciones.

Chrome Developer Tools: 3.6 | DOM Breakpoints

Herramientas de desarrollador de Chrome: 3.6 | Puntos de interrupción del DOM

Herramientas de desarrollo de Chrome: 3.6 | Evaluación del DOM

Vigilancia de cambios en elementos DOM específicos.

Herramientas de desarrollo de Chrome: 3.7 | Puntos de interrupción de fetch

Chrome Developer Tools: 3.7 | Puntos de interrupción de Fetch

Detención del código en solicitudes de red.

Chrome Developer Tools: 3.8 | Puntos de interrupción de excepciones

Herramientas de desarrollador de Chrome: 3.8 | Puntos de interrupción de excepción

Parada automática en caso de errores.

Chrome Developer Tools: 3.9 | Overrides y Espacio de trabajo

Herramientas de desarrollo de Chrome: 3.9 | Overrides y espacio de trabajo

Ajuste de estilos y scripts sin realizar cambios en el código original.

Herramientas de desarrollo de Chrome: 3.10 | Depuración paso a paso y en puntos específicos

Herramientas de desarrollo de Chrome: 3.10 | Depurar paso a paso y en puntos específicos

Control detallado del proceso de depuración.

Herramientas de desarrollo de Chrome: 3.11 | Consola: Vista general, ejecución de código simple y salidas

Herramientas de desarrollo de Chrome: 3.11 | Consola: Visión general, ejecución de código simple y salidas

Introducción a la consola y sus funciones básicas.

Herramientas para desarrolladores de Chrome: 3.12 | Acceso a elementos del DOM en la consola

Manipulación del DOM directamente a través de la consola.

Herramientas de desarrollo de Chrome: 3.13 | Fragmentos y medición del tiempo en la consola

Trozos de código reutilizables y mediciones de rendimiento.

Herramientas de desarrollo de Chrome: 3.14 | Agrupar y dar estilo a las salidas de registro

Herramientas de desarrollo de Chrome: 3.14 | Agrupar y estilizar las salidas de registro

Los registros de salida se pueden cambiar y agrupar por color y tipo de fuente.

Herramientas de desarrollo de Chrome: 3.15 | Más métodos de consola útiles

Herramientas de desarrollador de Chrome: 3.15 | Otros métodos útiles de la consola

Algunas funciones de consola no muy comunes pero aún así útiles.

Análisis y optimización de redes

Herramientas de desarrollo de Chrome: 4.1 | Red: Resumen de las funciones

Chrome Developer Tools: 4.1 | Red: Resumen de las funciones

Análisis de solicitudes y respuestas de red.

Herramientas de desarrollo de Chrome: 4.2 | Red: Limitación, Cabeceras y Vista previa

Herramientas de desarrollo de Chrome: 4.2 | Red: Throttling, Cabeceras y Vista previa

Simulación de conexiones de red lentas y análisis de cabeceras HTTP.

Optimización de rendimiento y memoria

Herramientas para desarrolladores de Chrome: 5.1 | Analizar y optimizar el rendimiento del Profiler

Chrome Developer Tools: 5.1 | Inspeccionar y optimizar el rendimiento del Perfilador - Rendimiento

Identificación de cuellos de botella de rendimiento en código JavaScript.

Chrome Developer Tools: 5.2 | Optimizar el uso de memoria con el perfilador de memoria

Chrome Developer Tools: 5.2 | Optimiza el uso de memoria con el Memory Profiler

Análisis del consumo de memoria y identificación de fugas de memoria.

Pestaña de aplicaciones y otras herramientas

Chrome Developer Tools: 6.1 | Herramientas útiles y pestaña de Renderizado

Herramientas de desarrollo de Chrome: 6.1 | Pestaña de herramientas útiles y de renderización

Más herramientas para la optimización del rendimiento.

Chrome Developer Tools: 6.2 | Observar y ajustar animaciones

Análisis detallado de animaciones y transiciones CSS. Optimización del rendimiento mediante ajuste de funciones de temporización y propiedades.

Herramientas para desarrolladores de Chrome: 6.3 | Examinar recursos de la aplicación web con la pestaña Aplicación

Herramientas para desarrolladores de Chrome: 6.3 | Inspeccionar recursos de la aplicación web con la pestaña de Aplicaciones

Examen de los datos almacenados en una aplicación web como Local Storage, Session Storage e IndexedDB. Optimización de la gestión de almacenamiento.

Herramientas de desarrollador de Chrome: 6.4 | Usar la extensión React Dev Tools

Herramientas de desarrollo de Chrome: 6.4 | Usar la extensión React Dev Tools

Introducción a la extensión del navegador React DevTools. Inspección de la estructura de componentes, Props y Estado de React.

Ajustes

Herramientas de desarrollo de Chrome: 7 | Las configuraciones más importantes de las Herramientas de desarrollo de Chrome

Configuración de las DevTools para un trabajo más eficiente. Adaptación de themes, atajos de teclado y otros ajustes.

Herramientas de desarrollo de otros navegadores

Chrome Developer Tools: 8.1 | Las herramientas de desarrollo de MS Edge

Herramientas de desarrollo de Chrome: 8.1 | Las herramientas de desarrollo de MS Edge

Muy similar a las herramientas de desarrollo de Chrome, pero hay diferencias en los detalles.

Chrome Developer Tools: 8.2 | Las herramientas de desarrollador de Firefox

Herramientas de desarrollo de Chrome: 8.2 | Las herramientas de desarrollo de Firefox

Diferencias notables están presentes, pero en principio son muy similares.

Herramientas de desarrollo de Chrome: 8.3 | Las Safari-DevTools

Herramientas de desarrollo de Chrome: 8.3 | Las herramientas de desarrollo de Safari

Hay diferencias bastante grandes en comparación con Chrome, pero el principio es el mismo aquí también.

Detalles del contenido

Optimiza tus sitios web con las herramientas de desarrollo de Chrome
¿Un sitio web sin errores, que se cargue súper rápido y luzca bien en cualquier tamaño de pantalla?! Para lograr esto, debes analizar y optimizar el código de tus páginas. Las herramientas de desarrollo de Chrome son perfectas para eso. Con ellas, puedes descubrir errores en tu código HTML, CSS y JavaScript. Además, puedes ver detalladamente el rendimiento, los flujos de código y el uso de memoria. Utiliza estos conocimientos para editar tus páginas de manera efectiva y, finalmente, aumentar la visibilidad de tus páginas a través de la depuración y optimización.
Aprenderás cómo aplicar de manera efectiva las herramientas de desarrollo de Chrome en este tutorial de más de seis horas del desarrollador de software y entrenador Stephan Haewß. ¡Comienza con los conceptos básicos de las DevTools de Chrome y avanza hacia técnicas avanzadas, para que tus páginas tengan una apariencia limpia y potente!

HTML, CSS, JavaScript – Depuración para sitios web limpios y rápidos con diseños optimizados

El curso comienza con una introducción a las herramientas de desarrollo de Chrome, disponibles directamente en el navegador. Aprenderás qué son las DevTools y cómo puedes aplicarlas de forma básica. Luego, te enfocarás en la pestaña Elements, a través de la cual puedes inspeccionar y editar el estilo, el diseño y la apariencia de tus páginas. Con las secciones Sources y Console, realizarás depuración de scripts. Además, aprenderás a realizar análisis de red, optimización de rendimiento y memoria con las herramientas de desarrollo de Chrome. Por último, obtendrás una visión general de las DevTools de otros navegadores. En general, el curso es adecuado para todos los desarrolladores web que deseen depurar y optimizar sitios web utilizando las DevTools de Chrome.

Aplicación eficaz de las Chrome DevTools: Contenido del tutorial resumido

Introducción a las Chrome DevTools: El curso te muestra cómo abrir las DevTools, navegar en ellas y utilizar eficazmente las funciones principales para editar y solucionar problemas de HTML, CSS y JavaScript.
Depuración de HTML y CSS: Cómo inspeccionar el árbol DOM de una página web, editar HTML y CSS directamente en modo en vivo y corregir problemas de diseño y errores de estilo CSS al instante, ideal para probar y ajustar rápidamente el diseño antes de aplicar cambios permanentes.
Depuración de JavaScript: Aprende cómo cargar archivos JavaScript, establecer puntos de interrupción y ejecutar el código paso a paso. Puedes examinar variables y objetos en tiempo real, mientras que la pila de llamadas facilita el seguimiento de las llamadas a funciones, ideal para una búsqueda precisa de errores.
Uso de la consola: La consola de las herramientas de desarrollo de Chrome permite abrir y analizar registros, ejecutar código JavaScript y manipular directamente elementos de la página web. Mediante salidas de registro específicas, puedes analizar y optimizar el código a fondo, lo que facilita significativamente la depuración y la mejora del rendimiento.
Optimización de rendimiento: Verifica las solicitudes de red y los tiempos de carga, supervisa el uso de memoria e identifica fugas de memoria. Al optimizar deliberadamente el rendimiento de JavaScript y realizar análisis detallados del rendimiento de la aplicación, puedes mejorar de manera eficiente la velocidad de carga y la gestión de recursos.
Técnicas avanzadas: El panel de Application de las herramientas de desarrollo de Chrome te brinda acceso a almacenamientos web como LocalStorage, IndexedDB y la caché, así como la gestión de Service Workers y Manifiestos. También puedes integrar extensiones como React DevTools para depurar mejor aplicaciones reactivas. Las configuraciones personalizables ofrecen una configuración óptima de las DevTools para requisitos de trabajo individuales.