Novedades de Herramientas para desarrolladores (Chrome 74)

Kayce Basques
Kayce Basques
X GitHub Error

¡Les damos la bienvenida nuevamente! Estas son las novedades.

Versión en video de esta página

Destaca todos los nodos afectados por la propiedad CSS

Coloca el cursor sobre una propiedad CSS que afecte el modelo de cuadro de un nodo, como padding o margin, para destacar todos los nodos afectados por esa declaración.

Si colocas el cursor sobre una propiedad de margen, se destacarán todos los nodos afectados por esa declaración.

Figura 1. Si colocas el cursor sobre una propiedad margin, se destacarán los márgenes de todos los nodos afectados por esa declaración.

Lighthouse v4 en el panel Auditorías

La nueva auditoría El tamaño de los elementos táctiles no es el adecuado verifica que los elementos interactivos, como los botones y los vínculos, tengan un tamaño y una separación adecuados en los dispositivos móviles.

La categoría de AWP de un informe ahora usa un sistema de puntuación de insignias.

El nuevo sistema de puntuación de insignias para la categoría de AWP

Figura 3. El nuevo sistema de puntuación de insignias para la categoría de AWP

Visualizador de mensajes binarios de WebSocket

Para ver el contenido de un mensaje de WebSocket binario, haz lo siguiente:

  1. Abre el panel Red. Consulta Cómo inspeccionar la actividad de red para aprender los aspectos básicos del análisis de la actividad de red.

    El panel Network

    Figura 4. El panel Network

  2. Haz clic en WS para filtrar todos los recursos que no sean conexiones de WebSocket.

    Después de hacer clic en WS, solo se muestran las conexiones de WebSocket.

    Figura 5. Después de hacer clic en WS, solo se muestran las conexiones de WebSocket.

  3. Haz clic en el Nombre de una conexión de WebSocket para inspeccionarla.

    Cómo inspeccionar una conexión de WebSocket

    Figura 6. Cómo inspeccionar una conexión de WebSocket

  4. Haz clic en la pestaña Mensajes.

    La pestaña Mensajes

    Figura 7. La pestaña Mensajes

  5. Haz clic en una de las entradas de Mensaje binario para inspeccionarla.

    Inspecciona un mensaje binario

    Figura 8. Inspecciona un mensaje binario

Usa el menú desplegable que se encuentra en la parte inferior del visor para convertir el mensaje a Base64 o UTF-8. Haz clic en Copiar en el portapapeles Copiar en el portapapeles para copiar el mensaje binario en el portapapeles.

Cómo ver un mensaje binario como Base64

Figura 9. Cómo ver un mensaje binario como Base64

Captura de pantalla del área en el menú de comandos

Las capturas de pantalla de área te permiten capturar una parte del viewport. Esta función ya se encontraba disponible hace un tiempo, pero el flujo de trabajo para acceder a ella estaba bastante oculto. Las capturas de pantalla de áreas ahora están disponibles en el menú de comandos.

  1. Enfócate en DevTools y, luego, presiona Control + Mayúsculas + P o Comando + Mayúsculas + P (Mac) para abrir el menú Comando.

    El menú de comandos

    Figura 10: El menú de comandos

  2. Comienza a escribir area, selecciona Capturar capturas de pantalla de un área y, luego, presiona Intro.

  3. Arrastra el mouse sobre la sección del viewport de la que quieres tomar una captura de pantalla.

    Selecciona la parte del viewport de la que quieres tomar una captura de pantalla.

    Figura 11: Selecciona la parte del viewport de la que quieres tomar una captura de pantalla.

Filtros de servicio de trabajo en el panel de red

Escribe is:service-worker-initiated o is:service-worker-intercepted en el cuadro de texto del filtro del panel de red para ver las solicitudes que un trabajador de servicio causó (initiated) o pudo modificar (intercepted).

Filtrado por is:service-worker-initiated

Figura 12: Filtrar por is:service-worker-initiated

Cómo filtrar por is:service-worker-intercepted

Figura 13: Filtrar por is:service-worker-intercepted

Consulta Cómo filtrar recursos para obtener más información sobre cómo filtrar registros de red.

Actualizaciones del panel de rendimiento

Las grabaciones de rendimiento ahora marcan las tareas largas y la primera pintura.

Consulta Cómo hacer menos trabajo en el subproceso principal para ver un ejemplo del uso del panel Rendimiento para analizar el rendimiento de la carga de la página.

Tareas largas en las grabaciones de rendimiento

Las grabaciones de rendimiento ahora muestran tareas largas.

Coloca el cursor sobre una tarea larga en una grabación de rendimiento

Figura 14. Coloca el cursor sobre una tarea larga en una grabación de rendimiento

Primer procesamiento de imagen en la sección Tiempos

La sección Tiempos de una grabación de rendimiento ahora marca el primer procesamiento de imagen.

Primer procesamiento de imagen en la sección Tiempos

Figura 15. Primer procesamiento de imagen en la sección Tiempos

Nuevo instructivo de DOM

Consulta Cómo comenzar a ver y cambiar el DOM para obtener una visita práctica a las funciones relacionadas con el DOM.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.