Curso de Chrome Developers Tools: Herramientas para el desarrollo

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.