Depuración con Chrome DevTools

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

Permítanme compartir con ustedes algunos consejos que podrían ayudarles a utilizar mejor DevTools para 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 la página, puedo ejecutar el comando con el atajo de teclado command shift P y escribir capture. Aquí puedes ver una lista de opciones de captura de pantalla. Desplázate por la lista. Te sorprenderá que hay muchos comandos que puedes ejecutar. El comando run ayuda a ahorrar memoria cerebral 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 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 de command shift P o agregar otro atajo, digamos opción C al mismo comando. Si estás usando Visual Studio Code como editor de código, puedes mapear los atajos a eso también.

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

A continuación, una nueva función.

Para aquellos que lidian mucho con la memoria, ahora puedes usar el inspector de memoria para inspeccionar el buffer de array de JavaScript y la memoria WASM. Por ejemplo, tengo un buffer de array aquí. Vamos a establecer un punto de interrupción y refrescar la página. Nota el nuevo ícono junto al valor del buffer. Haz clic en él para revelar el inspector de memoria. Luego puedes navegar y reanudar las ejecuciones de scripts para inspeccionar los cambios de memoria en tiempo real. Aprende más sobre el inspector de memoria con esta documentación.

A continuación, veamos el panel de red. Hay momentos en que queremos averiguar los iniciadores o dependencias de una solicitud de red en particular. Mantén presionada la tecla shift y pasa el ratón sobre la solicitud en la tabla de solicitudes. DevTools colorea los iniciadores en verde y las dependencias en rojo. A continuación, puedes cambiar el agente de usuario en la pestaña de condiciones de red. Por ejemplo, te gustaría asegurarte de que tu página funcione para la optimización de motores de búsqueda porque algunas configuraciones de servidores o CDN podrían bloquear rastreadores por defecto. Puedes depurar tal comportamiento haciendo clic en el ícono de condiciones de red, elige Google Bot del menú desplegable, y refresca la página para ver si ocurren 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 solicitudes que son mayores de 15 KB. ¿Qué pasa si quiero encontrar todas las solicitudes menores de 15 KB? Puedo usar el signo negativo para negar este resultado de filtro. Por ejemplo, puedes excluir todas las solicitudes con estado 200 con el filtro negativo código de estado 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 usar 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 en casi tiempo real. Me gustaría hacer un seguimiento de las imágenes punteadas en esta página. Haz clic en el ícono de crear expresiones en vivo y escribe document.querySelectorOrImg.length. Haz clic derecho y duplica el elemento de imagen ahora. ¿Ves? El número se actualiza automáticamente. ¿Genial, verdad? También hay algunas utilidades de consola útiles que pueden ahorrar tiempo de escritura. Ahora mismo, usamos document.

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

A continuación, si tienes código que usas frecuentemente, puedes guardarlo como snippets. Ve al panel de sources, abre el panel de snippets. Crea un nuevo snippet, por ejemplo, el comando copy que escribimos anteriormente. Guárdalo. Ahora, ve al panel de elements, selecciona un elemento. Podemos ejecutar un snippet para copiarlo. Usa command P para sacar el menú de comandos. Luego escribe un signo de exclamación seguido del nombre del snippet. El signo de exclamación aquí significa ejecutarlo ahora. Ahí lo tienes. Adelante, guarda todos tus comandos de uso frecuente como snippets.

A continuación, una característica poco mencionada. Usa los local overrides para mantener cambios a través de las cargas de página. Por ejemplo, mi amigo Jack está pidiendo sugerencias para renovar su sitio web sobre fotos de buceo. Podemos editar eso localmente sin ningún despliegue. Ve al panel de sources, selecciona el panel de overrides, luego selecciona una carpeta para overrides. Haz clic en permitir para otorgar acceso a DevTools a la carpeta. Ahora podemos editar la página. Vamos a añadir su nombre al título. Intenta refrescar la página ahora. Ups, por favor recuerda que los cambios no proceden si editas en el panel de elements. La edición debe ocurrir en el panel de sources. Hagámoslo de nuevo. Guarda los cambios y refresca la página. Bien, los cambios se han mantenido ahora.

A Jack le gusta el color marrón. Cambiemos el título al color marrón también. 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 network, filtra por imagen para ver cuántos datos descargamos para la imagen actualmente. Es alrededor de 450 KB. Mejoremos el código usando el elemento picture. Usa command D para seleccionar todas las ocurrencias de la etiqueta de imagen y añade 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 network para ver cuántos datos se cargan ahora. Bien, hemos reducido casi a la mitad los datos aquí.