Este mes, Chrome Canary estuvo repleto de funciones. Sigue leyendo para saber qué secuencias de comandos de terceros causan problemas de rendimiento en tu sitio con los detalles agregados en Rutas, cómo elegir colores coherentes con la nueva paleta de colores, cómo simular una red Wi-Fi de conferencia con perfiles de red personalizables y cómo aprovechar al máximo la IU de DevTools con el nuevo menú principal y mejores cuadros de información.
Mejor asignación de problemas de rendimiento: Detalles agregados en Rutas
En los sitios web actuales, usamos cada vez más píxeles contadores, servicios de análisis, redes sociales, carga de fuentes y publicidad de terceros, a veces demasiados. Para garantizar que esto no suceda y que puedas ver el problema, incorporamos detalles adicionales en el cronograma.
En la pestaña Detalles agregados, puedes enfocarte solo en las funciones costosas o en todo el árbol de llamadas y, luego, desglosar los datos seleccionados por dominio, subdominio o URLs distintas. Por ejemplo, en el cronograma anterior de una carga de página, ahora puedes atribuir las ralentizaciones fácilmente a secuencias de comandos de terceros que provienen de dominios como facebook.net o twitter.com.
Nuevo menú principal exclusivo
Para ordenar la barra de herramientas principal, movimos el panel lateral, la configuración y los íconos de acoplamiento a un nuevo menú principal dedicado.
En particular, la conexión a la estación de carga se volvió mucho más sencilla. En lugar de tener que mantener presionado el ícono anterior, cada posición de conexión tiene su propio ícono.
Además de la conexión en la estación de carga, agregamos la búsqueda de archivos de acceso rápido, combinaciones de teclas y ayuda (que te dirige a nuestra nueva página principal).
Descubre Herramientas para desarrolladores a través de sugerencias de herramientas mejoradas
Tenemos muchos botones en Herramientas para desarrolladores y sabemos que no todos son autoexplicativos. Para facilitar el descubrimiento de acciones y sus combinaciones de teclas, reemplazamos la información sobre la herramienta nativa del sistema por información personalizada y coherente con la plataforma.
Las nuevas indicaciones sobre herramientas aparecen mucho más rápido y, además, incluyen combinaciones de teclas (si las hay).
Crea perfiles de limitación de la red personalizados
Si las opciones predeterminadas del limitador de red son demasiado limitantes para tus casos de uso y necesitas una opción de “Wi-Fi para conferencias” o, por nostalgia, quieres usar un método antiguo y emular una línea “110 baudios”, tenemos buenas noticias. Agregamos un nuevo panel de Configuración que te permite hacer todo esto.
Paletas de colores automáticas, de Material y personalizadas
Ya sea que quieras recrear los colores de la magia o trabajar con una paleta de colores existente, el selector de colores mejorado te ayuda a elegir una paleta de colores coherente para tu sitio.
Si haces clic en el ícono de selector pequeño que se encuentra junto a la paleta, podrás elegir entre las siguientes opciones:
- Colores de la página: Esta paleta se genera automáticamente a partir de los colores que encontramos en tu CSS, por lo que es una gran opción si amplías un sitio existente.
- Material Design: La paleta de Material Design ofrece colores hermosos desde el primer momento y es una opción ideal para comenzar un proyecto nuevo. En este momento, encontrarás todos los colores primarios, pero pronto agregaremos todos los tonos.
- Personalizado: Es tu propio campo de pruebas. Para agregar colores nuevos, elige uno en el selector y, luego, haz clic en el ícono de signo más junto a la paleta. Para cambiar el orden, arrástralas y haz clic con el botón derecho para ver más opciones, como quitar.
Cuéntanos qué opinas y cómo podríamos ampliar la historia de los colores.
Lo mejor del resto
- Las solicitudes realizadas con la API de fetch() ahora se muestran en el panel de red.
- El diseño automático de paneles garantiza que, cuando cambies el tamaño de los paneles de DevTools
, estos se adapten a las nuevas restricciones de espacio. - Inspect Element &Device Mode tiene un conjunto de íconos nuevos.
- Los atributos del panel DOM ahora tienen un color diferente, incluso cuando el nodo está resaltado. (Antes eran todos blancos).
- Los elementos ocultos (que se activan presionando "h" en un nodo del DOM seleccionado) ahora muestran un indicador de círculo gris a la izquierda, y los puntos de interrupción del DOM hacen lo mismo con un círculo azul. (Esto es similar a los indicadores naranjas que ya tenemos para forzar un estado de elemento como :hover).
Como siempre, comunícate con nosotros a través de Twitter o en los comentarios a continuación, y envía errores a crbug.com/new.
¡Hasta el mes que viene!
Paul Bakaus y el equipo de DevTools