DevTools de Google Chrome para no desarrolladores

Google Chrome se encuentra entre los navegadores más utilizados con casi el 65% de los usuarios a nivel mundial. Y hay una buena razón para ello, funciona bien, admite un montón de funciones web, se integra de forma nativa con todo lo que ofrece Google y es fácil de usar.

Pero hay más que el lado del usuario. También está muy bien construido para desarrolladores. Firefox es otro gran navegador que brinda una excelente experiencia de desarrollo, aunque su base de usuarios es relativamente pequeña. Entonces, por esta razón, nos estamos enfocando en Chrome y sus DevTools, pero afortunadamente, la interfaz de usuario entre la mayoría de los navegadores sigue siendo muy similar, por lo que los consejos aquí se traducirán bien a Firefox, Safari, Edge y otros navegadores.

¿Qué es Chrome DevTools?

Chrome DevTools es un conjunto de herramientas de desarrollo web integradas directamente en el navegador Google Chrome. DevTools puede ayudarlo a editar páginas sobre la marcha y diagnosticar problemas rápidamente, lo que en última instancia lo ayuda a crear mejores sitios web, más rápido.
Página de inicio de documentos de Chrome DevTools

Las DevTools son lo que la mayoría de los desarrolladores de front-end (y a menudo back-end) utilizan para inspeccionar el rendimiento de una página web, las etiquetas HTML que la definen y los estilos que se aplican en su forma más básica. Proporciona un montón de otras características súper útiles que veremos siempre que funcionen en el caso de uso general para los no desarrolladores.

Las herramientas de desarrollo son lo que ves en la captura de pantalla anterior con el código a la izquierda y varias propiedades a la derecha. Esa es la vista predeterminada que verá si presiona Comando + Opción + C (Mac) o Control + Shift + C (Windows, Linux, Chrome OS).

DevTools ofrece muchas capacidades, pero las más notables serían:

• La estructura del documento generado (HTML) una vez que se carga la página y mientras se carga.
• Qué CSS se aplica a elementos HTML específicos, así como qué se hereda de los elementos principales.
  Vea el tamaño de la ventana gráfica, los tamaños de los elementos, los rellenos, los márgenes, los bordes y más.
• La capacidad de modificar todo en la página además de los scripts que se están ejecutando.
• Lejos de realizar cambios en el código que se guardan una vez que actualiza la página (aunque no es posible de forma predeterminada)
• Todos los cambios son del lado del cliente, es decir, todo lo que cambie, solo lo verá usted hasta que actualice la página.
• Fuera de prueba sin cachés y con una velocidad de red más lenta simulada.
• Herramientas para medir el rendimiento y puntuar el rendimiento de una página, además de proporcionar consejos para solucionarlo.
• Muestre la consola de la página y sus errores, advertencias y mensajes, así como una forma de ejecutar código JavaScript allí.

Esta es una lista muy corta, pero cubre algunas de las características más notables, principalmente las que cubriremos.

Relacionado : Cómo crear su primera extensión de Chrome

¿Por qué necesita DevTools? ¿Cuáles son los casos de uso?

Para los desarrolladores es obvio, pero ¿qué pasa con los no desarrolladores? Bueno, hay algunos trucos y consejos interesantes que lo acercarán a un estado de usuario avanzado. A menudo, los propietarios de sitios detectan problemas en el sitio, hacen una pregunta o dos y, a veces, reciben un fragmento de código para "pegar" para solucionar un problema. Una de las formas en que los desarrolladores prueban estos fragmentos es aplicándolos directamente a las herramientas de desarrollo. También es una forma de proporcionar una buena vista previa a sus desarrolladores sobre cómo desea que se vean las cosas.

Aplicar código CSS

El primer y más común uso de DevTools es modificar y aplicar CSS. CSS es lo que define el aspecto de una página, su estética. Para hacer esto, simplemente tiene que señalar el elemento que desea diseñar, hacer clic derecho y seleccionar "inspeccionar"

Lo mismo se aplica a la mayoría de los demás navegadores, aunque el texto del elemento del menú puede variar ligeramente. Una vez que haga eso, verá que DevTools se abre y selecciona directamente el elemento que necesita. Allí, verá las dos partes principales de las herramientas de desarrollo. Los lados HTML y CSS (izquierdo y derecho):

Podría ser un poco complicado orientarse en la parte HTML, pero no se preocupe, DevTools resaltará los elementos mientras los coloca en el panel izquierdo. Una vez que encuentre lo que necesita, a la derecha puede escribir estilos. Ya hay algunos añadidos. Así que cambiemos el fondo para leer y ver cómo se ve:

Inmediatamente mientras escribe, se actualizarán los estilos de la página. Puede escribir cualquier CSS aquí y se aplicará como los estilos que ya están en la página. Si presiona cerca del final de las reglas (debajo de "ancho"), comenzará a agregar nuevos estilos. O puede escribirlos en la parte superior donde dice "element.style". Luego, si desea compartir esto con sus desarrolladores, puede seleccionar el código y copiarlo y pegarlo. Consejo profesional, también tome el "selector" de estilos. Este es el ".RNNXgb" en la captura de pantalla anterior. Esto le dirá a los desarrolladores en qué elemento está agregando estilos.

Relacionado : CSS de WordPress: Guía básica para principiantes

Elige un color

Otra cosa interesante que puede hacer es averiguar qué color se usa exactamente, así como usar un selector de color directamente desde DevTools para ver otros colores. Simplemente haga clic en el cuadrado junto al código de color (donde apunta la flecha arriba) y se abrirá un selector de color.

Encontrar qué fuente se utiliza

Los desarrolladores de CSS también definen las fuentes en uso, el tamaño de fuente, la altura de la línea, el color, el peso de la fuente y otras propiedades relacionadas con la tipografía. Todos ellos se mostrarían en el lado derecho. Siempre que no esté cruzado, se aplicará el estilo que ve. Averigüemos qué fuente se utiliza para la búsqueda en el formulario de Google. Haga clic derecho, inspeccione y desplácese hacia abajo hasta que vea la fuente o simplemente busque en el campo "Filtro" arriba en la parte superior de la sección derecha:

Si continúa y actualiza la fuente, verá cómo se vería el sitio con una fuente diferente, una a la que podría querer cambiar pronto. Por supuesto, un desarrollador más tarde tendrá que modificar el código y solucionar cualquier problema que pudiera crear un cambio de fuente, pero este método funciona muy bien para probar las cosas rápidamente sin tener ningún entorno de desarrollo configurado.

Así es como se vería la página de inicio de Google con "Georgia" como fuente. Para lograr esto, tuvimos que actualizar más de una propiedad, pero gracias a la buena Arquitectura CSS de los desarrolladores de Google, fue bastante fácil. La mayoría de las veces, un sitio mal escrito requiere que actualice un montón de propiedades para ver todo el sitio actualizado.

Relacionado : Cómo elegir las mejores fuentes para su sitio web

Caché, aceleración y velocidad

¿Qué es la caché? En términos más simples, un recurso que se guarda en su máquina para uso futuro. Un recurso puede ser JS, un archivo CSS o una imagen. Si no cambia cada vez que abre una página, no es necesario descargarla cada vez, ¿verdad? Entonces, el navegador simplemente lo mantendrá en su máquina por un tiempo.

Pero, ¿qué sucede si ha habido un cambio en el servidor y la configuración no utiliza las mejores prácticas para actualizar los recursos? O, en resumen, incluso si los desarrolladores cambiaron la base de código, todavía verá estilos antiguos. Bueno, entonces puede detener el caché y hacer una "actualización completa".

Abra las herramientas de desarrollo y navegue hasta la pestaña "Red". Luego haga clic en "deshabilitar caché" y realice una "actualización completa":

Ahora, mientras navega por las páginas con DevTools abierto, no habrá recursos en caché de su navegador. Las páginas se cargarán más lentamente a medida que los recursos se carguen cada vez, pero verá los cambios. Por lo general, los desarrolladores mantienen la opción "Desactivar caché" activada de forma predeterminada y solo la desactivan cuando se prueban interacciones de usuarios reales cuando los tiempos de carga son importantes.

En la misma pestaña, después de actualizar una vez, también verá medidas en la velocidad y el peso de la página. Cuánto tiempo hasta que se activa la "Carga" (evento cuando se adjuntan otros scripts para hacer más trabajo), cuántos archivos se solicitan (31 solicitudes anteriores, cantidad bastante buena), cuánto se ha descargado, etc. Es simple, cuanto más bajo mejor para cada valor. Cualquier cosa por encima de 100-150 solicitudes y comenzará a ver grandes problemas de velocidad.

DevTools también proporciona una simulación de conexión lenta. Una característica muy útil para ver cómo funcionaría su sitio en una red más lenta como 3G. Para activarlo, simplemente cambie el valor junto a "Desactivar caché" y presione actualizar. Cuando actualice, verá cada paso de la carga del sitio. Con el caché deshabilitado, esta sería la primera visita para usos regulares.

Observa la diferencia de velocidad cuando seleccionamos “3G lento” y lo actualizamos en comparación con el primer ejemplo que usa la velocidad de conexión real. Aquí también puede probar "Sin conexión": cómo funcionaría el sitio sin conexión a Internet. Si eso suena extraño, no lo es, las aplicaciones web progresivas ya permiten que los sitios funcionen incluso sin conexión a Internet si los visitantes han accedido al menos una vez.

Las auditorías son otra gran característica que proporciona un análisis de velocidad fácil de usar de una página. Simplemente puede ejecutarlo yendo a las pestañas "Auditorías" y presionando "Generar informe":

A la derecha, tiene algunas opciones para decidir qué se probará, ya que a veces las pruebas pueden llevar un tiempo (uno o dos minutos), por lo que si las ejecuta muchas veces, puede elegir exactamente lo que se necesita para la prueba actual . Aquí hay un resultado de muestra con las opciones anteriores para la pantalla de inicio de Google:

¡Una gran puntuación! 94 es muy bueno y muestra el gran trabajo realizado en esta página. Recuerde que puede parecer muy simple en la superficie, pero hay un montón de scripts ejecutándose en segundo plano que permanecen ocultos y ralentizan los sitios. Hay muchas otras métricas probadas y puede hacer esto en cualquier sitio para encontrar qué problemas tiene y qué se puede mejorar.

Relacionado : ¿Qué significa realmente "acelerar su sitio" y cómo lograrlo?

Consola de DevTools

La vista final que cubriremos es la consola. Se accede fácilmente simplemente presionando la tecla ESC o yendo a la pestaña "Consola". Como era de esperar, no hay errores, solo algunas advertencias que no deberían plantear demasiados problemas:

Pero, si por alguna razón después de una actualización reciente en su sitio, un componente interactivo (como un menú desplegable, menú, mapa, formulario) deja de funcionar, siempre puede echar un vistazo a la consola. Puede tener errores que indiquen cuál es el motivo.

Aquí hay un ejemplo de cómo se vería un error de este tipo:

Es un poco irónico usar la página de documentación de registros de errores para mostrar errores, ¿verdad? En cualquier caso, tiene un buen propósito. Estos son errores que impedirían el funcionamiento de alguna función. Siempre puede compartir dicha información con sus desarrolladores y solicitar ayuda. Los registros se publican en vivo a medida que interactúa con la página, por lo que si hace clic en un botón y aparece un error, lo más probable es que el script detrás de él tenga un problema.

Relacionado : El camino para convertirse en un buen diseñador web

Aviso de seguridad : no es una buena idea copiar y pegar código en la consola sin comprender lo que hace. Especialmente si proviene de una fuente poco confiable y se usa en aplicaciones / sitios web internos de su empresa. Facebook ha publicado una advertencia por eso en su consola:

Resumen

DevTools es una herramienta increíble que ayuda tanto a los desarrolladores como a los propietarios de sitios. Le brinda todo lo que necesita para ajustar y modificar una página. A través de él, puede cambiar CSS, modificar HTML, eliminar y reorganizar elementos en la página, ver informes de velocidad y errores informados.

Los propietarios de sitios pueden usarlo para mostrar ideas y ejemplos de sus necesidades a los desarrolladores que podrían ser más fáciles de entender que escribir párrafos de texto. Con algunos conocimientos de CSS de las propiedades básicas, puede ser mucho más descriptivo de sus necesidades, lo que reducirá en gran medida el ir y venir y el tiempo dedicado a nuevos cambios.

Hay un montón de otras funciones esperando ser utilizadas, ¡no temas explorar!