Novedades de Herramientas para desarrolladores (Chrome 74)

Kayce Basques
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 de CSS

Coloca el cursor sobre una propiedad de 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 propiedad. declaración

Lighthouse v4 en el panel Audits

Los nuevos botones para presionar no tienen el tamaño adecuado comprueban que los elementos interactivos, como en los dispositivos móviles, los botones y los enlaces deben ser adecuadamente grandes y separados.

La categoría 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 AWP

Figura 3. El nuevo sistema de puntuación de insignias para la categoría 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 la actividad de red.

    El panel Network

    Figura 4. El panel Network

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

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

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

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

    Inspecciona una conexión de WebSocket

    Figura 6. Inspecciona 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 Binary Message (mensaje binario) para inspeccionarla.

    Inspecciona un mensaje binario

    Figura 8. Inspecciona un mensaje binario

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

Visualiza un mensaje binario como Base64

Figura 9. Visualiza un mensaje binario como Base64

Hacer una captura de pantalla del área en el menú Command

Las capturas de pantalla del área te permiten tomar una captura de una parte del viewport. Esta función se ha pero el flujo de trabajo para acceder a él estaba bastante oculto. Ahora las capturas de pantalla del área disponibles en el menú de comandos.

  1. Enfoca las Herramientas para desarrolladores y presiona Control + Mayúsculas + P. Comando + Mayús + P (Mac) para abrir el menú de comandos.

    Menú de comandos

    Figura 10: Menú de comandos

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

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

    Selección de la parte de la vista del puerto para tomar una captura de pantalla

    Figura 11: Selección de la parte de la vista del puerto para tomar una captura de pantalla

Filtros de service worker en el panel de Red

Escribe is:service-worker-initiated o is:service-worker-intercepted en el filtro del panel de red cuadro de texto para ver las solicitudes que generaron (initiated) o posiblemente modificaron (intercepted) por un service worker.

Filtrado por is:service-worker-started

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

Filtrar por is:service-worker-intercepted

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

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

Actualizaciones del panel Rendimiento

Las grabaciones de presentaciones ahora marcan tareas largas y First Paint.

Para ver un ejemplo de cómo usar el panel Rendimiento para analizar datos, consulta Menos trabajo de los subprocesos principales. el rendimiento de carga de la página.

Tareas largas en las grabaciones de rendimiento

Las grabaciones de rendimiento ahora muestran tasks largas.

Colocar el cursor sobre una tarea larga en una grabación de presentación

Figura 14. Colocar el cursor sobre una tarea larga en una grabación de presentación

Primer procesamiento de imagen en la sección Tiempos

En la sección Tiempos de un registro de rendimiento, ahora se marca la primera pintura.

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 Comienza a ver y cambiar el DOM para realizar un recorrido práctico de los DOM atributos.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

  • Para enviarnos sugerencias o comentarios, accede a crbug.com.
  • Informa un problema en Herramientas para desarrolladores con Más opciones   Más > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Twittea a @ChromeDevTools.
  • Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.