Depuración con Chrome DevTools

Hola a todos, soy Jasleen Yin. Trabajo en Google. Soy la defensora del desarrollador de Chrome DevTools. Como desarrollador web, uso Chrome DevTools todos los días para depurar mis aplicaciones web.

Permítanme compartir con ustedes algunos consejos que pueden ayudarles a aprovechar mejor DevTools para la depuración. El primer consejo es sobre cómo llegar al panel o función que necesitas más rápido con el comando run. Por ejemplo, si quiero depurar mi video, puedo ir al comando run, escribir media y hacer clic enter para abrir el panel de medios. O si quiero capturar una captura de pantalla de una página, puedo usar el comando run con el atajo de teclado comando shift P y escribir capture. Aquí puedes ver una lista de opciones de captura de pantalla. Desplázate por la lista. Te sorprenderá ver cuántos comandos puedes ejecutar. El comando run me ayuda a ahorrar memoria en mi cerebro porque a veces simplemente no recuerdo qué panel abrir para emular el tema de CSS, por ejemplo.

A continuación, hay un montón de atajos de teclado en DevTools, pero nosotros, como humanos, tenemos una memoria limitada. En lugar de memorizar los atajos predefinidos de DevTools, ahora puedes personalizar tus propios atajos. Ve a configuración, atajos. Puedo personalizar el atajo del comando run. Puedo reemplazar el atajo actual comando shift P o agregar otro atajo, por ejemplo, opción C para el mismo comando. Si estás usando Visual Studio Code como editor de código, también puedes asignar los atajos a eso.

A continuación, hay momentos en los que quiero depurar mi desplegable de búsqueda. Sin embargo, cuando hago clic derecho en inspeccionar en el cuadro de búsqueda, el desplegable desaparece. Esto es molesto. Quiero decir, solo quiero depurar el desplegable. Por favor, ayuda. Tranquilízate. Saquemos el comando run y escribamos focus. Selecciona la opción de emular una página con enfoque. Problema resuelto. La razón es que el desplegable se activa cuando el usuario se enfoca en la entrada. Así que usa DevTools para emular el efecto de enfoque y listo.

A continuación, una nueva función.

Para aquellos que trabajan mucho con la memoria, ahora pueden utilizar el inspector de memoria para inspeccionar el búfer de matriz de JavaScript y la memoria WASM. Por ejemplo, aquí tengo un búfer de matriz. Vamos a establecer un punto de interrupción y actualizar la página. Observa el nuevo icono junto al valor del búfer. Haz clic en él para revelar el inspector de memoria. Luego puedes navegar y reanudar la ejecución del script para inspeccionar los cambios de memoria en tiempo real. Obtén más información sobre el inspector de memoria en esta documentación.

A continuación, veamos el panel de red. A veces queremos saber los iniciadores o dependencias de una solicitud de red en particular. Mantén presionada la tecla shift y coloca el mouse sobre la solicitud en la tabla de solicitudes. DevTools colorea los iniciadores en verde y las dependencias en rojo. Luego, puedes cambiar el agente de usuario en la pestaña de condiciones de red. Por ejemplo, si quieres asegurarte de que tu página funcione para la optimización de motores de búsqueda porque algunos servidores o configuraciones de CDN pueden bloquear los rastreadores de forma predeterminada. Puedes depurar este comportamiento haciendo clic en el icono de condiciones de red, elegir Google Bot en el menú desplegable y actualizar la página para ver si se producen errores. También puedes establecer un agente de usuario personalizado si no se encuentra en la lista. A continuación, algunos consejos sobre el filtro de red. Puedes filtrar la lista por tamaño. Aquí, uso la palabra clave `mayor que` para encontrar las solicitudes que son más grandes que 15 KB. ¿Y si quiero encontrar todas las solicitudes más pequeñas que 15 KB? Puedo usar el signo negativo para negar el resultado de este filtro. Por ejemplo, puedes excluir todas las solicitudes con estado 200 con el filtro de código de estado negativo 200.

A continuación, pasemos a la consola. Si te encuentras escribiendo la misma expresión de JavaScript una y otra vez durante la depuración, considera utilizar las expresiones en vivo. De esta manera, escribes una expresión una vez y luego la fijas en la parte superior de tu consola. El valor de las expresiones se actualiza casi en tiempo real. Me gustaría hacer un seguimiento de las imágenes punteadas en esta página. Haz clic en el icono de crear expresiones en vivo y escribe document.querySelectorOrImg.length. Haz clic derecho y duplica el elemento de imagen ahora. Mira, el número se actualiza automáticamente. ¿Genial, verdad? También hay algunas utilidades útiles de la consola que pueden ahorrarte tiempo de escritura. Ahora mismo, usamos document.querySelectorOr para obtener las imágenes punteadas de la página.

Podemos utilizar el comando $$ para hacer lo mismo. Además, si quiero imprimir el elemento de imagen que tengo actualmente seleccionado, puedo usar $0 en lugar de escribir console.log. Puedo combinar el comando $ con copy para copiar el elemento al portapapeles. En realidad, hay más utilidades de la consola. Consulta la documentación para comandos como monitorEvents, queryObjects y profile.

A continuación, si tienes código que utilizas con frecuencia, puedes guardarlos como fragmentos. Ve al panel de fuentes y abre el panel de fragmentos. Crea un nuevo fragmento, por ejemplo, el comando de copia que escribimos anteriormente. Guárdalo. Ahora, ve al panel de elementos y selecciona un elemento. Podemos ejecutar un fragmento para copiarlo. Utiliza el comando P para abrir el menú de comandos. Luego escribe un signo de exclamación seguido del nombre del fragmento. El signo de exclamación aquí significa ejecutarlo ahora. ¡Listo! Continúa y guarda todos tus comandos de uso frecuente como fragmentos.

A continuación, una función mencionada. Utiliza las anulaciones locales para mantener los cambios en las cargas de página. Por ejemplo, mi amigo Jack está buscando sugerencias para renovar su sitio web sobre fotografías de buceo. Podemos editar eso localmente sin implementaciones. Ve al panel de fuentes, selecciona el panel de anulaciones, luego selecciona una carpeta para las anulaciones. Haz clic en permitir para otorgar acceso a DevTools a la carpeta. Ahora podemos editar la página. Agreguemos su nombre al título. Intenta actualizar la página ahora. ¡Ups, recuerda que los cambios no se aplican si los editas en el panel de elementos. La edición debe realizarse en el panel de fuentes. Intentémoslo de nuevo. Guarda los cambios y actualiza la página. ¡Genial, los cambios se mantienen ahora!

A Jack le gusta el color granate. Cambiemos también el título a color granate. Bien. Veamos las imágenes ahora. Creo que Jack puede usar un formato de imagen más optimizado como AVIF para mejorar el rendimiento de la página. Ve al panel de red, filtra por imagen para ver cuántos datos descargamos para la imagen actualmente. Son aproximadamente 450 KB. Mejoremos el código utilizando el elemento picture. Usa el comando D para seleccionar todas las ocurrencias de etiquetas de imagen y agrega el formato de imagen AVIF. Elimina los nombres de las imágenes y cierra también la etiqueta picture. Listo. Guarda todos los cambios y actualiza la página. Vamos al panel de red para ver cuántos datos se cargan ahora. Bien, hemos reducido casi la mitad de los datos aquí. Por cierto, Brian y Uma tienen un excelente contenido sobre cómo utilizar anulaciones locales para comparar y optimizar la velocidad de la página. Échale un vistazo. Genial, ahora puedo proponer los cambios a Jack. Pero olvidé qué cambios he realizado hasta ahora. Sería genial si DevTools rastreara todos mis cambios y me mostrara las diferencias. Y sí, en realidad hay una pestaña de cambios para eso. Abrámosla. Aquí puedes ver todos los cambios que hemos realizado hasta ahora. También puedes hacer clic para deshacer los cambios. ¿Sabías que DevTools es una aplicación web en sí misma? Está construida con HTML, CSS y JavaScript. De hecho, puedes usar DevTools para depurar DevTools. Asegúrate de que tu herramienta de desarrollo esté desacoplada, luego presiona Comando-Option-C para abrir otra instancia de DevTools. Ahora puedes inspeccionar DevTools con DevTools como cualquier otra aplicación web. Nuestro equipo acaba de migrar la base de código de DevTools de JavaScript a TypeScript y refactorizó la base de código para utilizar los nuevos módulos de JavaScript. Publicamos en nuestro blog cómo hicimos todo esto. Si quieres aprender más sobre cómo construimos DevTools, visita nuestro blog en goo.goo.gov devtools-blog. Por último, si quieres darnos tu opinión o informar algún problema de DevTools, puedes hacer clic en Más opciones, Ayuda, Informar un problema de DevTools o comunicarte con nosotros en Twitter de Chrome DevTools. Gracias por ver. Espero que este consejo te ayude a disfrutar más de DevTools. Sígueme en Twitter si tienes alguna pregunta. ¡Ciao!