Frontend

Curso de Chrome Developers Tools: Herramientas para el desarrollo

Con este curso aprenderás a utilizar las herramientas que Chrome ofrece para analizar y modificar una página web y sus estilos, además de aprender a usar su potente consola JavaScript para depurar los scripts de la misma.

4.4 (150 valoraciones)
2 horas y 53 minutos · curso
Curso de Chrome DevTools: Herramientas para el desarrollo

Lo que aprenderás en 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.

Requisitos del curso

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

Valoraciones de estudiantes:

  • 5
  • 4
  • 3
  • 2
  • 1
4.4
150 valoraciones

Contenido del curso:

    • 2 m
    • ¿Cómo mostrar las Chrome Developer Tools?
      5 m
    • ¿Cómo acceder a las Chrome Developer Tools?
      5 m
    • Paneles de Chrome DevTools
      7 m
    • Modo Device
      9 m
    • Resto del curso
      2 m
    • Modificando la página
      11 m
    • Inspector CSS
      13 m
    • WorkSpaces: Persistiendo los cambios
      9 m
    • Práctica: Panel Elements
      7 m
    • 7 m
    • Ejecutando JavaScript
      12 m
    • Utilizando la consola
      12 m
    • Opciones de la consola y uso de Snippets
      19 m
    • Práctica: Consola JavaScript
      12 m
    • Panel de depuración
      4 m
    • Breakpoints (Code, DOM, Network, Events)
      13 m
    • Depuración remota
      8 m
    • Práctica: Breakpoints
      7 m
También te puede interesar

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

Maquetación web con CSS

Curso de maquetación web con CSS

2 horas y 10 minutos · curso

Con este curso aprenderás a utilizar las herramientas que Chrome ofrece para analizar y modificar una página web y sus estilos, además de aprender a …

  • Frontend
HTML5 y CSS3

Curso de HTML5 y CSS3

4 horas y 21 minutos · curso

Con este curso aprenderás a utilizar las herramientas que Chrome ofrece para analizar y modificar una página web y sus estilos, además de aprender a …

  • Frontend

Dudas frecuentes

1

¿Cuál es el precio?

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í.

2

¿Cuándo comienza el curso?

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.

3

¿Puedo obtener un diploma que acredite mis conocimientos?

Efectivamente, una vez superada cada formación, podrás descargarte el diploma acreditativo de cada una de ellas. Añádelas a tu CV y mejora tu perfil para las empresas.

También podrás obtener un diploma de nivel superior al superar todas las formaciones de la carrera.

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.

Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información.