Inspecciona y edita páginas con DevTools de Chrome

Inspecciona y edita páginas con DevTools, una herramienta del explorador de Google para los desarrolladores FrontEnd.

Como desarrollador esta herramienta es muy útil para probar elementos HTML y estilos CSS.

Sin embargo, no se limita a eso, también puedes inspeccionar paso a paso la ejecución de funciones JavaScript.

Podemos acceder a esta herramienta mediante 3 maneras diferentes, veamos cuales son.

Al hacer clic sobre un elemento HTML de la página web, podemos ver una ventana con opciones, seleccionamos Inspeccionar.

Si te facilita acceder a las opciones de las ventanas mediante atajos de teclado, Chrome también cuenta con una para esta herramienta.

Presionando las teclas Ctrl + Shift + i ejecutas la herramienta de DevTools.

En la parte superior derecha del explorador de Chrome puedes observar un botón con 3 puntitos, clic sobre él.

Seleccionamos el elemento Mas herramientas, de las opciones seleccionamos Herramientas del desarrollador.

Al abrir el DevTools observaremos el contenido HTML de la página, si la abrimos a partir de un elemento, nos aparecerá el html de ese elemento.

Para modificar las etiquetas basta con hacer doble clic sobre ellos (etiquetas o propiedades).

Además de las etiquetas HTML, también podemos modificar los estilos CSS de todos los elementos.

Seleccionamos un elemento y en la parte izquierda veremos el código CSS, al dar clic sobre ellos podemos agregar o modificar.

Mediante la consola podemos observar los errores de la página, desde ocasionados por JavaScript, elementos no encontrados, etc.

Todas estas funciones las encontramos en la pestaña de Consola.

Es posible ejecutar desde consola funciones JavaScript, al escribir el código después de los mensajes de alerta o error.

Otra función muy interesante es el seguimiento de la ejecución de funciones JavaScript.

Desde la pestaña Sources desplegamos los elementos del dominio de la pagina y buscamos la carpeta con los scripts.

Seleccionamos un archivo JavaScript, en la parte derecha podemos agregar puntos de interrupción.

Con las herramientas de avance en la parte derecha podemos ejecutar completamente o un avance paso a paso.

Con esta función del DevTools puedes inspeccionar archivos JavaScript sin comprimir, no es posible realizarlo con archivos comprimidos.

Esta herramienta te ofrece varias opciones para inspeccionar tu página y validar que todo funcione correctamente.

Además de las opciones que vimos, también dispone de opciones para ver el rendimiento, misma que valida PageSpeed Insights.