Por qué debería comenzar a usar las herramientas para desarrolladores de Chrome ahora mismo

Tener un buen conjunto de herramientas útiles para ayudar a probar su sitio web es esencial para los desarrolladores. ¿Dónde está el mejor lugar para guardarlos? ¡En tu navegador, por supuesto! El popular navegador web de Google, Chrome, tiene herramientas de desarrollo integradas. Es un conjunto de herramientas creadas para la creación y depuración web. Las herramientas para desarrolladores de Chrome (conocidas como DevTools) brindan a los desarrolladores acceso al funcionamiento interno del navegador web y las aplicaciones web.

Utilizando Chrome DevTools puedes conocer los estilos que se utilizan, el tamaño de las imágenes, los scripts que se utilizan, etc. Puedes depurar y saber qué errores existen en la página. Incluso puede activar o desactivar estilos, o cambiarlos por completo, para ver qué efecto tiene en su sitio web.

Está en tu navegador

Es fácil acceder a las herramientas en sí mismas. Aquí hay tres formas de abrirlos:

1. En su navegador Chrome, seleccione el menú de Chrome (las tres barras horizontales en la esquina superior derecha), seleccione Más herramientas y luego seleccione Herramientas para desarrolladores.
2. Haga clic con el botón derecho en un elemento en cualquier página y seleccione Inspeccionar elemento.
3. En su teclado en Windows, seleccione ctrl + shift + i. En Mac, seleccione cmnd + opt + i.

Cualquiera de estos abrirá la ventana DevTools en la parte inferior de su navegador.

Ventana principal

Las herramientas aparecen en la parte inferior de su pantalla. Verá una ventana principal con menús en la parte superior y elementos como vista predeterminada, y una ventana secundaria con menús y estilos como selección predeterminada.

Las herramientas se agrupan en tareas. Hay 8 grupos que incluyen Elementos, Red, Fuentes, Línea de tiempo, Perfiles, Recursos, Auditorías y Consola.

Elementos

Aquí puede ver la estructura HTML de su página. Hay una palanca en la parte inferior para HTML y Body. Puede pasar el mouse sobre cualquiera de los elementos para ver información detallada sobre cada uno.

Puede hacer clic en las flechas para abrir y cerrar el contenido de los elementos primarios para que sean más fáciles de leer. Por lo tanto, puede cerrar el cuerpo y simplemente leer el encabezado, elegir el elemento dentro del encabezado para ver, etc. Esta es una excelente herramienta para ver el HTML de su sitio web.

La red

Esto muestra cada elemento que se cargará, cómo se cargarán, el tipo de archivo que es, el tamaño del archivo, el tiempo que tarda en cargarse y una línea de tiempo de cuándo se cargará dentro de la secuencia de carga de la página. Esto se puede utilizar para solucionar problemas de red, como cuellos de botella en la carga de páginas y solicitudes incorrectas.

Por ejemplo, si ve muchos errores 404, puede mirar más de cerca para ver cuáles son los problemas. Tal vez haya bajado una página que todavía recibe mucho tráfico, o tal vez alguien haya escrito mal un enlace.

Fuentes

Esto muestra los scripts y fragmentos que se cargarán y de dónde provienen.

Cronología

Esto le muestra el tiempo que tarda cada recurso en cargarse. Puede ver lo que lleva más tiempo, lo que ayuda a reducir la carga de su página.

Perfiles

Esto muestra el uso de memoria de cada elemento. Esto es excelente para mostrarle qué código debe optimizarse.

Recursos

Aquí puede inspeccionar los recursos que están cargados. Puede consultar cookies, caché de aplicaciones, bases de datos HTML5, etc.

Auditorias

Esto le permite analizar la página. Puede auditar después de que se haya cargado o mientras se carga.

Estado actual de auditoría

Primero, seleccioné ejecutar Audit Present State. Esto ejecuta la auditoría como el sitio se encuentra actualmente, ya cargado en mi navegador.

Me da una lista de elementos, los colorea según su importancia y muestra el número de problemas. Puedo ver más detalles haciendo clic en ellos.

He ampliado varios de ellos para ver la información detallada sobre cada uno. Me brinda información sobre la utilización de la red y el rendimiento de la página web. Me da consejos sobre cómo solucionar los problemas y los prioriza.

Recargar página y auditar al cargar

Regresé y seleccioné auditar en carga. Los resultados son similares, pero como se esperaba, hay más problemas al cargar la página que después de que se cargó la página.

Entre los dos, obtengo información sobre JavaScript, el almacenamiento en caché del navegador, el almacenamiento en caché del proxy, el tamaño de las cookies, la entrega de contenido de un dominio sin cookies, las dimensiones de la imagen, el orden y los estilos de los scripts, la colocación de CSS en el encabezado del documento, la eliminación de archivos CSS no utilizados y el uso de CSS normal. nombres de propiedad. Por supuesto, los resultados variarán según el sitio.

La información no es tan detallada como PageSpeed ​​Insights, pero es suficiente para comenzar y me gusta la conveniencia de que esté integrada en la herramienta que estoy usando de todos modos. Recomiendo ejecutarlo cada vez que realice un cambio en su sitio. Es demasiado fácil de usar para no usarlo.

Consola

Esta es la Consola de JavaScript donde puede probar páginas y aplicaciones. Puede depurar sus scripts y obtener consejos sobre qué cambios realizar. La consola le permite ingresar comandos para que pueda interactuar con su página web. Registrará la información de diagnóstico para ayudarlo con la depuración. Puede usarlo en la pantalla principal o en el cajón (la ventana debajo de la pantalla principal).

Puede utilizar la consola o la línea de comandos API. Puede escribir en la Consola, formatear sus elementos y diseñar salidas, medir el tiempo de ejecución o carga, ver y marcar la línea de tiempo, contar declaraciones, establecer puntos de interrupción, evaluar expresiones, monitorear eventos, apilar mensajes, ver errores y advertencias, y mucho más.

Esta es una herramienta poderosa, pero hay mucho para usar. Afortunadamente, se proporciona un buen material de referencia con ejemplos sobre cómo utilizarlo.

Depuración

Al seleccionar ctrl + p en Windows, o cmd + p en Mac, se abrirá la pantalla de depuración donde puede seleccionar los scripts para depurar. Esta herramienta le brinda las funciones de depuración que esperaría ver en cualquier entorno de programación: pausar, continuar, avanzar, pasar por encima, puntos de interrupción, código formateado, etc.

Se proporcionan archivos de ayuda detallados para guiarlo en el uso del modo de depuración.

Ventana de estilos CSS

El cuadro del extremo derecho contiene toda la información de CSS. A medida que selecciona un elemento, la ventana Estilos a la derecha le muestra la información de estilos del elemento. Esta sección es interesante. Hay cinco grupos de herramientas: Estilos, Computadoras, Escuchas de eventos, Puntos de interrupción DOM y Propiedades.

Estilos

Puede seleccionar los estilos y cambiarlos manualmente en esta ventana. Por ejemplo, puede seleccionar el tamaño y el color de la fuente.

Seleccione el tamaño de fuente e ingrese su propio tamaño. Cuando lo haga, el tamaño de fuente de la fuente que seleccionó cambiará en la pantalla.

Al hacer la selección en un color de fuente, se abrirá el selector de color. Seleccione el color que desee y presione enter. Verás que la fuente que seleccionaste cambia al nuevo color. Esta es una excelente manera de probar nuevos estilos, tamaños y colores de fuente.

Si hace clic en site.CSS a la derecha, se abrirá una ventana más grande con la información detallada. Aquí, puede escribir el nombre de la fuente que desea usar, especificar un color, especificar un tamaño, etc.

Computado

Esto muestra el tamaño de la caja en píxeles. Tiene relleno, borde y margen.

Modo de dispositivo

Hay un pequeño botón a la izquierda entre la lupa y el menú Elementos que parece un dispositivo móvil. ¿Adivina qué? Es un dispositivo móvil. Este es el modo de emulación de dispositivo. Esta es una excelente manera de ver qué tan receptivo es su sitio.

Dispositivo

Lo que es aún más genial que solo ser un dispositivo móvil es que puede elegir qué dispositivo móvil es y luego puede ver el sitio web como si lo estuviera viendo en ese dispositivo. ¡Eso es asombroso!

Seleccioné Amazon Kindle Fire HDX 7 ”y la pantalla imitaba ese dispositivo para poder ver cómo se vería el sitio en su pantalla y cómo funcionaría el toque.

Puede cambiar la orientación de la pantalla presionando el botón Cambiar dimensiones.

Esta es una excelente manera de ver cómo se ve su sitio de WordPress en la pantalla móvil más pequeña. Elegí el iPhone 6 y el tamaño de la pantalla cambió para adaptarse al nuevo tamaño y resolución de la pantalla. Hay muchos dispositivos para ver. También puede ver un tamaño personalizado arrastrando los lados para aumentar o disminuir el tamaño.

La red

También hay una selección para elegir el tipo de red a través de la cual accede al sitio. Esto le permite ver el rendimiento de su sitio web a través de varios tipos y velocidades de conexión. Puede probar varias velocidades desde GPRS de 50 Kbps hasta WiFi de 30 Mbps, y varias velocidades de conexión 2G, 3G y 4G. Esta es una excelente manera de probar la velocidad de su sitio web a través de redes cariosas y obtener información sobre qué mejorar.

Preguntas de los medios

Hay un pequeño botón en la parte superior izquierda que parece escalones. Abre otra sección de la pantalla sobre la ventana del sitio web que muestra diferentes anchos de píxeles. Hacer clic en ellos lleva la pantalla del móvil a ese tamaño. Te muestran:

• Consultas orientadas a un ancho máximo
• Anchos dentro de un rango
• Consultas orientadas a un ancho mínimo

Esto le ayuda a ajustar los estilos y el contenido multimedia para obtener un diseño totalmente receptivo.

El cajón

Hay otra sección de herramientas debajo de la pantalla principal llamada cajón. Esto agrega:

Consola : esta es la misma consola que en la ventana principal. Al colocarlo aquí, puede usarlo junto con cualquiera de las herramientas en la ventana principal.

Buscar : le permite buscar fuentes.

Emulación : puede elegir Dispositivo (aquí puede elegir el modelo, resolución, red, etc.), Medios, Red (rendimiento y agente de usuario) y Sensores (pantalla táctil, acelerómetros, etc.).

Representación : muestre rectángulos de pintura, bordes de capa compuestos, medidor de FPS, repintado continuo de páginas y posibles cuellos de botella de desplazamiento.

Configuración y más

La barra de menú de la derecha le dirá la cantidad de errores y advertencias en su sitio, le permitirá ocultar el cajón en la parte inferior, le permitirá ajustar la configuración y acoplar la herramienta a la ventana principal (creando una pantalla dividida entre su sitio web y las DevTools).

Hay una gran cantidad de configuraciones que puede ajustar para que pueda modificar las herramientas para que funcionen de la manera que las necesite.

Canario de cromo

Si realmente quieres estar a la vanguardia de las herramientas de desarrollo de Chrome de Google, prueba Chrome Canary. Su icono es amarillo. ¿Consíguelo? Necesita una capa. Es lo último y lo mejor de Google. Está diseñado para desarrolladores y tiene la última versión de DevTools. Todavía no es lo suficientemente estable para uso general, por lo que probablemente dañará su sistema.

Si es propenso a causar daños graves a su entorno cuando su sistema se rompe, mire el ícono de Chrome Canary en la imagen de arriba y no parpadee durante cinco segundos.

Ahora puedes seguir hasta el final. No recordarás esta parte.

Terminando

Las Herramientas para desarrolladores de Google Chrome son una gran herramienta para solucionar problemas, mejorar el rendimiento de la red, ver su sitio en diferentes tamaños de pantalla y resoluciones, y obtener información sobre dónde necesita mejorar su sitio. Hay muchas funciones y puede agregar aún más a través de extensiones. Estas herramientas por sí solas son una gran razón para instalar Google Chrome, incluso si no es su navegador principal. Tomarse el tiempo para aprender las características valdrá la pena y su sitio y los visitantes se lo agradecerán.

¡Tu turno! ¿Utiliza Chrome Developer Tools? ¿Dejé fuera tu función favorita? ¿Tienes algo que añadir? ¡Me gustaría escucharlo en los comentarios a continuación!

Imagen en miniatura del artículo de Anikei / shutterstock.com