Novedades de Herramientas para desarrolladores (Chrome 64)

Kayce Basques
Kayce Basques

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

Continúa 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 de la carga de una página o del rendimiento del tiempo de ejecución, incluidos los siguientes:

  • el uso de CPU.
  • Tamaño del montón de JavaScript.
  • 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 parece lenta o inestable, consulta el Monitor de rendimiento para obtener pistas.

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

Para usar el Monitor de rendimiento, sigue estos pasos:

  1. Abre el Menú de comandos.
  2. Comienza a escribir Performance y selecciona Show Performance Monitor.

    El monitor de rendimiento Figura 1: El monitor de rendimiento

  3. Haz clic en una métrica para ocultarla o mostrarla. En la Figura 1, se muestran los gráficos Uso de CPU, Tamaño del montón de JS y Objetos de escucha de eventos de JS.

Funciones relacionadas:

  • Panel Performance. Analiza un recorrido crítico para el 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 Audits (Auditorías) Ejecuta un paquete de pruebas automatizadas de carga y rendimiento del entorno 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 Auditorías y, luego, investigar más a fondo con el panel Rendimiento o el monitor Rendimiento.

Barra lateral de la consola

En 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 consideres importantes.

Uso de la barra lateral de la consola para mostrar solo mensajes de error

Figura 2. Uso de la barra lateral de la consola para mostrar solo mensajes de error

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

Funciones relacionadas:

  • Filtrar. Ingresa texto para que la consola solo muestre los mensajes que lo incluyan. También es compatible con patrones de regex, filtros negativos y filtros de URL.

Agrupar mensajes similares de la consola

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 cómo la consola agrupa mensajes similares

Figura 3. Ejemplo de cómo la consola agrupa mensajes similares

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

Ejemplo de un grupo expandido de mensajes de la consola

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

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

Funciones relacionadas:

Anulaciones locales

¡Uy! En un principio, programamos el lanzamiento de esta función en Chrome 64, pero la acercamos al plazo para suavizar algunos aspectos imprevistos. Al parecer, la IU de Novedades no se actualizó a tiempo. Perdón.

Esta función estará disponible en Chrome 65, que llegará aproximadamente 6 semanas después de Chrome 64. Consulta Anulaciones locales 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 Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

  • Envíanos tus sugerencias o comentarios a través de crbug.com.
  • Informa un problema en Herramientas para desarrolladores mediante Más opciones   Más   > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Envía un tweet a @ChromeDevTools.
  • Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).

Novedades de Herramientas para desarrolladores

Una lista de todos los temas abordados en la serie Novedades de Herramientas para desarrolladores.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Se canceló Chrome 82.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59