Conocimientos y habilidades que adquieres realizando este curso

  • Conocerás las herramientas de Chrome para desarrolladores
  • Analizarás y modificarás las estructura y los estilos de las webs desde esas herramientas.
  • Conocerás toda la potencia que la consola JavaScript proporciona a los desarrolladores.
  • Depurarás los scritps de tus páginas.

Temario

Introducción 32m

  • Presentación (vista previa)

    2m
  • ¿Cómo mostrar las Chrome Developer Tools?

    5m
  • ¿Cómo acceder a las Chrome Developer Tools?

    5m
  • Paneles de Chrome DevTools

    7m
  • Modo Device

    9m
  • Resto del curso

    2m
  • Modificando la página

    11m
  • Inspector CSS

    13m
  • WorkSpaces: Persistiendo los cambios

    9m
  • Práctica: Panel Elements

    7m
  • Panel de depuración

    4m
  • Breakpoints (Code, DOM, Network, Events)

    13m
  • Depuración remota

    8m
  • Práctica: Breakpoints

    7m

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Curso de maquetación web con CSS

Curso de maquetación web con CSS

curso

Con este curso aprenderás:

  • Aprenderás a crear de manera clara y eficaz la estructura de tu Web colocando los elementos donde tú deseas.
  • Conocerás el funcionamiento a nivel de maquetación de los distintos tipos de etiquetas.
  • Comprenderás cómo funciona el flujo de una Web

Duración: 2 horas y 10 minutos

Curso de HTML5 y CSS3

Curso de HTML5 y CSS3

curso

Con este curso aprenderás:

  • Aprenderás lo qué es HTML y CSS.
  • Conocerás la estructura de una página Web.
  • Podrás añadir todo tipo de contenido a dichas páginas web.

Duración: 4 horas y 21 minutos

Curso de Flexbox y CSS Grid

Curso de Flexbox y CSS Grid

curso

Con este curso aprenderás:

  • Conocerás toda la potencia de los nuevos contenedores que nos proporciona CSS3.
  • Conocerás las posibilidades de los contenedores FLEX.
  • Aprenderás las características de los contenedores GRID.

Duración: 2 horas y 2 minutos

Preguntas Frecuentes

En OpenWebinars no vendemos cursos, talleres o laboratorios unitarios.

Tenemos diferentes tipos de suscripciones, que te dará acceso completo a todos los cursos de la plataforma y a los nuevos que vamos lanzando, siempre y cuando tu suscripción esté activa (como Spotify con la música o Netflix con las películas y series).

¿Eres una empresa? Tenemos planes especiales para ti. Consúltanos aquí.

En OpenWebinars los cursos no tienen fecha de inicio y de final.

Cada curso tiene una fecha de publicación y desde ese día estarán 100% disponible todos los contenidos del curso para los usuarios suscritos a alguno de nuestros planes.

Efectivamente, una vez superado cada curso podrás descargarte el diploma acreditativo de cada uno de ellos. Añade estos cursos a tu CV y mejora tu perfil para las empresas. También podrás obtener un diploma de nivel superior al superar todos los cursos de la carrera.

Descripción

Este curso te permitirá conocer a fondo las herramientas que Chrome proporciona a los desarrolladores, con las que se pueden analizar y modificar cualquier página web y sus estilos. También te servirá para comenzar a utilizar su potente consola JavaScript para revisar y depurar los scripts utilizados en una web.

Esta formación está dirigida principalmente a desarrolladores frontend que quieran mejorar el proceso de desarrollo web, aprovechando al máximo las Developers Tools que incluye Chrome, por lo que sería necesario tener conocimientos de HTML, CSS, JavaScript y HTTP para seguirlo de forma correcta y comprender todo lo que se explica a lo largo del mismo.

Si necesitas conseguir esa formación previa en algunos de las tecnologías nombradas, te recomendamos realizar previamente alguno de nuestros cursos, como el Curso de HTML5 y CSS3 o el Curso de JavaScript para principiantes, que encontrarás en nuestra plataforma.

Comentar también que este curso es el primero de los dos que componen el itinerario formativo sobre las Devtools de Chrome, de las que veremos su aplicación en el desarrollo en este primer curso, mientras que en el segundo nos centraremos en el uso de las mismas para el análisis y la mejora del rendimiento de la página web.

Para iniciar este curso sobre las Developers Tools de Chrome, el profesor ha preparado un bloque inicial a modo de introducción, en el que explicará que son estas herramientas, los objetivos que permiten conseguir, cómo acceder a ellas, cómo se organizan y las diferentes versiones que podemos tener de las mismas.

Una vez que has tenido esta primera toma de contacto con las herramientas, seguiríamos con el resto de secciones del curso, que estarán centradas en los diferentes paneles de las Devtools, para conocerlos más a fondo y poder exprimir todas las opciones que permiten.

En el siguiente bloque se explicará a fondo el panel Elements a lo largo de las diferentes lecciones que lo componen. Aquí aprenderás a modificar el HTML y el CSS de tu página web desde este panel y utilizando también el inspector CSS, además de utilizar Workspaces para persistir los posibles cambios que realices en tu página.

Para concluir este segundo bloque del curso, encontrarás una completa práctica que te permitirá verificar si has comprendido bien toda la parte de teoría previa y asentar la misma de una forma aplicada. La idea es que intentes realizarla por tu cuenta, pero encontrarás el desarrollo de la misma efectuado por el tutor, por si te atascas o necesitas verificar algún paso.

Seguidamente entraríamos a profundizar en las opciones más importantes que nos ofrece la consola JavaScript, conociendo sus diferentes partes, qué es lo que nos permite hacer, cómo ejecutar JavaScript, qué utilidades tiene la misma y cómo utilizar snippets desde ella.

De nuevo, al acabar la parte teórica, te proponemos un ejercicio práctico en el que deberás aplicar todo lo aprendido previamente, de forma que te sirva para interiorizar mejor lo que el profesor ha ido exponiendo en las clases anteriores.

La última sección del curso está enfocada en la depuración de JavaScript a través del uso del panel Sources. En estas lecciones te explicaremos cómo utilizar este panel y sus opciones, además de explicar qué son los Breakpoints y los tipos que existen, y finalmente, cómo realizar una depuración remota. Al igual que en el resto de secciones, al finalizar esta última, tienes otro ejercicio para practicar con todo lo aprendido en esta última parte del curso.

* Requisitos del Curso

Para sacarle el máximo provecho a este curso es recomendable tener conocimientos de HTML, CSS, JavaScript y HTTP.

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars