Novedades de Herramientas para desarrolladores (Chrome 64)

Kayce Basques

¡Les damos la bienvenida nuevamente! Las nuevas funciones que se agregarán a las Herramientas para desarrolladores en Chrome 64 incluyen las siguientes:

• Monitor de rendimiento. Consulta el rendimiento de una página en tiempo real.
• Barra lateral de la consola. Reduce el ruido de la consola y enfócate en los mensajes que son importantes para ti.
• Agrupar mensajes similares de la consola Ahora, la consola agrupa los mensajes similares de forma predeterminada.

Sigue leyendo o mira la versión en video de estas notas de la versión a continuación.

Supervisor de rendimiento

Usa el Monitor de rendimiento para obtener una vista en tiempo real de varios aspectos del rendimiento de carga o de tiempo de ejecución de una página, incluidos los siguientes:

• Uso de CPU
• Tamaño de la pila de JavaScript.
• Es la cantidad total de nodos del DOM, objetos de escucha de eventos de JavaScript, documentos y marcos en la página.
• Diseños y recálculos de estilo por segundo.

Si los usuarios informan que tu app se siente lenta o con tirones, consulta el Monitor de rendimiento para obtener pistas.

Por qué es importante el rendimiento de carga: BookMyShow logró un aumento del 80% en las conversiones cuando creó una app web progresiva que se enfocaba en la velocidad. Obtén más información.

Para usar el Monitor de rendimiento, haz lo siguiente:

1. Abre el menú de comandos.

2. Comienza a escribir Performance y, luego, selecciona Show Performance Monitor.

   Figura 1. El Supervisor de rendimiento

3. Haz clic en una métrica para mostrarla u ocultarla. En la figura 1, se muestran los gráficos de Uso de CPU, Tamaño del heap de JS y Eventos de JS.

Funciones relacionadas:

• Panel Rendimiento Recorre un recorrido crítico del usuario y registra todo lo que sucede en la página, incluida la actividad de JavaScript, las solicitudes de red, el uso de la CPU y mucho más. También se puede usar para analizar el rendimiento de la carga. Obtén más información.
• Panel Audits Ejecuta un conjunto de pruebas automatizadas de rendimiento de carga y tiempo de ejecución en cualquier URL. Obtén más información.

Si recién comienzas a analizar el rendimiento, la ruta recomendada es usar primero el panel de Auditorías y, luego, investigar más a fondo con el panel de Rendimiento o el monitor de Rendimiento.

Barra lateral de la consola

En los sitios grandes, la consola puede llenarse rápidamente de mensajes irrelevantes. Usa la nueva barra lateral de la consola para reducir el ruido y enfocarte en los mensajes que son importantes para ti.

Figura 2. Cómo usar la barra lateral de la consola para mostrar solo los mensajes de error

La barra lateral de la consola está oculta de forma predeterminada. Haz clic en Mostrar la barra lateral de la consola para mostrarla.

Funciones relacionadas:

• Cuadro de texto Filtro Ingresa texto y la consola solo mostrará los mensajes que incluyan ese texto. También admite patrones de regex, filtros negativos y filtros de URL.

Agrupa los mensajes similares de la consola

Ahora, la consola agrupa los mensajes similares de forma predeterminada. Por ejemplo, en la Figura 3, hay 27 instancias del mensaje [Violation] Avoid using document.write().

Figura 3. Ejemplo de la consola que agrupa mensajes similares

Haz clic en un grupo para expandirlo y ver cada instancia del mensaje.

Figura 4. Ejemplo de un grupo expandido de mensajes de la consola

Desmarca la casilla de verificación Agrupar similares para inhabilitar esta función.

Funciones relacionadas:

• Puedes agrupar tus propios mensajes de la consola con console.group().

Anulaciones locales

¡Uy! Originalmente, habíamos programado el lanzamiento de esta función en Chrome 64, pero la retiramos cerca de la fecha límite para pulir algunos detalles. Aparentemente, la IU de Novedades no se actualizó a tiempo. ¡Lo sentimos!

Esta función se lanzará en Chrome 65, que estará disponible aproximadamente 6 semanas después de Chrome 64. Consulta Invalidaciones locales para obtener más información. Si usas Windows o Mac, puedes probar Chrome 65 ahora mismo. Para ello, descarga Chrome Canary.

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