Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 64)

Kayce Basques

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

Monitor de rendimiento. Ver 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 de Console similares La consola ahora agrupa mensajes similares de forma predeterminada.

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

Nota: Verifica qué versión de Chrome estás ejecutando en chrome://version. Si ejecutas una versión anterior, estas características no existirán. Si estás ejecutando una versión posterior, es posible que estas funciones hayan cambiado. Chrome se actualiza automáticamente a una nueva versión principal cada 6 semanas.

Supervisor de rendimiento

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

el uso de CPU.
Tamaño del montón de JavaScript.
Cantidad total de nodos del DOM, objetos de escucha de eventos de JavaScript, documentos y marcos de la página.
Nuevos cálculos de diseños y estilos por segundo.

Si los usuarios informan que la app parece lenta o inestable, comprueba 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 enfocada en la velocidad. Obtén más información.

Para usar el monitor de rendimiento, haz lo siguiente:

Abre el menú de comandos.
Comienza a escribir Performance y, luego, selecciona Show Performance Monitor.

Figura 1: El monitor de rendimiento
Haz clic en una métrica para ocultarla o mostrarla. En la Figura 1, se muestran los gráficos de Uso de CPU, tamaño de montón de JS y objetos de escucha de eventos de JS.

Funciones relacionadas:

Panel Performance Analiza el 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 CPU y mucho más. También se puede usar para analizar el rendimiento de carga. Obtén más información.
Panel Auditorías Ejecuta un paquete de pruebas automatizadas de carga y rendimiento del entorno de ejecución con cualquier URL. Obtén más información.

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

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

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

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 Show Console Sidebar para mostrarla.

Funciones relacionadas:

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

Agrupar mensajes de Console similares

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

Ejemplo de la consola que agrupa mensajes similares

Figura 3. Ejemplo de la consola que agrupa mensajes similares

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

Ejemplo de un grupo expandido de mensajes de Console

Figura 4. Ejemplo de un grupo expandido de mensajes de Console

Desmarca la casilla de verificación Grupo similar para inhabilitar esta función.

Funciones relacionadas:

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

Anulaciones locales

¡Uy! Originalmente, programamos el lanzamiento de esta función en Chrome 64, pero lo acercamos a la fecha límite para suavizar algunas imperfecciones. Al parecer, la IU de Novedades no se actualizó a tiempo. Perdón.

Esta función se implementará en Chrome 65 y se implementará aproximadamente 6 semanas después de Chrome 64. Consulta Local Overrides para obtener más información. Si usas Windows o Mac, puedes descargar Chrome Canary para probar Chrome 65 ahora.

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 plataforma 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.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar 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.