Novedades de Herramientas para desarrolladores (Chrome 74)

Kayce Basques

¡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 de CSS que afecte el modelo de caja de un nodo, como padding o margin, para destacar 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 Audits

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 el tamaño adecuado y estén separados en los dispositivos móviles.

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

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 binario de WebSocket, haz lo siguiente:

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

   

   Figura 4. El panel de redes

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

   

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

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

   

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

4. Haz clic en la pestaña Mensajes.

   

   Figura 7. La pestaña Mensajes

5. Haz clic en una de las entradas de Binary Message para inspeccionarla.

   

   Figura 8. Cómo inspeccionar un mensaje binario

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

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

Tomar una 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 existe desde 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. Enfoca DevTools y, luego, presiona Ctrl + Mayúsculas + P o Cmd + Mayúsculas + P (Mac) para abrir 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 de la ventana gráfica de la que quieres hacer una captura de pantalla.

   

   Figura 11: Seleccionar la parte de la ventana gráfica para la captura de pantalla

Filtros de Service Worker en el panel de red

Escribe is:service-worker-initiated o is:service-worker-intercepted en el cuadro de texto del filtro del panel Network para ver las solicitudes que generó (initiated) o que posiblemente modificó (intercepted) un service worker.

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

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

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

Actualizaciones del panel de rendimiento

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

Consulta Reduce el trabajo del subproceso principal para ver un ejemplo del uso del panel de 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.

Figura 14. Colocar el cursor sobre una tarea larga en un registro de rendimiento

First Paint en la sección Timings

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

Figura 15. First Paint en la sección Timings

Nuevo instructivo de DOM

Consulta Cómo comenzar a ver y cambiar el DOM para obtener una guía práctica de 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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores