Cómo usar las herramientas de desarrollo de Chrome para mejorar su sitio web de WordPress

Chrome Developer Tools (DevTools) es un increíble conjunto de herramientas de creación y depuración web para Google Chrome. Las DevTools brindan acceso a los elementos que construyen las páginas web. Puede usar DevTools para solucionar problemas con el diseño, mirar y modificar CSS, establecer puntos de interrupción de JavaScript, inspeccionar el código para optimizarlo y mucho más. Las DevTools son gratuitas y ya están integradas en su navegador Chrome. Entonces, si tiene Chrome, entonces ya los tiene.

En este artículo, obtendremos una descripción general de cuáles son las herramientas y cómo usarlas para mejorar su sitio web de WordPress.

Apertura de las herramientas

Hay varias formas de abrir las herramientas:

1. Seleccione el menú de Chrome, elija Herramientas y luego elija Herramientas para desarrolladores.
2. Haga clic con el botón derecho en cualquier elemento de la pantalla y seleccione Inspeccionar elemento (mi método preferido).
3. Ctrl + Mayús + I (para PC) | Cmd + Opc + I (para Mac)

La ventana de herramientas de desarrollo

La ventana de herramientas contiene dos paneles. Ambos contienen herramientas que se pueden usar juntas. Aquí hay un vistazo a las herramientas.

El primero contiene 8 grupos de herramientas. Las herramientas incluyen:

• Elementos
• La red
• Fuentes
• Cronología
• Perfiles
• Recursos
• Auditorias
• Consola

La segunda sección contiene:

• Estilos
• calculado
• Oyentes de eventos
• Puntos de interrupción del DOM (modelo de objetos de documento)
• Propiedades

Hay varias maneras diferentes de ver las herramientas. Puede cambiar el tamaño de las ventanas para hacer espacio. También puede reubicar las ventanas a la derecha de la pantalla para obtener una pantalla dividida con las herramientas en un lado y su sitio web en el otro.

Elementos

Este panel le muestra el árbol DOM, que representa los elementos HTML de su página y le permite inspeccionar o editar cualquiera de los elementos. Puede ver los ajustes de CSS en tiempo real.

Puede abrir y contraer cualquiera de los paneles para que sea más fácil de ver y navegar haciendo clic en los nodos (se ven como flechas o triángulos). La vista de árbol DOM muestra el estado actual del árbol en lugar del HTML original (por ejemplo, puede haber sido modificado por JavaScript).

Cuando pase el mouse sobre un elemento en la vista de árbol, se resaltará el elemento en la página web. Le mostrará información como el estilo de fuente, el tamaño de la imagen, etc.

Si hace clic en uno de los elementos, la ventana de la derecha mostrará el CSS. Aquí puede seleccionar estilos y realizar modificaciones en fuentes, colores, tamaños, márgenes, bordes, relleno, etc.

En el pie de página verá migas de pan para que pueda retroceder si es necesario. Puede editar cualquiera de los elementos simplemente haciendo clic en ellos y escribiendo sus cambios. Cuando presiona Enter, verá que se realizan los cambios.

Por ejemplo, esta imagen tiene actualmente 600 píxeles de ancho. Puedo seleccionar el ancho y escribir un nuevo valor y presionar enter.

La imagen cambia inmediatamente al nuevo tamaño.

Para cambiar el estilo de la fuente, simplemente seleccione la fuente y seleccione lo que desea cambiar en la ventana de estilos a la derecha.

Incluso puede arrastrar los elementos y soltarlos en nuevas ubicaciones para cambiar el diseño de su página.

Muevo los comentarios recientes encima de las publicaciones recientes simplemente arrastrando el div.

Hacer clic con el botón derecho le brinda un nuevo conjunto de funciones. Puede ver varios estados de elementos, modificarlos como HTML, establecer pausas, copiar la ruta CSS y mucho más. También puede hacer clic derecho y eliminar un nodo. Es tan fácil que casi da miedo.

He usado esta herramienta para encontrar tamaños de imágenes e inspeccionar fragmentos de código.

La red

El panel Red muestra qué recursos de su sitio web se solicitan y descargan. Se grafica en tiempo real. Ver qué elementos tardan más en descargarse le brinda información sobre qué problemas debe solucionar para optimizar su página.

Puede filtrar y mostrar diferentes vistas y tipos de gráficos, como cascada. Puede registrar la actividad de la red y guardarla para poder analizarla más tarde.

Puede ver los detalles de los recursos. Los detalles incluyen:

• Encabezados de solicitud y respuesta HTTP: muestra la URL de solicitud, el método HTTP, los códigos de estado de respuesta y enumera los encabezados de solicitud y respuesta HTTP con sus valores y parámetros de cadena de consulta.
• Vista previa de recursos: muestra una vista previa de la imagen y los recursos JSON.
• Respuesta HTTP: muestra el contenido sin formato del recurso.
• Nombres y valores de las cookies: muestra las cookies que se transmiten en los encabezados de solicitud y respuesta HTTP del recurso, y borra las cookies.
• Mensajes WebSocket: este muestra los mensajes que se envían o reciben a través de una conexión WebSocket.
• Temporización de la red de recursos: muestra un gráfico del tiempo que se dedica a las fases de la red que están involucradas en la carga del recurso.

La vista en cascada es una excelente manera de ver el tiempo que tarda cada elemento en cargarse desde el comienzo de la solicitud hasta que se entrega el último byte del elemento. Al ver qué elementos toman más tiempo, puede tener una mejor comprensión de dónde hacer ajustes.

Puede guardar los datos de la red para futuros análisis.

Fuentes

Puede usar el panel de fuentes para ver y depurar su código, como JavaScript y scripts que forman parte de la página cargada. Puede pausar, reanudar, recorrer el código y pausar en las excepciones. Incluye las funciones básicas de ejecución de código para que pueda saltar, entrar, salir y alternar puntos de interrupción. Puede usar los puntos de interrupción para depurar JavaScript, actualizaciones de DOM y llamadas de red. También puede establecer puntos de interrupción condicionales donde cualquier expresión podría devolverse como verdadera o falsa. El punto de interrupción pausará el código si se cumple la condición.

Hay una bonita función de impresión que hace que el código minificado sea fácil de leer. Esto también hace que sea más fácil ver dónde colocar los puntos de interrupción. Si esto no funciona como lo necesita, puede usar un formato de mapeo basado en JSON llamado mapa de origen. Los mapas de origen son creados por un minificador que tiene esta función incorporada.

Cronología

El panel Línea de tiempo muestra dónde se dedica el tiempo a la carga y el uso de la página. Pintará y trazará cada evento en la línea de tiempo. Mostrará recursos como JavaScript, estilos de cálculo y repintado. Puede registrar los eventos y analizarlos en pasos. Hay tres modos:

• Eventos: una lista de todos los eventos organizados por tipo. Esto le muestra qué tareas toman más tiempo.
• Cuadros: muestra el trabajo que debe realizarse en cada cuadro del rendimiento de representación de su sitio web. Por ejemplo, si su sitio se procesa a 60 cuadros por segundo, le mostrará el trabajo realizado en 1/60 de segundo. Esto incluye cargar scripts, pintar el diseño, manejar eventos, etc. Puede usar esto para ver cualquier actividad anormal en la carga de la página.
• Memoria: muestra gráficamente el uso de la memoria a lo largo del tiempo. Le muestra todos los documentos, nodos y detectores de eventos que se encuentran en la memoria. Esto ayuda a descubrir qué está causando pérdidas de memoria.

Perfiles

Aquí puede perfilar el tiempo de ejecución y el uso de memoria de las páginas web y las aplicaciones. Esto le muestra dónde se están utilizando los recursos. Esta es una buena herramienta para optimizar su código.

Registrará tres tipos de perfil:

• Recopilar perfil de CPU de JavaScript: esto muestra el tiempo de ejecución de sus funciones de JavaScript.
• Take Heap Snapshot: muestra el uso de la memoria y la distribución de sus objetos de JavaScript.
• Registrar asignaciones de montón: esto registra sus asignaciones de objetos para mostrar pérdidas de memoria a lo largo del tiempo.

Recursos

Puede utilizar este panel para inspeccionar recursos. Le mostrará información sobre IndexedDB, base de datos web SQL, cookies de caché de aplicaciones, almacenamiento local y de sesión, y más. También puede inspeccionar sus recursos visuales, como fuentes, imágenes y hojas de estilo.

La pestaña IndexedDB le permite inspeccionar sus bases de datos y almacenes de objetos IndexedDB, y ver y eliminar registros.

Puede ejecutar comandos SQL y ver los resultados en formato tabular. A medida que escribe los comandos, le dará sugerencias para los nombres de las tablas, los comandos y las cláusulas.

La pestaña de cookies muestra información sobre las cookies que fueron creadas por un HTTP o JavaScript. Puede eliminarlos individualmente o en grupos.

Chrome almacena en caché los recursos de la aplicación. La pestaña de caché de la aplicación le permite ver el estado de esos recursos. También le mostrará la URL del recurso, el tipo de recurso que es y su tamaño.

El local y la sesión El panel de almacenamiento le permite ver, crear, eliminar y editar pares clave/valor de almacenamiento local y de sesión que se estaban creando con la API de almacenamiento.

Auditorias

El panel Auditoría analiza la página a medida que se carga y sugiere correcciones para optimizar la carga de la página. Tiene dos auditorías que separan la información en dos categorías: Utilización de la red y Rendimiento de la página web. Puede ejecutar ambas auditorías o solo la que desee. Puede ejecutar las auditorías en el estado actual de la página o volver a cargar la página y auditar durante la carga.

No entra en tantos detalles como Google PageSpeed ​​Insights, pero le brinda suficiente información para arreglar la fruta al alcance de la mano. Después de pasar por PageSpeed ​​Insights, mi página estaba en buen estado, pero me proporcionó cierta información sobre mi sitio que Insights no me proporcionó.

Consola

La consola se utiliza para la depuración. Puede registrar diagnósticos, ingresar comandos, evaluar JavaScript, crear perfiles de JavaScript, etc. Puede escribir información en la consola a través de la línea de comandos. Usando la línea de comando, puede usar funciones para seleccionar e inspeccionar elementos en el DOM, monitorear eventos y detener e iniciar el generador de perfiles.

Modo de dispositivo

Una de mis características favoritas es el modo de dispositivo. Puede acceder a esto con el pequeño botón a la izquierda de Elementos en el menú. El modo de dispositivo le permite elegir entre 23 dispositivos móviles populares diferentes (Kindle Fire, varios iPhones, varios Galaxy, computadoras portátiles, etc.) y ver cómo se ve y reacciona su sitio web en ese dispositivo.

También puede arrastrar la pantalla para crear su propio tamaño de pantalla personalizado. El cursor imita la punta de su dedo para que la pantalla reaccione con el mouse como lo haría con su dedo. También puede crear sus propios dispositivos personalizados en la pantalla de configuración.

También puede elegir el tipo de red (3G, 4G, Wi-Fi, etc.) para que pueda analizar cómo se ve y reacciona el sitio en las diferentes redes y velocidades.

Cajón

En la parte inferior de la pantalla encontrarás el cajón. Esto se puede activar o desactivar con el botón >_ en el lado derecho de la barra de herramientas. El cajón contiene:

• Consola: la línea de comandos de la consola. Esto hace que la consola esté disponible cuando se usan otros paneles.
• Buscar: encuentre cualquier fuente. Puede elegir ignorar mayúsculas y minúsculas y buscar expresiones regulares.
• Emulación: herramientas y configuraciones para el modo de dispositivo. Incluye funciones como acelerómetro y coordenadas de geolocalización.
• Representación: muestra las funciones de representación, como el medidor de fps, los bordes en capas compuestos, etc. La mejor parte de esto es que mostrará posibles cuellos de botella.

Es útil tener estas herramientas en el cajón porque algunos de los paneles no incluyen acceso a estas herramientas.

Pensamientos finales

Chrome Developer Tools (DevTools) es un increíble conjunto de herramientas de creación y depuración web para ayudarlo a mejorar su sitio web. Puede arrastrar y soltar elementos rápidamente para cambiar el diseño de su sitio, solucionar problemas de fugas de memoria, solucionar problemas de carga de páginas, ver su sitio web en prácticamente cualquier dispositivo móvil y tamaño de pantalla, y mucho más. Esta descripción general solo está arañando la superficie de cuán poderosas son estas herramientas. Lo mejor de esto es que ya está integrado en Google Chrome para que no tengas que descargar nada.

Me gustaría saber de usted. ¿Utiliza las herramientas para desarrolladores de Chrome? ¿Cuáles son tus características favoritas? ¿Qué es lo que más usas? ¿Tienes algún consejo sobre el uso de las herramientas? Cuéntanoslo en los comentarios.