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 un en la versión anterior, estas funciones no existirán. Si usas una versión posterior, es posible que estas funciones cambiaron. Chrome se actualiza automáticamente a una nueva versión principal cada 6 semanas.

Supervisor de rendimiento

Utiliza el monitor de rendimiento para obtener una vista en tiempo real de varios aspectos de la carga de una página o el rendimiento del entorno de ejecución, que incluye lo siguiente:

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, revisa el Monitor de rendimiento para pistas.

Por qué es importante el rendimiento de carga: BookMyShow logró un aumento del 80% en las conversiones cuando creó un 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 Supervisor de rendimiento
Haz clic en una métrica para ocultarla o mostrarla. En la Figura 1, se muestran los valores de CPU Usage, JS heap size y JS de objetos de escucha de eventos.

Funciones relacionadas:

Panel Performance Recorre el recorrido crítico del usuario y registra todo lo que ocurre en la página, como la actividad de JavaScript, las solicitudes de red, el uso de la CPU y mucho más. También se puede que se usa 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 comienza a analizar el rendimiento, la ruta recomendada es utilizar primero Auditorías y, luego, investiga más a fondo con el panel Rendimiento o Rendimiento. supervisar.

En sitios grandes, la consola puede llenarse rápidamente de mensajes irrelevantes. Usa la nueva consola Barra lateral 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 Mostrar barra lateral de la consola. para mostrarla.

Funciones relacionadas:

Cuadro de texto Filter. Ingresa texto y la consola solo mostrará los mensajes que lo incluyan. texto. 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 al fecha límite para suavizar algunas imperfecciones. Al parecer, la IU de Novedades no se actualizó en tiempo. ¡Lo sentimos!

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

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 > 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.